/**========================================================================
 *                               Base Styles
 *========================================================================**/
/*================================ Fonts Face ==============================*/

@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/IRANSansWeb(FaNum)_Bold.woff") format("woff");
}

@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/IRANSansWeb(FaNum)_Medium.woff") format("woff");
}

@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/IRANSansWeb(FaNum)_Light.woff") format("woff");
}

@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/IRANSansWeb(FaNum)_UltraLight.woff") format("woff");
}

@font-face {
  font-family: "IRANSansWeb";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/IRANSansWeb(FaNum).woff") format("woff");
}

/*================================  Css Variable ==============================*/

/*================================  CSS Variables ==============================*/

:root {
  --headerHeight: 85px;

  /*--------------------- Main Colors ---------------------*/
  --primaryColor: #ed1c24;
  --primaryColorRGB: 237, 28, 36;
  --secondColor: #d23e3e;
  --thirdColor: #3f51b5;

  /*----------------- Background Colors --------------------*/
  --grayBack: #f8f9fb;
  --darkBack: #212121;
  --darkBackRGB: 33, 33, 33;
  --whiteColor: #ffffff;
  --whiteColorRGB: 255, 255, 255;

  /*---------------- Premium Editorial Palette (Slate) ----------------*/
  --premiumDark: #050810;
  --premiumDarkRGB: 5, 8, 16;
  --slate900: #0f172a;
  --slate800: #1e293b;
  --slate700: #334155;
  --slate600: #475569;
  --slate500: #64748b;
  --slate400: #94a3b8;
  --slate300: #cbd5e1;
  --slate200: #e2e8f0;
  --slate100: #f1f5f9;
  --slate50: #f8fafc;

  /*---------------------- Text Colors ---------------------*/
  --lightTextColor: #ffffff;
  --grayTextColor: #7b7b7b;
  --textColorL1: #21252b;
  --textColorL2: #353535;
  --textColorL3: #5d596c;

  /*---------------------- Border Colors ---------------------*/
  --borderColor: #f0f2f5;

  /*---------------------- Border Radius ---------------------*/
  --borderRadius: 0.5rem;
  --borderRadiusLg: 1rem;

  /*--------------------- Box Shadow ---------------------*/
  --boxShadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  --boxShadowLg: 0 15px 30px 0 rgba(40, 37, 37, 0.5);
  --boxShadowHover: 0 15px 30px 0 rgba(20, 65, 107, 0.5);

  /* Premium Soft Shadows */
  --premiumShadow: 0 15px 35px -5px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --premiumGlow: 0 10px 25px -5px rgba(var(--primaryColorRGB), 0.4);

  /*---------------------- Transition ---------------------*/
  --mainTransition: all ease-in-out 300ms;
  --smoothTransition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Awwwards style easing */

  /*---------------------- Fonts & Typography ---------------------*/
  --fontIcons: "Font Awesome 6 Pro";
  --bodyFont: "IRANSansWeb";

  /*--------------------- Text Shadow ---------------------*/
  --textShadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

/*================================ Basic Style ==============================*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  scroll-behavior: smooth;
}

body {
  font-family: var(--bodyFont);
  background: var(--grayBack);
  color: var(--textColorL1);
  flex-direction: column;
  line-height: 1.65;
  font-weight: 300;
  direction: rtl;
  display: flex;
  width: 100%;
}

body.modal-open,
.modal {
  padding: 0 !important;
}

i {
  justify-content: center;
  align-items: center;
  line-height: 1;
  display: flex;
}

ul {
  padding: 0;
  margin: 0;
}

p {
  color: var(--grayTextColor);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

p a {
  color: var(--primaryColor);
  font-weight: 500;
}

p a:hover {
  color: var(--textColorL2);
}

a {
  transition: var(--mainTransition);
  color: var(--textColorL1);
  text-decoration: none;
}

a:hover {
  color: var(--primaryColor);
}

.text-primary {
  color: var(--primaryColor) !important;
}

/*=================================  Basic Class ===============================*/

.row {
  flex: 1;
}

.flex {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
}

.flex-column {
  flex-direction: column;
  display: flex;
}

.img-fluid {
  max-height: 100%;
}

.section-space {
  padding-block: 8rem;
}

.section-space.md {
  padding-block: 6rem;
}

.section-space.sm {
  padding-block: 4rem;
}

.dropdown-menu {
  text-align: start;
}

/*================================  Colors ==============================*/

.bg-gray {
  background-color: var(--grayBack);
}

.bg-primary {
  background-color: var(--primaryColor) !important;
}

.bg-secondary {
  background-color: var(--secondColor) !important;
}

.bg-image {
  background-image: url("../images/back.png");
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bg-gradient {
  background-image: linear-gradient(270deg, var(--primaryColor), var(--secondColor)) !important;
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
}

.bg-pattern {
  --pattern-url: url("../images/pattern.png");
  background-image: linear-gradient(270deg, var(--primaryColor), var(--secondColor)) !important;
  animation: gradientAnimation 20s ease-in-out infinite;
  color: var(--lightTextColor);
  background-size: 400% 400%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.bg-pattern::before {
  background: var(--pattern-url) top left repeat;
  animation: patternDrift 40s linear infinite;
  mix-blend-mode: soft-light;
  background-size: 200px;
  /* filter: contrast(1.2); */
  position: absolute;
  opacity: 0.3;
  content: "";
  z-index: -1;
  inset: 0;
}

@keyframes patternDrift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1000px 1000px;
  }
}

/*================================  Scroll Bar ==============================*/

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primaryColor);
}

::-webkit-scrollbar-track {
  background-color: var(--grayBack);
}

/*================================ Container Style ==============================*/

.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  padding-inline-start: calc(var(--bs-gutter-x) * 0.5);
  padding-inline-end: calc(var(--bs-gutter-x) * 0.5);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 100%;
}

@media (min-width: 576px) {

  .container-sm,
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {

  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}

@media (min-width: 1024px) {

  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}

@media (min-width: 75rem) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1340px) {

  .container-xl,
  .container-lg,
  .container {
    max-width: 1260px;
  }
}

@media (min-width: 87.5rem) {

  .container-xl,
  .container-lg,
  .container {
    max-width: 83.75rem;
  }
}

/*================================ Image ==============================*/

figure {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  display: flex;
  margin: 0;
}

figure figcaption {
  width: 100%;
}

figure img {
  max-height: 100%;
  max-width: 100%;
}

.thumbnail-zoom figure img {
  transition: var(--mainTransition);
}

.thumbnail-zoom:hover figure img {
  transform: scale(1.1);
}

/*================================ Form And Inputs ==============================*/

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
select {
  -webkit-appearance: none;
  appearance: none;
}

.submit-btn-text {
  all: unset;
  transition: var(--mainTransition);
  color: var(--lightTextColor);
  justify-content: start;
  align-items: center;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  gap: 0.5rem;
}

.submit-btn-text i {
  font-size: 13px;
}

.submit-btn-text:hover {
  color: var(--primaryColor);
}

.input-box {
  justify-content: start;
  align-items: center;
  position: relative;
  overflow: hidden;
  display: flex;
  width: 100%;
  z-index: 1;
}

.form-label {
  color: var(--grayTextColor);
  margin-bottom: 0.25rem;
  font-size: 0.825rem;
}

.input-box label,
.input-box .form-label {
  transition: linear all 500ms;
  color: var(--textColorL1);
  inset-inline-start: 0;
  inset-block: 3px auto;
  align-items: center;
  position: absolute;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 0;
  font-size: 1rem;
  opacity: 0.9;
  display: flex;
  height: 30px;
  width: 100%;
  margin: auto;
  z-index: -1;
}

.input-box:has(input:focus) label,
.input-box:has(input:hover) label,
.input-box:has(input.form-control:focus) label,
.input-box:has(input.form-control:hover) label {
  transform: translateX(-200%);
  opacity: 0;
}

.input-box input,
.input-box input.form-control {
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.25);
  background: transparent;
  justify-content: start;
  padding: 2px 0 7px 0;
  align-items: center;
  position: relative;
  border-radius: 0;
  height: 2.5rem;
  display: flex;
}

.input-box input:focus,
.input-box input:hover,
.input-box input.form-control:focus,
.input-box input.form-control:hover {
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  background-color: transparent;
  box-shadow: none;
  outline: 0;
}

input,
input.form-control,
textarea.form-control,
select.form-control,
textarea,
select {
  border: 0.0625rem solid var(--borderColor);
  border-radius: var(--borderRadius);
  background-color: var(--grayBack);
  transition: var(--mainTransition);
  color: var(--textColorL1);
  font-size: 0.9375rem;
  padding: 0.625rem;
  box-shadow: none;
  outline: none;
  height: 3rem;
  width: 100%;
  margin: 0;
}

input:focus,
input:hover,
input.form-control:focus,
input.form-control:hover,
textarea.form-control:focus,
textarea.form-control:hover,
select.form-control:focus,
select.form-control:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
  border: 0.09rem solid var(--primaryColor);
  background-color: var(--grayBack);
  box-shadow: none;
  outline: 0;
}

.custom-file-upload {
  border: 0.0625rem solid var(--borderColor);
  border-radius: var(--borderRadius);
  background-color: var(--grayBack);
  transition: var(--mainTransition);
  color: var(--textColorL1);
  font-size: 0.9375rem;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

.custom-file-upload:hover {
  border: 0.09rem solid var(--primaryColor);
  background-color: var(--grayBack);
}

.custom-file-upload input[type="file"] {
  display: none;
}

.custom-file-upload label {
  background-color: var(--darkBack);
  transition: var(--mainTransition);
  color: var(--lightTextColor);
  display: inline-block;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.custom-file-upload label:hover {
  background-color: var(--primaryColor);
}

.custom-file-upload .file-name {
  color: var(--textColorL1);
  margin-inline-start: 1rem;
  font-size: 0.85rem;
}

.default-input {
  position: relative;
}

.default-input:has(i) input,
.default-input:has(i) input.form-control {
  padding-inline-start: 2rem;
}

.default-input i {
  position: absolute;
  inset: 0 0.5rem 0 auto;
  margin: auto;
  height: fit-content;
  opacity: 0.7;
  font-size: 1.125rem;
  color: var(--textColorL1);
}

select,
select.form-control {
  padding-inline-end: 2rem;
  -webkit-appearance: none;
  appearance: none;
}

.select-container {
  position: relative;
}

.select-container:has(select:focus)::after,
.select-container:has(select.form-control:focus)::after {
  transform: rotate(180deg);
  color: var(--primaryColor);
}

.select-container::after {
  transition: var(--mainTransition);
  font-family: var(--fontIcons);
  color: var(--textColorL3);
  inset: 0 auto 0 0.25rem;
  justify-content: center;
  align-items: center;
  position: absolute;
  line-height: 32px;
  content: "\f078";
  font-size: 1rem;
  display: flex;
  margin: auto;
  height: 32px;
  z-index: 10;
  width: 32px;
}

textarea.form-control,
textarea {
  min-height: 9.375rem;
  min-width: 100%;
}

.form-check-input:focus {
  box-shadow: none;
  outline: 0;
}

.form-check-input:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}

.form-section-title {
  border-bottom: 0.05rem solid var(--primaryColor);
  color: var(--darkTextColor);
  justify-content: flex-start;
  align-items: baseline;
  padding-bottom: 0.5rem;
  margin-top: 1.25rem;
  font-weight: 500;
  display: flex;
  gap: 0.5rem;
}

.submit-form {
  all: unset;
  border-radius: var(--borderRadius);
  background-color: var(--textColorL1);
  transition: var(--mainTransition);
  color: var(--whiteColor);
  justify-content: center;
  padding: 0.5rem 1.5rem;
  align-items: center;
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  gap: 0.25rem;
}

.submit-form:hover {
  background-color: #101010;
}

.form-check-input:checked[type="radio"],
.form-check-input:checked[type="checkbox"] {
  background-color: var(--primaryColor);
  border-color: var(--secondColor);
}

.form-check-input[type="radio"],
.form-check-input[type="checkbox"] {
  border-color: var(--borderColor);
  transition: all ease 200ms;
  border-width: 2px;
  box-shadow: none;
  padding: 8px;
}

/*================================ Buttons ==============================*/

.default-button {
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryColor);
  transition: var(--mainTransition);
  box-shadow: var(--boxShadowLg);
  color: var(--lightTextColor);
  border-radius: 0.625rem;
  justify-content: center;
  line-height: normal;
  align-items: center;
  padding: 12px 16px;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  gap: 0.375rem;
}

.default-button.sm {
  padding: 8px 12px;
}

.default-button.lg {
  padding: 1.125rem 2rem;
  font-size: 16px;
}

.default-button i {
  font-size: 18px;
}

.default-button:hover {
  background-color: var(--secondColor);
  box-shadow: var(--boxShadowHover);
  color: var(--lightTextColor);
}

.default-button.dark {
  border-radius: var(--borderRadius);
  background-color: var(--darkBack);
  color: var(--lightTextColor);
  border: none;
}

.default-button.dark:hover {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
}

.default-button.light {
  border: 2px solid var(--primaryColor);
  background-color: transparent;
  color: var(--primaryColor);
  border-radius: 3rem;
}

.default-button.light:hover {
  background-color: var(--primaryColor);
  color: var(--lightTextColor);
}

.default-button .icon-wrapper {
  width: min(2.083vw, 35px);
  height: min(2.083vw, 35px);
  position: relative;
  border-radius: 50%;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
}

.default-button:has(.icon-wrapper) {
  border-radius: var(--borderRadius);
  padding: 8px;
  padding-inline-end: 14px;
  gap: 0.75rem;
}

.default-button .icon-wrapper .icon-svg,
.default-button .icon-wrapper .icon-svg-copy {
  transition: var(--mainTransition);
  height: min(1.042vw, 18px);
  width: min(1.042vw, 18px);
  position: absolute;
}

.default-button .icon-wrapper .icon-svg {
  transform: translate(0, 0);
}

.default-button .icon-wrapper .icon-svg-copy {
  transform: translate(150%, 150%);
}

.default-button:hover .icon-wrapper .icon-svg {
  transform: translate(-150%, -150%);
}

.default-button:hover .icon-wrapper .icon-svg-copy {
  transform: translate(0, 0);
}

.default-button.dark .icon-wrapper {
  background: var(--whiteColor);
  color: var(--darkBack);
}

.default-button.light .icon-wrapper {
  background: var(--primaryColor);
  color: var(--whiteColor);
}

.default-button.light:hover .icon-wrapper {
  background: var(--whiteColor);
}

.default-button.dark .icon-wrapper svg,
.default-button.light .icon-wrapper svg {
  fill: currentColor;
}

.default-button.dark .icon-wrapper svg path {
  stroke: var(--darkBack);
}

.default-button.dark .icon-wrapper .icon-svg-copy path {
  stroke: var(--secondColor);
}

.default-button.light .icon-wrapper svg path {
  stroke: var(--whiteColor);
}

.default-button.light:hover .icon-wrapper svg path {
  stroke: var(--primaryColor);
}

/*================================ Slider ==============================*/

.carousel-section {
  position: relative;
  padding: 0 2rem;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

.swiper-button-next,
.swiper-button-prev {
  transition: var(--mainTransition);
  color: var(--textColorL1);
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  display: flex;
  width: 20px;
}

.light-arrow .swiper-button-next,
.light-arrow .swiper-button-prev {
  color: var(--lightTextColor);
  font-size: 1.25rem;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: var(--primaryColor);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.25rem;
  font-weight: 300;
}

.carousel-section:has(.swiper-pagination-bullet) {
  padding-bottom: 2rem;
}

.carousel-section .swiper-pagination-bullet {
  bottom: 0;
}

.swiper-pagination-bullet {
  border: 1px solid var(--grayTextColor);
  background-color: var(--whiteColor);
  transition: var(--mainTransition);
  border-radius: 2rem;
  height: 0.625rem;
  width: 0.625rem;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  width: 2rem;
}

/*================================ Default Section Title Area ==============================*/

.section-heading {
  justify-content: space-between;
  margin-bottom: 1.25rem;
  align-items: stretch;
  flex-wrap: wrap;
  display: flex;
  gap: 1rem;
}

.section-heading-right-side {
  flex-direction: column;
  justify-content: start;
  align-items: start;
  max-width: 500px;
  display: flex;
  gap: 0.75rem;
}

.section-heading:not(.section-heading-left-side) .section-heading-right-side {
  max-width: 100%;
}

.section-heading-left-side {
  justify-content: start;
  align-items: end;
  max-width: 500px;
  display: flex;
}

.section-heading-left-side .default-button {
  border-radius: 3rem;
}

.section-heading-subject {
  color: var(--thirdColor);
  margin-bottom: 0;
  font-weight: 300;
  font-size: 1rem;
}

.section-heading-title {
  font-size: clamp(1.25rem, 2vw, 2rem);
  color: var(--textColorL1);
  align-items: center;
  margin-bottom: 0;
  font-weight: 600;
  display: flex;
}

.section-heading-title span {
  color: var(--primaryColor);
}

.section-heading p {
  color: var(--textColorL3);
  line-height: 1.75;
  font-weight: 300;
  font-size: 1rem;
  margin: 0;
}

.light .section-heading-title,
.light .section-heading-subject,
.light.section-heading p {
  color: var(--lightTextColor);
}

.light .section-heading-subject,
.light.section-heading p {
  opacity: 0.85;
}

/*================================ Card Style ==============================*/

.default-card {
  border-block: 3px solid var(--borderColor);
  background-color: var(--whiteColor);
  border-radius: var(--borderRadiusLg);
  transition: var(--mainTransition);
  box-shadow: var(--boxShadow);
  padding: 1rem;
}

.default-card.sm {
  border-block-width: 2px;
}

.default-card.hover:hover {
  box-shadow: var(--boxShadowHover);
  border-color: var(--primaryColor);
}

/*================================ Breadcrumb ==============================*/

.breadcrumb {
  padding-block: calc(var(--headerHeight) + 4rem) 4rem;
  border-radius: 0 0 3rem 3rem;
  color: var(--textColorL1);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  display: flex;
  z-index: 1;
  margin: 0;
}

.breadcrumb img {
  filter: brightness(75%) contrast(110%);
  position: absolute;
  object-fit: cover;
  margin: auto;
  height: 100%;
  width: 100%;
  z-index: -1;
  display: none;
  inset: 0;
}

.breadcrumb:has(img)::after {
  background-color: #ffffff;
  position: absolute;
  opacity: 0.75;
  margin: auto;
  height: 100%;
  width: 100%;
  z-index: 0;
  inset: 0;
  /* content: ""; */
}

.breadcrumb .breadcrumb-title {
  font-size: clamp(1.25rem, 2vw, 2.5rem);
  color: var(--lightTextColor);
  margin-bottom: 1.25rem;
  position: relative;
  font-weight: bold;
}

.breadcrumb-links {
  box-shadow: 0 0.0625rem 0.5rem 0 rgba(0, 0, 0, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--borderRadius);
  transition: var(--mainTransition);
  backdrop-filter: blur(3px);
  justify-content: center;
  padding: 0.75rem 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  gap: 0.75rem;
  z-index: 1;
}

.breadcrumb-links a {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  padding-inline-end: 0.75rem;
  color: var(--textColorL1);
  margin-inline-end: 18px;
  position: relative;
}

.breadcrumb-links a:hover {
  color: var(--primaryColor);
}

.breadcrumb-links a:after {
  font-family: var(--fontIcons);
  inset-inline-end: -15px;
  position: absolute;
  content: "\f104";
  top: 0;
}

.breadcrumb-links .end-item {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--textColorL1);
  margin: 0;
}

/*================================ Social Medias ==============================*/

.social-medias-list {
  justify-content: center;
  align-items: center;
  list-style: none;
  display: flex;
  gap: 0.625rem;
}

.social-medias-list li {
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-medias-list .social-link {
  transition: var(--mainTransition);
  justify-content: center;
  color: var(--whiteColor);
  border-radius: 3rem;
  align-items: center;
  padding: 0.1875rem;
  aspect-ratio: 1/1;
  font-size: 1rem;
  line-height: 0;
  display: flex;
}

.social-medias-list .social-link:hover {
  background: var(--whiteColor);
  color: var(--primaryColor);
}

/*================================ Pagination ==============================*/
.pagination {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  gap: 0.375rem;
}

.page-link {
  border: 0.0625rem solid var(--textColorL3);
  transition: var(--mainTransition);
  background-color: transparent;
  border-radius: var(--borderRadius);
  color: var(--textColorL3);
  position: relative;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  aspect-ratio: 1/1;
}

.pagination .page-item:first-child a,
.pagination .page-item:last-child a {
  border-radius: var(--borderRadius);
  border-color: var(--primaryColor);
  color: var(--primaryColor);
}

.page-link:hover,
.page-item.active .page-link,
.page-item.ellipsis .page-link {
  border: 0.0625rem solid var(--primaryColor);
  color: var(--lightTextColor) !important;
  background-color: var(--primaryColor);
}

.page-item.disabled .page-link {
  color: var(--grayTextColor) !important;
  background-color: transparent;
}

/*============================ END OF Base Styles ============================*/

/**========================================================================
 *                                 Top Bar (Premium)
 *========================================================================**/
.top-bar {
  background-color: var(--premiumDark);
  color: var(--slate400);
  font-size: 0.85rem;
  font-weight: 300;
  border-bottom: 1px solid rgba(var(--whiteColorRGB), 0.04);
  position: relative;
  z-index: 1001;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
}

.top-bar-start,
.top-bar-end {
  display: flex;
  align-items: center;
}

.top-bar-item {
  display: flex;
  align-items: center;
  padding-inline: 1.25rem;
  position: relative;
}

.top-bar-item:first-child {
  padding-inline-start: 0;
}

.top-bar-item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background-color: rgba(var(--whiteColorRGB), 0.1);
}

.top-bar i {
  color: var(--slate300);
  font-size: 0.95rem;
  margin-inline-end: 0.5rem;
}

/* Ticker Styles */
.news-ticker-box {
  background: linear-gradient(90deg, rgba(var(--whiteColorRGB), 0.03) 0%, transparent 100%);
  border-radius: 2rem;
  padding-block: 0.2rem;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--primaryColor);
  border-radius: 50%;
  margin-inline-end: 0.5rem;
  box-shadow: 0 0 0 0 rgba(var(--primaryColorRGB), 0.7);
  animation: premiumPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes premiumPulse {
  to {
    box-shadow: 0 0 0 10px rgba(var(--primaryColorRGB), 0);
  }
}

.ticker-label {
  color: var(--slate400);
  margin-inline-end: 0.5rem;
}

.typing-text {
  font-weight: 500;
  color: var(--slate50);
  letter-spacing: 0.3px;
}

.cursor {
  animation: blink 1s infinite;
  color: var(--primaryColor);
  margin-inline-start: 2px;
  font-weight: bold;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Socials & Login */
.top-socials {
  display: flex;
  gap: 1.25rem;
  padding-inline-end: 1.5rem;
  border-inline-end: 1px solid rgba(var(--whiteColorRGB), 0.1);
}

.top-socials a {
  color: var(--slate500);
  transition: var(--smoothTransition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-socials a:hover {
  color: var(--whiteColor);
  transform: translateY(-2px) scale(1.1);
}

.login-btn {
  color: var(--slate200);
  font-weight: 500;
  transition: var(--mainTransition);
  display: flex;
  align-items: center;
  padding-inline-start: 1.5rem;
}

.login-btn i {
  color: var(--primaryColor);
}

.login-btn:hover {
  color: var(--primaryColor);
}

/**========================================================================
 *                                 Main Header
 *========================================================================**/
.main-header {
  background-color: rgba(var(--whiteColorRGB), 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--slate100);
  transition: var(--smoothTransition);
}

.main-header.is-sticky {
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.08);
  border-bottom-color: transparent;
  background-color: rgba(var(--whiteColorRGB), 0.95);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--headerHeight);
  transition: height 0.4s ease;
}

.main-header.is-sticky .header-content {
  height: 65px;
}

.header-logo-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-logo img {
  max-width: 145px;
  width: 100%;
  height: auto;
  display: block;
  transition: var(--mainTransition);
}

.main-header.is-sticky .header-logo img {
  transform: scale(0.9);
}

/*================================ Navigation ==============================*/
.main-navigation {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  height: 100%;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Focus Effect */
.nav-list:hover .nav-item:not(:hover) .nav-link {
  opacity: 0.5;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link {
  padding: 0;
  color: var(--slate800);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--mainTransition);
  position: relative;
  height: 100%;
}

.dropdown-icon {
  font-size: 0.65rem;
  color: var(--slate400);
  transition: var(--smoothTransition);
}

/* Animated Underline */
.nav-link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 20px;
  height: 2px;
  background-color: var(--primaryColor);
  transform: scaleX(0);
  transform-origin: right;
  transition: var(--smoothTransition);
  border-radius: 2px;
}

.main-header.is-sticky .nav-link::after {
  bottom: 14px;
}

.nav-item:hover .nav-link {
  color: var(--primaryColor);
}

.nav-item:hover .nav-link::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link.active {
  color: var(--primaryColor);
}

.menu-dropdown-open:hover .dropdown-icon {
  transform: rotate(180deg);
  color: var(--primaryColor);
}

/*================================ Dropdown Menu ==============================*/
.menu-dropdown-list {
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  transform: translateX(50%) translateY(15px);
  background-color: var(--whiteColor);
  min-width: 220px;
  border-radius: 0.75rem;
  box-shadow: var(--premiumShadow);
  opacity: 0;
  visibility: hidden;
  transition: var(--smoothTransition);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  z-index: 1010;
}

/* Invisible Bridge */
.menu-dropdown-open::before {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline-start: -20px;
  inset-inline-end: -20px;
  height: 25px;
  z-index: 1009;
}

/* Caret */
.menu-dropdown-list::before {
  content: '';
  position: absolute;
  top: -6px;
  inset-inline-start: 50%;
  transform: translateX(50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background-color: var(--whiteColor);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  border-left: 1px solid rgba(15, 23, 42, 0.05);
}

.menu-dropdown-open:hover .menu-dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0);
}

.dropdown-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: var(--slate600);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--mainTransition);
  position: relative;
  overflow: hidden;
}

.dropdown-link::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--primaryColor);
  transform: scaleY(0);
  transition: var(--mainTransition);
  transform-origin: center;
}

.dropdown-link:hover {
  color: var(--primaryColor);
  background-color: var(--slate50);
  padding-inline-start: 1.8rem;
}

.dropdown-link:hover::before {
  transform: scaleY(1);
}

/*================================ Actions ==============================*/
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search-trigger {
  all: unset;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--slate200);
  color: var(--slate500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.search-trigger i {
  font-size: 1.1rem;
  transition: var(--mainTransition);
}

.search-trigger:hover {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: var(--premiumGlow);
}

.search-trigger:hover i {
  transform: scale(1.1);
}

.hamburger-menu {
  all: unset;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger-menu .line {
  width: 100%;
  height: 2px;
  background-color: var(--slate800);
  transition: var(--mainTransition);
  border-radius: 2px;
}

.hamburger-menu:hover .line {
  background-color: var(--primaryColor);
}

.hamburger-menu:hover .mid-line {
  width: 70%;
}

/**========================================================================
 *                           Main Styles
 *========================================================================**/

main {
  flex-direction: column;
  display: flex;
}

/**========================================================================
 *                           Hero News & Media Section
 *========================================================================**/

/*================================ Base Hero Elements ==============================*/
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--whiteColor);
  z-index: 2;
  letter-spacing: 0.3px;
}

.glass-badge {
  background: rgba(var(--whiteColorRGB), 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dark-badge {
  background: rgba(var(--slate900RGB), 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.1);
}

.live-badge {
  background: var(--primaryColor);
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 15px rgba(var(--primaryColorRGB), 0.4);
}

.color-danger {
  color: #ff5252;
}

.color-warning {
  color: #ffd740;
}

.blinking-dot {
  animation: blinkDot 1.5s infinite;
  font-size: 0.6rem;
}

@keyframes blinkDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/*================================ Main News Slider ==============================*/
.hero-news-slider {
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  height: 100%;
  min-height: 520px;
  box-shadow: var(--boxShadow);
  background-color: var(--premiumDark);
}

.hero-news-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 3rem);
  text-decoration: none;
}

.hero-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 50%, transparent 100%);
  z-index: 1;
  transition: var(--smoothTransition);
}

.hero-news-card:hover .hero-bg-img {
  transform: scale(1.05);
}

.hero-news-card:hover .hero-card-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.98) 0%, rgba(var(--premiumDarkRGB), 0.6) 50%, rgba(var(--premiumDarkRGB), 0.2) 100%);
}

.hero-news-top {
  display: flex;
  justify-content: flex-end;
  z-index: 2;
}

.hero-news-content {
  position: relative;
  z-index: 2;
  transform: translateY(0);
  transition: var(--smoothTransition);
}

.hero-news-card:hover .hero-news-content {
  transform: translateY(-5px);
}

.hero-news-title {
  color: var(--whiteColor);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 1rem;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.hero-news-excerpt {
  color: rgba(var(--whiteColorRGB), 0.85);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(var(--whiteColorRGB), 0.15);
  padding-top: 1.5rem;
}

.hero-news-meta {
  display: flex;
  gap: 1.5rem;
  color: rgba(var(--whiteColorRGB), 0.7);
  font-size: 0.95rem;
}

.hero-news-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-btn-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--whiteColorRGB), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.25rem;
  transition: var(--smoothTransition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.2);
}

.hero-news-card:hover .hero-btn-circle {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  transform: translateX(-8px);
  box-shadow: var(--premiumGlow);
}

/* Slider Pagination overriding Swiper defaults */
.hero-news-pagination {
  position: absolute;
  inset-inline-end: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 3vw, 3rem) !important;
  z-index: 10;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.hero-news-pagination .swiper-pagination-bullet {
  background: rgba(var(--whiteColorRGB), 0.4);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transition: var(--smoothTransition);
  margin: 0 !important;
}

.hero-news-pagination .swiper-pagination-bullet-active {
  background: var(--primaryColor);
  width: 24px;
  box-shadow: 0 0 10px rgba(var(--primaryColorRGB), 0.5);
}

/*================================ VOD Card ==============================*/


.hero-vod-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 260px;
  aspect-ratio: 16/9;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  padding: 1.5rem;
  box-shadow: var(--boxShadow);
  background-color: var(--premiumDark);
}

.hero-vod-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.9) 0%, rgba(var(--premiumDarkRGB), 0.3) 50%, rgba(var(--premiumDarkRGB), 0.4) 100%);
  z-index: 1;
  transition: var(--smoothTransition);
}

.hero-vod-card:hover .hero-vod-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 50%, rgba(var(--premiumDarkRGB), 0.6) 100%);
}

.hero-vod-card:hover .hero-bg-img {
  transform: scale(1.05);
}

.hero-vod-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.hero-vod-play {
  width: 60px;
  height: 60px;
  margin-inline: auto;
  background: rgba(var(--whiteColorRGB), 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.5rem;
  padding-inline-start: 4px;
  z-index: 2;
  transition: var(--smoothTransition);
}

.play-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--whiteColorRGB), 0.6);
  animation: playPulse 2s infinite;
  z-index: -1;
}

@keyframes playPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.hero-vod-card:hover .hero-vod-play {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

.hero-vod-card:hover .play-pulse-ring {
  border-color: var(--primaryColor);
}

.hero-vod-content {
  position: relative;
  z-index: 2;
}

.hero-vod-title {
  color: var(--whiteColor);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-vod-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hero-vod-progress {
  width: 100%;
  height: 4px;
  background: rgba(var(--whiteColorRGB), 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.hero-vod-progress .progress-bar {
  height: 100%;
  background: #10b981;
  /* Success Green */
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.hero-vod-stats {
  display: flex;
  justify-content: space-between;
  color: rgba(var(--whiteColorRGB), 0.8);
  font-size: 0.85rem;
}

.hero-vod-stats span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/*================================ Kiosk Cards (3D Engine & Actions) ==============================*/
.kiosk-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--borderRadiusLg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: var(--smoothTransition);
  box-shadow: var(--boxShadow);
}

.bg-kiosk-daily {
  background: linear-gradient(145deg, var(--slate900) 0%, var(--premiumDark) 100%);
  border: 1px solid rgba(var(--whiteColorRGB), 0.05);
}

.bg-kiosk-monthly {
  background: linear-gradient(145deg, var(--whiteColor) 0%, var(--slate50) 100%);
  border: 1px solid var(--slate200);
}

.bg-kiosk-daily .kiosk-label,
.bg-kiosk-daily .kiosk-issue {
  color: var(--whiteColor);
}

.bg-kiosk-daily .kiosk-date {
  color: var(--slate400);
}

.bg-kiosk-monthly .kiosk-label,
.bg-kiosk-monthly .kiosk-issue {
  color: var(--slate800);
}

.bg-kiosk-monthly .kiosk-date {
  color: var(--slate500);
}

.kiosk-header {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.kiosk-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.9;
}

.kiosk-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

/* 3D Perspective CSS Engine */
.kiosk-3d-wrapper {
  perspective: 1200px;
  width: clamp(95px, 75%, 160px);
  margin-bottom: 1.5rem;
  position: relative;
  transform-style: preserve-3d;
}

.kiosk-cover-img {
  width: 100%;
  border-radius: 2px;
  aspect-ratio: 3/4;
  object-fit: cover;
  transform: rotateY(-20deg) rotateX(5deg);
  box-shadow: -12px 15px 20px rgba(0, 0, 0, 0.4);
  transition: var(--smoothTransition);
  position: relative;
  z-index: 2;
}

.bg-kiosk-monthly .kiosk-cover-img {
  box-shadow: -10px 15px 25px rgba(15, 23, 42, 0.15);
}

.kiosk-card:hover .kiosk-cover-img {
  transform: rotateY(0deg) rotateX(0deg) scale(1.08);
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.25);
}

.kiosk-info {
  margin-bottom: 1rem;
}

.kiosk-issue {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.kiosk-date {
  font-size: 0.85rem;
}

/* Kiosk Action Group (Split Buttons) */
.kiosk-action-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.kiosk-btn-view {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--smoothTransition);
  text-decoration: none;
}

.kiosk-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  transition: var(--smoothTransition);
  text-decoration: none;
  flex-shrink: 0;
}

/* Dark Theme Buttons */
.bg-kiosk-daily .kiosk-btn-view,
.bg-kiosk-daily .kiosk-btn-icon {
  background: rgba(var(--whiteColorRGB), 0.08);
  border: 1px solid rgba(var(--whiteColorRGB), 0.15);
  color: var(--whiteColor);
}

.bg-kiosk-daily .kiosk-btn-view:hover,
.bg-kiosk-daily .kiosk-btn-icon:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  transform: translateY(-2px);
  box-shadow: var(--premiumGlow);
}

/* Light Theme Buttons */
.kiosk-btn-view,
.kiosk-btn-icon {
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  color: var(--slate800);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.kiosk-btn-view:hover,
.kiosk-btn-icon:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  transform: translateY(-2px);
  box-shadow: var(--premiumGlow);
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 1199px) {
  .hero-news-slider {
    min-height: 480px;
  }

  .hero-right-top,
  .hero-right-bottom {
    height: auto;
  }
}

@media (max-width: 767px) {
  .hero-news-card {
    padding: 1.5rem;
  }

  .hero-news-title {
    font-size: 1.25rem;
  }

  .hero-news-excerpt {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-news-pagination {
    inset-inline-end: 1.5rem;
    bottom: 1.5rem !important;
  }
}


/**========================================================================
 *                           Smart Ad Banner System
 *========================================================================**/

.ad-section {
  position: relative;
}

/*================================ Client Preview Controls ==============================*/
.ad-preview-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-block-end: 1rem;
}

.preview-label {
  font-size: 0.85rem;
  color: var(--slate400);
  font-weight: 500;
}

.preview-toggles {
  display: flex;
  background: var(--slate100);
  border-radius: 2rem;
  padding: 0.25rem;
  border: 1px solid var(--slate200);
}

.preview-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate500);
  cursor: pointer;
  transition: var(--smoothTransition);
}

.preview-btn:hover {
  color: var(--slate800);
}

.preview-btn.active {
  background: var(--whiteColor);
  color: var(--primaryColor);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/*================================ Ad Grid Engine ==============================*/
.ad-grid {
  display: grid;
  gap: 1.5rem;
  transition: var(--smoothTransition);
}

/* Layout State 1: Single Full Width */
.ad-grid[data-ad-layout="1"] {
  grid-template-columns: 1fr;
}

.ad-grid[data-ad-layout="1"] .ad-card:nth-child(n+2) {
  display: none;
}

.ad-grid[data-ad-layout="1"] .ad-card {
  aspect-ratio: 21 / 5;
  /* Panoramic aspect ratio */
}

/* Layout State 2: Two Columns */
.ad-grid[data-ad-layout="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.ad-grid[data-ad-layout="2"] .ad-card:nth-child(n+3) {
  display: none;
}

.ad-grid[data-ad-layout="2"] .ad-card {
  aspect-ratio: 16 / 5;
}

/* Layout State 3: Three Columns */
.ad-grid[data-ad-layout="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.ad-grid[data-ad-layout="3"] .ad-card {
  aspect-ratio: 16 / 9;
}

/*================================ Ad Card Design ==============================*/
.ad-card {
  position: relative;
  display: block;
  width: 100%;
  height: 240px;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  background-color: var(--grayBack);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
  transition: var(--smoothTransition);
  border: 1px solid var(--slate200);
}

.ad-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ad-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.03);
  transition: var(--smoothTransition);
  z-index: 1;
}

.ad-badge {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--slate500);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: var(--smoothTransition);
}

/* Hover Effects */
.ad-card:hover {
  box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.1);
  border-color: var(--primaryColor);
}



.ad-card:hover .ad-overlay {
  background: rgba(15, 23, 42, 0);
}

.ad-card:hover .ad-badge {
  background: var(--primaryColor);
  color: var(--whiteColor);
  border-color: var(--primaryColor);
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 991px) {

  /* Force 2 columns on tablets if layout is 3 */
  .ad-grid[data-ad-layout="3"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .ad-grid[data-ad-layout="3"] .ad-card:nth-child(3) {
    display: none;
    /* Hide 3rd ad on tablet to keep symmetry */
  }
}

@media (max-width: 767px) {

  /* Force 1 column on mobile regardless of layout */
  .ad-grid[data-ad-layout="2"],
  .ad-grid[data-ad-layout="3"] {
    grid-template-columns: 1fr;
  }

  .ad-grid[data-ad-layout="2"] .ad-card:nth-child(n+2),
  .ad-grid[data-ad-layout="3"] .ad-card:nth-child(n+2) {
    display: none;
  }

  .ad-preview-controls {
    display: none;
    /* Hide controls on mobile */
  }

  .ad-card {
    aspect-ratio: 16 / 7 !important;
  }
}

/**========================================================================
 *                           Main Content Area (70%) - Premium Editorial
 *========================================================================**/

.main-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* Base Card Enhancement */
.premium-section-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--slate100);
  border-radius: var(--borderRadiusLg);
  background-color: var(--whiteColor);
  box-shadow: var(--boxShadow);
  transition: var(--smoothTransition);
}

.premium-section-card:hover {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border-color: var(--slate200);
}

/*================================ Section Headers ==============================*/
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-block-end: 2px solid var(--slate100);
  padding-block-end: 1rem;
  margin-block-end: 1.5rem;
}

.section-title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 800;
  color: var(--slate900);
  margin: 0;
  position: relative;
  letter-spacing: -0.5px;
}

.section-title::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -18px;
  width: 40px;
  height: 4px;
  background-color: var(--primaryColor);
  border-radius: 2px;
}

.view-all {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate500);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--mainTransition);
}

.view-all:hover {
  color: var(--primaryColor);
  transform: translateX(-4px);
}

/*================================ Shared Card Elements ==============================*/
.card-link-wrapper {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
  color: inherit;
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--borderRadius);
  background-color: var(--slate100);
  width: 100%;
  flex-shrink: 0;
}

.card-img-wrapper img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.category-badge {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.3);
}

.category-badge.dark-badge {
  background: var(--slate800);
  box-shadow: 0 4px 10px rgba(var(--premiumDarkRGB), 0.3);
}

.category-badge.dark {
  position: absolute;
  background: var(--slate800);
  box-shadow: 0 4px 10px rgba(var(--premiumDarkRGB), 0.2);
}

.category-text {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.4rem;
  display: block;
}

/* Fluid Typography for Titles to prevent mobile overflow */
.card-title {
  color: var(--slate800);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.5;
  transition: var(--mainTransition);
  margin-block-end: 0.75rem;
  margin-block-start: 1rem;
}

.card-excerpt {
  color: var(--slate500);
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  line-height: 1.8;
  margin-block-end: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  font-size: 0.75rem;
  color: var(--slate400);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: auto;
}

.card-meta time,
.card-meta .author {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Global Hover Effects */

article:hover .card-title,
article:hover .mini-title {
  color: var(--primaryColor);
}

/*================================ Block 1: Bento Grid ==============================*/
.bento-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.bento-card-main .card-img-wrapper {
  aspect-ratio: 16/9;
  margin-block-end: 1rem;
  border-radius: var(--borderRadiusLg);
}

.card-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.5) 0%, transparent 40%);
  opacity: 0;
  transition: var(--smoothTransition);
  z-index: 1;
}

.bento-card-main:hover .card-overlay-gradient {
  opacity: 1;
}

.bento-card-main .card-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
}

/* Bento Side List */
.bento-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: space-between;
}

.mini-news-card .card-link-wrapper {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.mini-img-wrapper {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: var(--borderRadius);
  overflow: hidden;
  background: var(--slate100);
}

.mini-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--smoothTransition);
}

.mini-news-card:hover .mini-img-wrapper img {
  transform: scale(1.1);
}

.mini-content {
  flex-grow: 1;
}

.mini-title {
  color: var(--slate800);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  transition: var(--mainTransition);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*================================ Block 2: Cinematic ==============================*/
.cinematic-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cinematic-hero {
  position: relative;
  display: block;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
}

.cinematic-hero .card-img-wrapper {
  aspect-ratio: 21/9;
  border-radius: 0;
}

.cinematic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, transparent 80%);
  z-index: 1;
  transition: var(--smoothTransition);
}

.cinematic-hero:hover .cinematic-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.98) 0%, rgba(var(--premiumDarkRGB), 0.3) 100%);
}

.hero-content {
  position: absolute;
  bottom: 1.5rem;
  inset-inline: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title {
  color: var(--whiteColor);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 800;
  margin: 0;
  margin-block-start: 0.75rem;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  line-height: 1.4;
}

/* 3 Columns Grid */
.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ratio-16-9 {
  aspect-ratio: 16/9;
}

.vertical-card .card-title {
  margin-block-start: 0.75rem;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
}

.column-category {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-start: 0.75rem;
  margin-block-end: 0.4rem;
  display: block;
}

/*================================ Block 3: Horizontal ==============================*/
.horizontal-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.horizontal-card .card-link-wrapper {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  background: var(--slate50);
  padding: 1rem;
  border-radius: var(--borderRadiusLg);
  border: 1px solid transparent;
  transition: var(--smoothTransition);
}

.horizontal-card:hover .card-link-wrapper {
  background: var(--whiteColor);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  border-color: var(--slate200);
  transform: translateY(-2px);
}

.horizontal-card .card-img-wrapper {
  width: 240px;
  aspect-ratio: 16/9;
}

.horizontal-card .card-content {
  justify-content: center;
  margin-block-start: 0;
}

.horizontal-card .card-title {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  margin-block-start: 0;
}

/*================================ Block 4: Masonry (Art) ==============================*/
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.masonry-item.tall {
  grid-row: span 2;
}

.masonry-item.tall .portrait {
  aspect-ratio: 3/4;
}

.masonry-item:not(.tall) .card-img-wrapper {
  aspect-ratio: 16/9;
}

/*================================ Block 5: Editorial (Culture) ==============================*/
.drop-cap-article {
  display: block;
  text-decoration: none;
}

.article-title {
  color: var(--slate800);
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.5;
  margin-block-end: 1rem;
  transition: var(--mainTransition);
}

.drop-cap-article:hover .article-title {
  color: var(--primaryColor);
}

.article-excerpt {
  color: var(--slate600);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.9;
  text-align: justify;
}


.thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.thumbnail-list-item .card-link-wrapper {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.thumb-img-wrapper {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--borderRadius);
  overflow: hidden;
  position: relative;
}

.thumb-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--smoothTransition);
}

.thumbnail-list-item:hover .thumb-img-wrapper img {
  transform: scale(1.1);
}

.list-title {
  color: var(--slate700);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 0.95rem);
  line-height: 1.5;
  margin: 0;
  transition: var(--mainTransition);
}

.thumbnail-list-item:hover .list-title {
  color: var(--primaryColor);
}

/*================================ Native Inserts (Ads/Promos) ==============================*/
.native-insert {
  display: block;
  border-radius: var(--borderRadiusLg);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  text-decoration: none;
  transition: var(--smoothTransition);
}

.insert-link-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.5rem);
  text-decoration: none;
  color: inherit;
}

/* TV Insert */
.tv-insert {
  background: linear-gradient(90deg, var(--whiteColor) 0%, var(--slate50) 100%);
  border: 1px solid var(--slate200);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
}

.insert-visual {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.insert-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primaryColor);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  position: relative;
  z-index: 2;
  padding-inline-start: 4px;
}

.insert-content {
  flex-grow: 1;
}

.insert-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--slate500);
  margin-block-end: 0.25rem;
  display: block;
}

.insert-title {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800;
  color: var(--slate800);
  margin: 0;
  transition: var(--mainTransition);
  line-height: 1.5;
}

.tv-insert .insert-action {
  color: var(--slate400);
  font-size: 1.25rem;
  transition: var(--mainTransition);
}

.tv-insert:hover {
  border-color: var(--primaryColor);
  box-shadow: 0 10px 30px -5px rgba(237, 28, 36, 0.1);
  transform: translateY(-2px);
}

.tv-insert:hover .insert-action {
  color: var(--primaryColor);
  transform: translateX(-5px);
}

/* Newspaper Insert */
.newspaper-insert {
  background: var(--premiumDark);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.5);
}

.quote-mark-bg {
  position: absolute;
  inset-inline-end: 1rem;
  top: -1.5rem;
  font-size: 8rem;
  color: rgba(var(--whiteColorRGB), 0.03);
  z-index: 0;
  pointer-events: none;
}

.newspaper-insert .insert-label {
  color: var(--slate400);
}

.newspaper-insert .insert-title {
  color: var(--whiteColor);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.6;
  margin-block-end: 1.25rem;
  position: relative;
  z-index: 1;
}

.read-article-btn {
  display: inline-flex;
  align-items: center;
  color: var(--primaryColor);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--primaryColor);
  padding-bottom: 2px;
  position: relative;
  z-index: 1;
  transition: var(--mainTransition);
}

.read-article-btn:hover {
  color: var(--whiteColor);
  border-color: var(--whiteColor);
}

.newspaper-mockup {
  width: 100px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transform: rotate(5deg);
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.5);
  transition: var(--smoothTransition);
  display: block;
  /* Ensure visibility */
}

.newspaper-mockup img {
  width: 100%;
  border-radius: 2px;
}

/* Fix Hover Bug on Newspaper */
.newspaper-insert:hover .newspaper-mockup {
  transform: rotate(0) scale(1.05);
}

/* Magazine Insert */
.magazine-insert {
  background: linear-gradient(135deg, var(--slate900) 0%, var(--slate800) 100%);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.3);
}

.magazine-cover {
  width: 80px;
  flex-shrink: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transform: rotate(-5deg);
  transition: var(--smoothTransition);
  position: relative;
}

.magazine-cover img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.cover-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(var(--whiteColorRGB), 0.2) 25%, transparent 30%);
  z-index: 2;
}

.magazine-insert .insert-label {
  color: var(--slate400);
}

.magazine-insert .insert-title {
  color: var(--whiteColor);
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-weight: 800;
  margin-block-end: 1rem;
}

.magazine-link {
  color: var(--slate300);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--mainTransition);
}

.magazine-insert:hover {
  transform: translateY(-2px);
}

.magazine-insert:hover .magazine-cover {
  transform: rotate(0) scale(1.1);
}

.magazine-insert:hover .magazine-link {
  color: var(--whiteColor);
}

/*================================ Responsive Perfection ==============================*/
@media (max-width: 1199px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-card-main .card-img-wrapper {
    aspect-ratio: 16/9;
  }
}

@media (max-width: 991px) {
  .grid-3-col {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 767px) {
  .cinematic-hero .card-img-wrapper {
    aspect-ratio: 16/9;
  }

  .grid-3-col {
    grid-template-columns: 1fr;
  }

  .horizontal-card .card-link-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .horizontal-card .card-img-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
  }

  .masonry-grid {
    grid-template-columns: 1fr;
  }

  .masonry-item.tall .portrait {
    aspect-ratio: 16/9;
  }

  .newspaper-insert {
    flex-direction: column;
    align-items: flex-start;
  }

  .newspaper-mockup {
    display: none;
    /* Hide on very small screens to save space */
  }
}

/*================================ Photo & Graphics Gallery ==============================*/
.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--borderRadius);
  overflow: hidden;
  background: var(--premiumDark);
}

/* Grid Spans */
.gallery-item.large {
  grid-column: span 3;
  aspect-ratio: 16/9;
}

.gallery-item.small {
  grid-column: span 2;
  aspect-ratio: 4/3;
}

.gallery-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Cinematic Dark Gradient for Text Readability */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 40%, rgba(var(--premiumDarkRGB), 0.1) 100%);
  transition: var(--smoothTransition);
  z-index: 1;
}

/* Top Badges (Icon & Count) */
.gallery-badges {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}

.gallery-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(var(--premiumDarkRGB), 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.2);
  color: var(--whiteColor);
  border-radius: 6px;
  font-size: 1rem;
  transition: var(--smoothTransition);
}

.photo-count-badge {
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.3);
}

/* Bottom Content */
.gallery-content {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 1.5rem;
  z-index: 2;
  transform: translateY(10px);
  transition: var(--smoothTransition);
}

.gallery-title {
  color: var(--whiteColor);
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: var(--mainTransition);
}

.gallery-item.large .gallery-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.gallery-item.small .gallery-title {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
}

/* Hover Effects */
.gallery-item:hover .gallery-img {
  transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.98) 0%, rgba(var(--premiumDarkRGB), 0.6) 50%, rgba(var(--premiumDarkRGB), 0.2) 100%);
}

.gallery-item:hover .gallery-content {
  transform: translateY(0);
}

.gallery-item:hover .gallery-title {
  color: var(--primaryColor);
}

.gallery-item:hover .gallery-icon-badge {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

/* Responsive Adjustments for Gallery */
@media (max-width: 991px) {
  .gallery-item.large {
    grid-column: span 6;
    /* Full width on tablet */
    aspect-ratio: 16/9;
  }

  .gallery-item.small {
    grid-column: span 3;
    /* Half width on tablet */
    aspect-ratio: 16/9;
  }
}

@media (max-width: 575px) {
  .photo-gallery-grid {
    display: flex;
    flex-direction: column;
  }

  .gallery-item {
    aspect-ratio: 16/10 !important;
  }
}

/**========================================================================
 *                           Archive Feed Engine
 *========================================================================**/

/*================================ Archive Header ==============================*/
.archive-page-header {
  border-block-end: 2px solid var(--slate100);
  padding-block-end: 1.5rem;
}

.archive-page-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 900;
  color: var(--slate900);
  margin-block-end: 0.5rem;
  letter-spacing: -0.5px;
}

.archive-page-desc {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--slate500);
  line-height: 1.6;
  margin: 0;
}

/*================================ Archive Feed Logic ==============================*/
.archive-feed {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.archive-card {
  background: var(--whiteColor);
  border: 1px solid var(--slate100);
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  transition: var(--smoothTransition);
}

.archive-card:hover {
  box-shadow: 0 12px 35px -10px rgba(15, 23, 42, 0.08);
  border-color: var(--slate200);
  transform: translateY(-3px);
}

.card-link-wrapper {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
  color: inherit;
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
  background-color: var(--slate100);
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.archive-card:hover .card-img-wrapper img {
  transform: scale(1.05);
}

.category-badge {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.85rem;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.3);
}

.category-text {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.5rem;
  display: block;
}

/*================================ 1. Featured Slider (Swiper) ==============================*/
.archive-featured-slider {
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  background: var(--whiteColor);
  box-shadow: var(--boxShadow);
  border: 1px solid var(--slate100);
  padding-block-end: 1rem;
  /* Space for pagination */
}

.featured-archive {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.featured-archive:hover {
  box-shadow: none;
  border-color: transparent;
  transform: none;
}

.featured-archive .card-link-wrapper {
  gap: 1.5rem;
}

.featured-archive .card-img-wrapper {
  aspect-ratio: 21/9;
  border-radius: var(--borderRadiusLg) var(--borderRadiusLg) 0 0;
}

.featured-archive .card-content {
  padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-end: 1.5rem;
}

.featured-archive .card-title {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  color: var(--slate900);
  line-height: 1.5;
  margin-block-end: 1rem;
  transition: var(--mainTransition);
}

.featured-archive:hover .card-title {
  color: var(--primaryColor);
}

.featured-archive .card-excerpt {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--slate600);
  line-height: 1.9;
  margin-block-end: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-archive .card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--slate500);
}

.author-avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--slate100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.author-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.author-name {
  font-weight: 700;
  color: var(--slate800);
}

.meta-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--slate300);
}

/* Slider Pagination */
.archive-slider-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-block-start: 1rem;
}

.archive-slider-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--slate300);
  opacity: 1;
  transition: var(--smoothTransition);
  border-radius: 4px;
  margin: 0 !important;
}

.archive-slider-pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--primaryColor);
  box-shadow: 0 0 10px rgba(var(--primaryColorRGB), 0.4);
}

/*================================ 2. Standard Horizontal Card ==============================*/
.standard-horizontal .card-link-wrapper {
  flex-direction: row;
  align-items: stretch;
}

.standard-horizontal .card-img-wrapper {
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 16/9;
  border-radius: 0;
  flex-shrink: 0;
}

.standard-horizontal .card-content {
  padding: clamp(1.25rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.standard-horizontal .card-title {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 800;
  color: var(--slate800);
  line-height: 1.5;
  margin-block-end: 0.75rem;
  transition: var(--mainTransition);
}

.standard-horizontal:hover .card-title {
  color: var(--primaryColor);
}

.standard-horizontal .card-excerpt {
  color: var(--slate500);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-block-end: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.standard-horizontal .card-meta {
  font-size: 0.8rem;
  color: var(--slate400);
  margin-block-start: auto;
}

/*================================ 3. Highlight Break Card ==============================*/
.highlight-break {
  position: relative;
  border: none;
  border-radius: var(--borderRadiusLg);
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.2);
}

.highlight-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.highlight-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--slate800RGB), 0.8) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.highlight-break .card-content {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.quote-icon {
  font-size: 2.5rem;
  color: var(--primaryColor);
  margin-block-end: 1.25rem;
}

.highlight-break .card-title {
  color: var(--whiteColor);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  line-height: 1.6;
  margin-block-end: 2rem;
}

.highlight-break:hover .card-title {
  color: var(--whiteColor);
}

.highlight-break .read-article-btn {
  color: var(--whiteColor);
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 2px solid rgba(var(--whiteColorRGB), 0.3);
  padding-bottom: 4px;
  transition: var(--mainTransition);
}

.highlight-break:hover .read-article-btn {
  border-bottom-color: var(--whiteColor);
}

/*================================ Custom Uniform Pagination ==============================*/
/* This completely bypasses Bootstrap's broken border-radius issues */
.saba-pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.saba-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.saba-page-item {
  display: flex;
}

.saba-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50% !important;
  /* Forces perfect circle unconditionally */
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  color: var(--slate600);
  font-weight: 700;
  font-size: 1rem;
  transition: var(--smoothTransition);
  text-decoration: none;
  box-shadow: none;
}

.saba-page-item:not(.disabled):not(.dots) .saba-page-link:hover {
  background: var(--slate50);
  border-color: var(--slate300);
  color: var(--slate900);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.saba-page-item.active .saba-page-link {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: 0 6px 15px rgba(var(--primaryColorRGB), 0.3);
}

.saba-page-item.disabled .saba-page-link {
  background: transparent;
  border-color: transparent;
  color: var(--slate300);
  cursor: not-allowed;
}

.saba-page-item.dots .saba-page-link {
  background: transparent;
  border-color: transparent;
  color: var(--slate400);
  pointer-events: none;
}

/*================================ Responsive Perfection ==============================*/
@media (max-width: 991px) {
  .featured-archive .card-img-wrapper {
    aspect-ratio: 16/9;
  }
}

@media (max-width: 767px) {
  .standard-horizontal .card-link-wrapper {
    flex-direction: column;
  }

  .standard-horizontal .card-img-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
  }

  .saba-page-link {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
}

/**========================================================================
 *                           Premium Sidebar Styles
 *========================================================================**/

.premium-sidebar {
  position: sticky;
  top: 100px;
  /* Accounts for sticky header height */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/*================================ Base Widget Styles ==============================*/
.sidebar-widget {
  background-color: var(--whiteColor);
  border-radius: var(--borderRadiusLg);
  padding: 1.5rem;
  box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.05);
  border: 1px solid var(--slate100);
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--slate100);
}

.widget-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--slate800);
  margin: 0;
  position: relative;
}

.widget-title::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -17px;
  width: 30px;
  height: 3px;
  background-color: var(--primaryColor);
  border-radius: 2px;
}

/*================================ Live Timeline Widget ==============================*/
.live-indicator {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primaryColor);
  background: rgba(var(--primaryColorRGB), 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.live-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primaryColor);
  animation: premiumPulse 2s infinite;
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.timeline-expandable::before,
.timeline-list::before {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  /* Logical line position */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--slate100);
}

.timeline-item {
  position: relative;
  padding-inline-start: 1.5rem;
  padding-block-end: 1.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 1px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--slate200);
  border: 2px solid var(--whiteColor);
  transition: var(--smoothTransition);
}

.timeline-item.is-latest::before {
  background-color: var(--primaryColor);
  box-shadow: 0 0 0 3px rgba(var(--primaryColorRGB), 0.2);
}

.timeline-item:last-child {
  padding-block-end: 0;
}

.time-badge {
  display: block;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--slate400);
  margin-block-end: 0.4rem;
}

.timeline-link {
  color: var(--slate700);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  transition: var(--mainTransition);
}

.timeline-link:hover {
  color: var(--primaryColor);
}

/*================================ Premium Ad Widget ==============================*/
.ad-widget {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.ad-container {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  border-radius: var(--borderRadiusLg);
  box-shadow: var(--boxShadow);
  overflow: hidden;
  border: 1px solid var(--borderColor);
}

.ad-badge-small {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  background: rgba(var(--whiteColorRGB), 0.9);
  backdrop-filter: blur(4px);
  color: var(--slate500);
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  z-index: 2;
}

.ad-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: var(--smoothTransition);
}

.ad-container:hover {
  border-color: var(--primaryColor);
}

/*================================ Interactive Poll Widget ==============================*/
.poll-question {
  font-size: 0.95rem;
  color: var(--slate800);
  font-weight: 600;
  line-height: 1.7;
  margin-block-end: 1.25rem;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-end: 1.5rem;
}

.custom-radio {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  background-color: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: var(--smoothTransition);
  position: relative;
}

.custom-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-mark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--slate300);
  border-radius: 50%;
  margin-inline-end: 1rem;
  position: relative;
  transition: var(--mainTransition);
  flex-shrink: 0;
}

.custom-radio input[type="radio"]:checked~.radio-mark {
  border-color: var(--primaryColor);
}

.custom-radio input[type="radio"]:checked~.radio-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background-color: var(--primaryColor);
  border-radius: 50%;
}

.radio-label {
  font-size: 0.9rem;
  color: var(--slate600);
  font-weight: 500;
  transition: var(--mainTransition);
}

.custom-radio:hover {
  border-color: var(--primaryColor);
  background-color: rgba(var(--primaryColorRGB), 0.02);
}

.custom-radio input[type="radio"]:checked~.radio-label {
  color: var(--primaryColor);
}

.poll-submit-btn {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--slate800);
  color: var(--whiteColor);
  font-weight: 600;
  padding: 0.85rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.poll-submit-btn:hover {
  background-color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

/*================================ Trending Widget (Watermark Numbers) ==============================*/
.trending-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: trending-counter;
}

.trending-item {
  position: relative;
  padding-block: 1rem;
  border-block-end: 1px dashed var(--slate200);
  counter-increment: trending-counter;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  z-index: 1;
}

.trending-item:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.trending-item::before {
  content: counter(trending-counter);
  height: 100%;
  width: 24px;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--slate300);
  line-height: 1;
  transition: var(--smoothTransition);
}

.trending-link {
  color: var(--slate700);
  font-size: 0.95rem;
  flex: 1;
  font-weight: 600;
  line-height: 1.6;
  transition: var(--mainTransition);
}

.trending-item:hover::before {
  color: rgba(var(--primaryColorRGB), 0.1);
}

.trending-item:hover .trending-link {
  color: var(--primaryColor);
}

/*================================ Editor's Picks Widget ==============================*/
.editor-picks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.editor-pick-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--slate100);
  transition: var(--smoothTransition);
}

.editor-pick-item:hover .author-avatar {
  border-color: var(--primaryColor);
}

.pick-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pick-title {
  color: var(--slate800);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  transition: var(--mainTransition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editor-pick-item:hover .pick-title {
  color: var(--primaryColor);
}

.author-name {
  font-size: 0.75rem;
  color: var(--slate400);
}

/*================================ Cultural Newsletter Widget ==============================*/
.newsletter-widget {
  background: linear-gradient(135deg, var(--slate900) 0%, var(--premiumDark) 100%);
  color: var(--whiteColor);
  text-align: center;
  padding: 2rem 1.5rem;
  border: none;
}

.newsletter-icon {
  font-size: 2.5rem;
  color: var(--primaryColor);
  margin-block-end: 1rem;
}

.newsletter-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.newsletter-desc {
  font-size: 0.85rem;
  color: var(--slate400);
  margin-block-end: 1.5rem;
  line-height: 1.6;
}

.newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
}

.newsletter-form input {
  width: 100%;
  background: rgba(var(--whiteColorRGB), 0.05);
  border: 1px solid rgba(var(--whiteColorRGB), 0.1);
  border-radius: 3rem;
  padding: 0.85rem 3rem 0.85rem 1rem;
  color: var(--whiteColor);
  font-size: 0.9rem;
  outline: none;
  transition: var(--mainTransition);
}

.newsletter-form input::placeholder {
  color: rgba(var(--whiteColorRGB), 0.3);
}

.newsletter-form input:focus {
  border-color: var(--primaryColor);
  background: rgba(var(--whiteColorRGB), 0.1);
}

.newsletter-form button {
  all: unset;
  position: absolute;
  inset-inline-start: 0.5rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.newsletter-form button:hover {
  transform: scale(1.1);
  background: var(--whiteColor);
  color: var(--primaryColor);
}

/*================================ Timeline Expandable & Load More ==============================*/

/* CSS Grid technique for smooth height transition */
.timeline-expandable {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}

.timeline-expandable.is-expanded {
  grid-template-rows: 1fr;
}

.timeline-expandable .expanded-list {
  min-height: 0;
  /* Required for CSS Grid animation to work */
  padding-block-start: 0;
}

/* Remove the pseudo-element line on the expanded list wrapper to avoid double lines */
.timeline-expandable .expanded-list::before {
  display: none;
}

/* Load More Button */
.timeline-load-more {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-block-start: 1rem;
  padding-block: 0.75rem;
  background-color: var(--slate50);
  border: 1px dashed var(--slate200);
  border-radius: var(--borderRadius);
  color: var(--slate600);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.timeline-load-more:hover {
  background-color: rgba(var(--primaryColorRGB), 0.05);
  border-color: var(--primaryColor);
  color: var(--primaryColor);
}

.timeline-load-more .btn-icon {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Button state when expanded */
.timeline-load-more[aria-expanded="true"] {
  background-color: var(--slate100);
  border-style: solid;
}

.timeline-load-more[aria-expanded="true"] .btn-icon {
  transform: rotate(180deg);
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 991px) {
  .premium-sidebar {
    position: static;
    margin-block-start: 3rem;
  }
}


/**========================================================================
 *                           Single Article (Premium Editorial)
 *========================================================================**/

/*================================ Reading Progress Bar ==============================*/
.reading-progress-container {
  position: fixed;
  top: var(--headerHeight);
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 999;
}

.reading-progress-bar {
  height: 100%;
  background: var(--primaryColor);
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 2px 10px rgba(var(--primaryColorRGB), 0.5);
}

.main-header.is-sticky~.reading-progress-container {
  top: 65px;
}

/*================================ Article Shell ==============================*/
.premium-single-article {
  background: var(--whiteColor);
  border-radius: var(--borderRadiusLg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 4px 25px rgba(15, 23, 42, 0.03);
  border: 1px solid var(--slate100);
}

/*================================ Article Header ==============================*/
.article-header {
  margin-block-end: 2rem;
}

.premium-single-article .article-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--slate900);
  line-height: 1.5;
  margin-block-end: 1rem;
  letter-spacing: -0.5px;
}

/* Subtle Categories */
.article-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1.5rem;
}

.category-pill {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate500);
  background: transparent;
  padding: 0.25rem 0.85rem;
  border-radius: 2rem;
  border: 1px solid var(--slate200);
  text-decoration: none;
  transition: var(--smoothTransition);
}

.category-pill:hover {
  background: var(--slate50);
  color: var(--slate800);
  border-color: var(--slate300);
}

.category-pill.highlight {
  color: var(--primaryColor);
  border-color: rgba(var(--primaryColorRGB), 0.3);
  background: rgba(var(--primaryColorRGB), 0.02);
}

.article-lead {
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--slate600);
  line-height: 1.8;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--primaryColor);
  margin-block-end: 2rem;
  text-align: justify;
}

/*================================ Meta Toolbar ==============================*/
.article-meta-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1rem;
  border-block: 1px solid var(--slate100);
}

.meta-start,
.meta-end {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--slate50);
  padding: 5px;
  border: 1px solid var(--slate200);
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--slate800);
}

.publish-date {
  font-size: 0.8rem;
  color: var(--slate500);
}

.news-code {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate400);
  background: var(--slate50);
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 1px;
}

.meta-action-btn {
  all: unset;
  color: var(--slate400);
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--mainTransition);
}

.meta-action-btn:hover {
  color: var(--primaryColor);
  transform: translateY(-2px);
}

/*================================ Hero Image ==============================*/
.article-hero {
  margin-block-end: 2.5rem;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.hero-image {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: cover;
  display: block;
}

.hero-caption {
  padding: 0.85rem 1rem;
  background: var(--slate800);
  color: var(--slate100);
  font-size: 0.85rem;
  text-align: center;
  border-block-end: 1px solid var(--slate100);
}

/*================================ Article Body ==============================*/
.article-body-content {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--slate800);
  line-height: 2.1;
  text-align: justify;
}

.article-body-content p {
  margin-block-end: 1.5rem;
}

.article-body-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--borderRadius);
  margin-block: 2rem;
}

/* Pull Quote */
.article-pull-quote {
  margin: 2.5rem 0;
  padding: 2rem;
  background: rgba(var(--primaryColorRGB), 0.03);
  border-radius: var(--borderRadiusLg);
  position: relative;
  text-align: center;
}

.article-pull-quote i {
  font-size: 2.5rem;
  color: rgba(var(--primaryColorRGB), 0.15);
  margin-block-end: 1rem;
}

.article-pull-quote p {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--primaryColor);
  margin: 0;
  line-height: 1.7;
}

/*================================ Tags ==============================*/
.article-tags-container {
  margin-block-start: 3rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--slate100);
}

.tags-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slate800);
  margin-block-end: 1rem;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag-item {
  background: var(--slate50);
  color: var(--slate600);
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.tag-item:hover {
  background: var(--slate800);
  color: var(--whiteColor);
}

/*================================ Interactive Footer ==============================*/
.article-interactive-footer {
  margin-block-start: 2rem;
  padding: 1.5rem;
  background: var(--slate50);
  border-radius: var(--borderRadiusLg);
  border: 1px solid var(--slate200);
}

.widget-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--slate500);
  margin-block-end: 0.75rem;
  display: block;
}

/* Social Share */
.share-icons {
  display: flex;
  gap: 0.75rem;
}

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.1rem;
  transition: var(--smoothTransition);
  text-decoration: none;
}

.share-btn.telegram {
  background: #0088cc;
}

.share-btn.twitter {
  background: #000000;
}

.share-btn.whatsapp {
  background: #25d366;
}

.share-btn.linkedin {
  background: #0a66c2;
}

.share-btn:hover {
  transform: translateY(-3px);
  color: var(--whiteColor);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Short URL */
.engagement-widget {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}

.url-input-group {
  display: flex;
  align-items: center;
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: 4px;
  overflow: hidden;
  height: 40px;
}

.url-input-group input {
  border: none;
  background: transparent;
  padding: 0 1rem;
  font-size: 0.85rem;
  color: var(--slate600);
  width: 180px;
  outline: none;
  direction: ltr;
}

.url-input-group button {
  all: unset;
  background: var(--slate100);
  color: var(--slate600);
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--mainTransition);
  border-inline-start: 1px solid var(--slate200);
}

.url-input-group button:hover {
  background: var(--primaryColor);
  color: var(--whiteColor);
}

/* Star Rating */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  height: 40px;
  align-items: center;
}

.star-rating input {
  display: none;
}

.star-rating label {
  cursor: pointer;
  width: 25px;
  font-size: 1.5rem;
  color: var(--slate300);
  transition: var(--mainTransition);
}

.star-rating label::before {
  content: '\f005';
  font-family: var(--fontIcons);
  font-weight: 900;
}

.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/*================================ Comments Section ==============================*/
.comments-count {
  color: var(--primaryColor);
  font-size: 1.1rem;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block-end: 2.5rem;
}

.comment-item {
  display: flex;
  gap: 1.25rem;
}

.comment-item.is-reply {
  margin-inline-start: 3.5rem;
  position: relative;
}

.comment-item.is-reply::before {
  content: '';
  position: absolute;
  inset-inline-start: -2rem;
  top: 0;
  width: 1.5rem;
  height: 2rem;
  border-inline-start: 2px solid var(--slate200);
  border-block-end: 2px solid var(--slate200);
  border-end-start-radius: 0.5rem;
}

.comment-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--slate100);
  color: var(--slate400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 1px solid var(--slate200);
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.comment-body {
  flex-grow: 1;
  background: var(--slate50);
  padding: 1.25rem;
  border-radius: 0 var(--borderRadiusLg) var(--borderRadiusLg) var(--borderRadiusLg);
  border: 1px solid var(--slate100);
}

.comment-body.admin-body {
  background: rgba(var(--primaryColorRGB), 0.03);
  border-color: rgba(var(--primaryColorRGB), 0.1);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 0.75rem;
}

.comment-author {
  font-weight: 700;
  color: var(--slate800);
  font-size: 0.95rem;
}

.comment-author.admin-badge {
  background: var(--primaryColor);
  color: var(--whiteColor);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.comment-date {
  font-size: 0.8rem;
  color: var(--slate400);
}

.comment-text {
  font-size: 0.95rem;
  color: var(--slate700);
  line-height: 1.7;
  margin-block-end: 1rem;
}

.comment-reply-btn {
  all: unset;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate500);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--mainTransition);
}

.comment-reply-btn:hover {
  color: var(--primaryColor);
}

/* Empty State */
.empty-comments-state {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--slate50);
  border-radius: var(--borderRadiusLg);
  border: 1px dashed var(--slate200);
  margin-block-start: 2rem;
}

.empty-icon {
  font-size: 3rem;
  color: var(--slate300);
  margin-block-end: 1rem;
}

.empty-comments-state p {
  color: var(--slate500);
  margin: 0;
  font-weight: 500;
}

/* Comment Form */
.premium-comment-form .input-group {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.input-icon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate400);
  z-index: 2;
}

.textarea-icon {
  top: 1.5rem;
  transform: none;
}

.premium-comment-form .form-control {
  padding-inline-start: 2.5rem;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadius);
}

.premium-comment-form .form-control:focus {
  background: var(--whiteColor);
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 4px rgba(var(--primaryColorRGB), 0.1);
}

.submit-comment-btn {
  all: unset;
  background: var(--slate900);
  color: var(--whiteColor);
  padding: 0.85rem 2rem;
  border-radius: var(--borderRadius);
  font-weight: 700;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.submit-comment-btn:hover {
  background: var(--primaryColor);
  box-shadow: var(--premiumGlow);
  transform: translateY(-2px);
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 991px) {
  .engagement-widget {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  .article-meta-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .meta-end {
    width: 100%;
    justify-content: space-between;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--slate100);
  }

  .comment-item.is-reply {
    margin-inline-start: 1.5rem;
  }

  .comment-item.is-reply::before {
    width: 1rem;
    inset-inline-start: -1.25rem;
  }
}


/**========================================================================
 *                           Newspaper Platform (Premium Editorial)
 *========================================================================**/

/*================================ Sidebar (25%) ==============================*/
.newspaper-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 100px;
}

/*================================ Sidebar: Latest Magazines Widget ==============================*/
.magazine-mini-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mag-mini-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  padding: 0.75rem;
  border-radius: var(--borderRadius);
  background: var(--slate50);
  border: 1px solid transparent;
  transition: var(--smoothTransition);
}

.mag-mini-item:hover {
  background: var(--whiteColor);
  border-color: var(--slate200);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
  transform: translateY(-2px);
}

.mag-mini-cover {
  width: 60px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: -4px 4px 10px rgba(15, 23, 42, 0.15);
  transition: var(--smoothTransition);
}

.mag-mini-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.mag-mini-item:hover .mag-mini-cover {
  transform: rotate(0) scale(1.1);
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.2);
}

.mag-mini-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mag-issue-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.3rem;
}

.mag-mini-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--slate800);
  line-height: 1.5;
  margin-block-end: 0.4rem;
  transition: var(--mainTransition);
}

.mag-mini-item:hover .mag-mini-title {
  color: var(--primaryColor);
}

.mag-mini-date {
  font-size: 0.75rem;
  color: var(--slate500);
}



/* Radar Widget (News Agency Cross-promo) */
.radar-widget {
  background: var(--slate50);
  border: 1px solid var(--slate200);
}

.pulse-indicator {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primaryColor);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pulse-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primaryColor);
  animation: premiumPulse 2s infinite;
}

.radar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block-end: 1.5rem;
}

.radar-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.radar-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--slate800);
  line-height: 1.5;
  text-decoration: none;
  transition: var(--mainTransition);
}

.radar-link:hover {
  color: var(--primaryColor);
}

.radar-time {
  font-size: 0.75rem;
  color: var(--slate500);
  display: flex;
  align-items: center;
}

.radar-time::before {
  content: '\f017';
  /* fa-clock */
  font-family: var(--fontIcons);
  margin-inline-end: 0.4rem;
}

.view-agency-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadius);
  color: var(--slate700);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.view-agency-btn:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: var(--premiumGlow);
}

/* Monthly Magazine Sidebar Widget */
.magazine-widget {
  padding: 0;
  overflow: hidden;
  border: none;
}

.magazine-widget-inner {
  background: linear-gradient(135deg, var(--slate900) 0%, var(--premiumDark) 100%);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.magazine-cover-wrapper {
  width: 120px;
  margin-block-end: 1.5rem;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  transition: var(--smoothTransition);
}

.magazine-cover-img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

.magazine-widget:hover .magazine-cover-wrapper {
  transform: translateY(-5px) scale(1.05);
}

.magazine-widget-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.widget-kicker {
  color: var(--slate400);
  font-size: 0.8rem;
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.widget-heading {
  color: var(--whiteColor);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
  margin-block-end: 1.5rem;
}

.magazine-action-btn {
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 3rem;
  text-decoration: none;
  transition: var(--mainTransition);
}

.magazine-action-btn:hover {
  background: var(--whiteColor);
  color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

/*================================ Main Content Area (75%) ==============================*/
.newspaper-main-wrapper {
  display: flex;
  flex-direction: column;
}

/* Hero: Today's Edition */
.edition-hero-section {
  background: var(--whiteColor);
  border: 1px solid var(--slate100);
  border-radius: var(--borderRadiusLg);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.05);
}

.edition-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.edition-visual {
  perspective: 1500px;
  display: flex;
  justify-content: center;
}

.newspaper-3d-stage {
  position: relative;
  width: 100%;
  max-width: 280px;
  transform-style: preserve-3d;
  transform: rotateY(-12deg) rotateX(4deg);
  transition: var(--smoothTransition);
  box-shadow: -20px 20px 35px rgba(15, 23, 42, 0.15);
}

/* Removed ::after spine logic as requested */

.edition-cover-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.edition-hero-section:hover .newspaper-3d-stage {
  transform: rotateY(0deg) rotateX(0deg) scale(1.05);
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.1);
}

.edition-content {
  display: flex;
  flex-direction: column;
}

.edition-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primaryColor);
}

.edition-date {
  color: var(--slate500);
  font-weight: 500;
}

.edition-headline {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 900;
  color: var(--slate900);
  line-height: 1.4;
  margin-block-end: 1.5rem;
  letter-spacing: -1px;
}

.edition-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  color: var(--slate600);
  line-height: 1.9;
  text-align: justify;
  margin-block-end: 2.5rem;
}

.edition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-primary-editorial,
.btn-outline-editorial {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 3rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.btn-primary-editorial {
  background: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: 0 4px 15px rgba(var(--primaryColorRGB), 0.3);
}

.btn-primary-editorial:hover {
  background: var(--slate900);
  color: var(--whiteColor);
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
}

.btn-outline-editorial {
  background: transparent;
  color: var(--slate200);
  border: 1px solid var(--slate200);
}

.btn-outline-editorial:hover {
  background: var(--slate50);
  border-color: var(--slate300);
  color: var(--slate900);
  transform: translateY(-2px);
}

/*================================ Print-Style Grid (3 Columns) ==============================*/
.print-header {
  border-block-end: 2px solid var(--slate100);
}

.print-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.print-article {
  display: block;
}

.print-link-wrapper {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
  transition: var(--smoothTransition);
}


.print-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 4px;
  margin-block-end: 1.25rem;
}

.print-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: grayscale(20%);
}

.print-article:hover .print-img-wrapper img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.print-content {
  display: flex;
  flex-direction: column;
}

.print-kicker {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.5rem;
}

.print-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--slate900);
  line-height: 1.5;
  margin-block-end: 0.85rem;
  transition: var(--mainTransition);
}

.print-article:hover .print-title {
  color: var(--primaryColor);
}

.print-excerpt {
  font-size: 0.95rem;
  color: var(--slate600);
  line-height: 1.8;
  margin: 0;
  text-align: justify;
}

/*================================ Main Content: 3D Past Issues Archive ==============================*/
.past-issues-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  /* More vertical gap for 3D effect */
  padding-block-start: 1rem;
}

.past-issue-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.issue-cover-stage {
  perspective: 1000px;
  width: 100%;
  margin-block-end: 1.5rem;
  display: flex;
  justify-content: center;
}

.issue-cover-3d {
  position: relative;
  width: 90%;
  /* Leaves room for rotation */
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(5deg);
  transition: var(--smoothTransition);
  box-shadow: -12px 15px 25px rgba(15, 23, 42, 0.15);
}

.issue-cover-3d img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.past-issue-card:hover .issue-cover-3d {
  transform: rotateY(0deg) rotateX(0deg) scale(1.1);
  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.2);
}

.issue-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.issue-num {
  font-weight: 800;
  color: var(--slate800);
  font-size: 1rem;
  transition: var(--mainTransition);
}

.past-issue-card:hover .issue-num {
  color: var(--primaryColor);
}

.issue-date {
  font-size: 0.8rem;
  color: var(--slate500);
}

/*================================ Teaser Banner Slider ==============================*/
.teaser-slider-section {
  width: 100%;
}

.teaser-banner-slider {
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.teaser-card {
  display: block;
  width: 100%;
  aspect-ratio: 21/5;
  /* Panoramic */
  position: relative;
}

.teaser-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Teaser Pagination */
.teaser-slider-pagination {
  position: absolute;
  bottom: 0 !important;
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.teaser-slider-pagination .swiper-pagination-bullet {
  background: var(--slate300);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transition: var(--smoothTransition);
  margin: 0 !important;
}

.teaser-slider-pagination .swiper-pagination-bullet-active {
  background: var(--primaryColor);
  width: 24px;
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 1199px) {
  .edition-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .newspaper-sidebar {
    position: static;
    margin-block-end: 2rem;
  }

  .edition-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .edition-lead {
    text-align: center;
  }

  .drop-cap::first-letter {
    float: none;
    margin: 0;
  }

  .edition-actions {
    justify-content: center;
  }

  .print-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .past-issues-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .teaser-card {
    aspect-ratio: 16/7;
  }
}


/*================================ Control Panel (Filters & Search) ==============================*/
.archive-control-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.panel-header {
  border-block-end: 1px solid var(--slate100);
  padding-block-end: 1.5rem;
}

.panel-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--slate900);
  margin-block-end: 0.5rem;
  letter-spacing: -0.5px;
}

.panel-desc {
  font-size: 0.95rem;
  color: var(--slate500);
  margin: 0;
}

.panel-filters-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

/* Search Box Fixes */
.archive-search-box {
  flex-grow: 1;
  min-width: 250px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.archive-search-box .search-icon {
  position: absolute;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  inset-block: 0;
  color: var(--slate400);
  font-size: 1.25rem;
  pointer-events: none;
  z-index: 2;
}

.archive-search-input {
  width: 100%;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: 3rem;
  padding: 0.85rem 1rem 0.85rem 3.25rem;
  font-size: 0.95rem;
  color: var(--slate800);
  transition: var(--smoothTransition);
  outline: none;
}

.archive-search-input:focus {
  background: var(--whiteColor);
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 4px rgba(var(--primaryColorRGB), 0.1);
}

/* Date Filters */
.archive-date-filters {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.date-input-wrapper {
  position: relative;
  flex: 1;
}

.date-icon {
  position: absolute;
  inset-inline-end: 1rem;
  display: flex;
  align-items: center;
  line-height: 1;
  inset-block: 0;
  margin: auto;
  color: var(--slate400);
  pointer-events: none;
  font-size: 1rem;
  z-index: 2;
}

.premium-date-input {
  width: 100%;
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: 3rem;
  padding: 0.85rem 1rem 0.85rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate700);
  cursor: pointer;
  outline: none;
  transition: var(--smoothTransition);
  text-align: center;
}

.premium-date-input:focus,
.premium-date-input:hover {
  border-color: var(--primaryColor);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.date-separator {
  color: var(--slate400);
  font-size: 0.85rem;
  font-weight: 600;
}

.filter-submit-btn {
  all: unset;
  box-sizing: border-box;
  background: var(--slate900);
  color: var(--whiteColor);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  border-radius: 3rem;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.filter-submit-btn:hover {
  background: var(--primaryColor);
  box-shadow: var(--premiumGlow);
  transform: translateY(-2px);
}

/* Override Datepicker default styles to match theme */
.datepicker-plot-area {
  font-family: var(--bodyFont) !important;
  border-radius: var(--borderRadiusLg) !important;
  border: 1px solid var(--slate200) !important;
  box-shadow: var(--premiumShadow) !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span.selected {
  background-color: var(--primaryColor) !important;
}

.newspaper-archive-list .kiosk-3d-wrapper {
  width: clamp(95px, 90%, 260px);
}

/*================================ Responsive Perfection ==============================*/
@media (max-width: 991px) {
  .panel-filters-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .archive-date-filters {
    justify-content: space-between;
  }

  .date-input-wrapper {
    flex: 1;
  }

  .filter-submit-btn {
    width: 100%;
    text-align: center;
  }
}

/* Mobile & Touch UX Fixes */
@media (max-width: 767px) {
  .archive-date-filters {
    flex-direction: column;
    justify-content: center;
    align-items: start;
  }

  .date-separator {
    margin-inline: auto;
  }

  .date-input-wrapper {
    width: 100%;
    box-sizing: border-box;
  }

}


/**========================================================================
 *                           Single Newspaper Edition (Complete)
 *========================================================================**/

.newspaper-main-wrapper {
  display: flex;
  flex-direction: column;
}

.edition-single-view {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/*================================ 1. Edition Hero Header ==============================*/
.edition-hero-header {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-block-end: 2.5rem;
  border-block-end: 1px solid var(--slate100);
}

.edition-hero-visual {
  flex-shrink: 0;
  width: 140px;
  perspective: 1000px;
}

.newspaper-3d-stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-12deg) rotateX(4deg);
  transition: var(--smoothTransition);
  box-shadow: -20px 20px 35px rgba(15, 23, 42, 0.15);
}

.edition-cover-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.edition-hero-header:hover .newspaper-3d-stage {
  transform: rotateY(0deg) rotateX(0deg) scale(1.05);
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.1);
}

.edition-hero-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.edition-meta-tags {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1rem;
}

.edition-number-badge {
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 2rem;
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.3);
}

.edition-publish-date {
  color: var(--slate500);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.edition-main-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  color: var(--slate900);
  line-height: 1.4;
  margin-block-end: 1rem;
  letter-spacing: -0.5px;
}

.edition-short-desc {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--slate600);
  line-height: 1.8;
  margin: 0;
}

/*================================ 2. Cinematic Viewer Shell ==============================*/
.edition-viewer-section {
  background: var(--premiumDark);
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.4);
  transition: var(--smoothTransition);
}

.edition-viewer-section.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  border-radius: 0;
}

/* Toolbar */
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  background: rgba(var(--whiteColorRGB), 0.05);
  border-block-end: 1px solid rgba(var(--whiteColorRGB), 0.1);
}

.viewer-title {
  color: var(--slate300);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-counter {
  color: var(--slate400);
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(var(--whiteColorRGB), 0.05);
  padding: 0.25rem 1rem;
  border-radius: 2rem;
}

.toolbar-end {
  display: flex;
  gap: 0.5rem;
}

/*================================ Viewer Toolbar Enhancements ==============================*/
.toolbar-divider {
  width: 1px;
  height: 20px;
  background-color: rgba(var(--whiteColorRGB), 0.2);
  margin-inline: 0.5rem;
}

/*================================ Pan & Zoom Physics ==============================*/
/* By default, the flipbook has a smooth transition */
.flipbook-container {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: none;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform-origin: center center;
}

.flipbook-container.is-ready {
  display: block;
}

/* When the user zooms in, we change the cursor to indicate it's draggable */
.flipbook-container.is-zoomed {
  cursor: grab;
}

/* When the user is actively dragging, we MUST remove the CSS transition 
   so the movement sticks perfectly to the mouse without lag */
.flipbook-container.is-panning {
  cursor: grabbing !important;
  transition: none !important;
}

.viewer-btn {
  all: unset;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate400);
  cursor: pointer;
  transition: var(--smoothTransition);
  font-size: 1.1rem;
}

.viewer-btn:hover {
  background: rgba(var(--whiteColorRGB), 0.1);
  color: var(--whiteColor);
}

/* Canvas & Book */
.viewer-canvas {
  width: 100%;
  height: 600px;
  background: radial-gradient(circle at center, var(--slate800) 0%, var(--premiumDark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.edition-viewer-section.is-fullscreen .viewer-canvas {
  height: calc(100vh - 60px);
}

.viewer-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--slate400);
  position: absolute;
  z-index: 5;
}

.placeholder-icon {
  font-size: 2.5rem;
  color: var(--primaryColor);
}

.flipbook-container {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: none;
  transition: transform 0.4s ease;
}

.flipbook-container.is-ready {
  display: block;
}

/* Page Styling for stPageFlip */
.stf__wrapper {
  /* Internal class of stPageFlip */
  border-radius: 2px;
}

.page {
  background-color: var(--whiteColor);
  border: solid 1px hsl(0, 0%, 88%);
  overflow: hidden;
  box-shadow: inset -1px 0 5px rgba(0, 0, 0, 0.1);
}

.page canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Navigation Arrows */
.flip-nav-btn {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(var(--whiteColorRGB), 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.2);
  color: var(--whiteColor);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--smoothTransition);
  z-index: 10;
}

.flip-nav-btn:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

.prev-btn {
  inset-inline-end: 1.5rem;
}

.next-btn {
  inset-inline-start: 1.5rem;
}

/*================================ 3. Pages Gallery ==============================*/
.section-sub-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--slate800);
  margin-block-end: 1.5rem;
}

.border-bottom-title {
  border-block-end: 2px solid var(--slate100);
  padding-block-end: 1rem;
}

.page-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.page-thumb-wrapper {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--slate200);
  transition: var(--smoothTransition);
}

.page-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.page-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--primaryColorRGB), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 2rem;
  opacity: 0;
  transition: var(--smoothTransition);
}

.page-gallery-item:hover .page-thumb-wrapper {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.15);
  border-color: var(--primaryColor);
}

.page-gallery-item:hover .page-thumb-wrapper img {
  transform: scale(1.05);
}

.page-gallery-item:hover .page-overlay {
  opacity: 1;
}

.page-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--slate600);
  transition: var(--mainTransition);
}

.page-gallery-item:hover .page-label {
  color: var(--primaryColor);
}

/*================================ 4. Download Center ==============================*/
.edition-download-center {
  background: var(--slate50);
  border: 1px dashed var(--slate300);
  border-radius: var(--borderRadiusLg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.download-primary-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-block-end: 1px solid var(--slate200);
  padding-block-end: 1.5rem;
}

.btn-download-full {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: 3rem;
  text-decoration: none;
  transition: var(--smoothTransition);
  box-shadow: 0 4px 15px rgba(var(--primaryColorRGB), 0.3);
}

.btn-download-full:hover {
  background: var(--slate900);
  color: var(--whiteColor);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.2);
}

.download-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.download-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate500);
}

.page-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-download-pill {
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  color: var(--slate700);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.page-download-pill:hover {
  background: var(--slate100);
  border-color: var(--slate400);
  color: var(--slate900);
  transform: translateY(-2px);
}

/*================================ 5. Extracted Articles (SEO) ==============================*/
.extracted-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.extracted-card {
  display: flex;
  flex-direction: column;
  padding-inline-start: 1.5rem;
  border-inline-start: 3px solid var(--slate200);
  transition: var(--smoothTransition);
}

.extracted-card:hover {
  border-inline-start-color: var(--primaryColor);
}

.extracted-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.5rem;
}

.extracted-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
  margin-block-end: 0.75rem;
}

.extracted-title a {
  color: var(--slate800);
  text-decoration: none;
  transition: var(--mainTransition);
}

.extracted-card:hover .extracted-title a {
  color: var(--primaryColor);
}

.extracted-excerpt {
  font-size: 0.95rem;
  color: var(--slate600);
  line-height: 1.8;
  margin: 0;
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 767px) {
  .edition-hero-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .edition-hero-visual {
    width: 120px;
    align-self: center;
  }

  .viewer-canvas {
    height: 400px;
  }

  .flip-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .prev-btn {
    inset-inline-end: 0.5rem;
  }

  .next-btn {
    inset-inline-start: 0.5rem;
  }

  .download-primary-action {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-download-full {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MAGAZINE EDITORIAL PLATFORM
   ========================================================================== */

/* --- 1. Contained Hero Slider --- */
.mag-hero-contained .mag-hero-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  min-height: 480px;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15);
  background-color: var(--premiumDark);
}

.mag-hero-slider,
.mag-hero-slider .swiper-wrapper,
.mag-hero-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.mag-hero-figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  display: flex;
  align-items: flex-start;
}

.mag-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-slide-active .mag-hero-bg {
  transform: scale(1);
}

.mag-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 50%, transparent 100%);
  z-index: 1;
}

.mag-hero-caption {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 4vw, 3.5rem);
  width: 100%;
  max-width: 750px;
}

.mag-hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1rem;
}

.mag-hero-kicker {
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
}

.mag-hero-date {
  color: var(--slate300);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.mag-hero-title {
  color: var(--whiteColor);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -1px;
  margin-block-end: 1rem;
  text-wrap: balance;
}

.mag-hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.8;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Minimal Slider Controls */
.mag-hero-controls {
  position: absolute;
  inset-inline-end: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.mag-slider-nav {
  display: flex;
  gap: 0.5rem;
}

.mag-nav-btn {
  all: unset;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.mag-nav-btn:hover {
  background: var(--whiteColor);
  color: var(--primaryColor);
  transform: scale(1.1);
}

.mag-hero-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: var(--smoothTransition);
}

.mag-hero-pagination .swiper-pagination-bullet-active {
  background: var(--whiteColor);
  width: 24px;
  border-radius: 4px;
}

/* --- 2. Duo Showcase (Cinema & TV) --- */
.mag-duo-card {
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--smoothTransition);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.03);
  height: 100%;
}

.mag-duo-card:hover {
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.1);
  border-color: var(--slate300);
  transform: translateY(-5px);
}

.mag-duo-header {
  margin-block-end: 3rem;
}

.mag-duo-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--slate900);
  margin-block-end: 0.5rem;
  letter-spacing: -0.5px;
}

.mag-duo-issue {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primaryColor);
  background: rgba(var(--primaryColorRGB), 0.08);
  padding: 0.3rem 1rem;
  border-radius: 2rem;
}

/* 3D Book & Fancybox Trigger */
.mag-3d-stage {
  perspective: 1200px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-block-end: 1rem;
}

.mag-3d-book {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3/4;
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(5deg);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s ease;
  box-shadow: -15px 20px 35px rgba(15, 23, 42, 0.15);
  cursor: pointer;
}

.right-tilt .mag-3d-book {
  transform: rotateY(15deg) rotateX(5deg);
  box-shadow: 15px 20px 35px rgba(15, 23, 42, 0.15);
}

.mag-3d-book:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(1.05);
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.2);
}

.mag-book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 6px 6px 2px;
  position: absolute;
  inset: 0;
  z-index: 5;
}

.mag-book-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.25) 25%, transparent 30%);
  z-index: 6;
  border-radius: 2px 6px 6px 2px;
  pointer-events: none;
}

/* Logical Properties for 3D Book Pages */
.mag-book-pages {
  position: absolute;
  top: 2%;
  inset-inline-start: -15px;
  width: 15px;
  height: 96%;
  background: linear-gradient(to right, #e2e8f0 0%, #ffffff 50%, #e2e8f0 100%);
  transform: rotateY(90deg);
  transform-origin: left;
  z-index: 4;
  border-radius: 0 4px 4px 0;
}

.right-tilt .mag-book-pages {
  inset-inline-start: auto;
  inset-inline-end: -15px;
  transform-origin: right;
  transform: rotateY(-90deg);
}

/* Zoom Hint Overlay */
.mag-zoom-hint {
  position: absolute;
  inset: 0;
  background: rgba(var(--primaryColorRGB), 0.8);
  color: var(--whiteColor);
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 2px 6px 6px 2px;
  opacity: 0;
  transition: var(--smoothTransition);
}

.mag-3d-book:hover .mag-zoom-hint {
  opacity: 1;
}

.mag-quick-view-label {
  font-size: 0.8rem;
  color: var(--slate500);
  font-weight: 600;
  opacity: 0.8;
  transition: var(--mainTransition);
}

.mag-duo-card:hover .mag-quick-view-label {
  opacity: 1;
  color: var(--slate700);
}

.kiosk-action-group {
  max-width: 260px;
}

/* --- 3. Specials (Editorial Layout) --- */
.mag-specials-editorial {
  background-color: var(--slate50);
}

.ratio-4-3 {
  aspect-ratio: 4/3;
}

.mag-special-main {
  background: var(--whiteColor);
  padding: 1.5rem;
  border-radius: var(--borderRadiusLg);
  border: 1px solid var(--slate200);
  transition: var(--smoothTransition);
}

.mag-special-main:hover {
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.08);
  border-color: var(--primaryColor);
}

.mag-special-main .card-img-wrapper {
  border-radius: var(--borderRadius);
}

.mag-special-title-lg {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 900;
  color: var(--slate900);
  line-height: 1.4;
  margin-block-end: 1rem;
  transition: var(--mainTransition);
}

.mag-special-main:hover .mag-special-title-lg {
  color: var(--primaryColor);
}

.mag-special-excerpt {
  font-size: 1.05rem;
  color: var(--slate600);
  line-height: 1.9;
  margin: 0;
  text-align: justify;
}

/* 5 Cards Sidebar Layout */
.mag-special-side {
  background: var(--whiteColor);
  padding: 0.85rem;
  border-radius: var(--borderRadius);
  border: 1px solid var(--slate200);
  transition: var(--smoothTransition);
}

.mag-special-side:hover {
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  border-color: var(--slate300);
  transform: translateX(-5px);
}

.mag-side-img {
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
}

.mag-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mag-side-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mag-side-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.4rem;
}

.mag-side-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--slate800);
  line-height: 1.5;
  margin-block-end: 0.4rem;
  transition: var(--mainTransition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mag-special-side:hover .mag-side-title {
  color: var(--primaryColor);
}

.mag-side-date {
  font-size: 0.8rem;
  color: var(--slate400);
}

/* --- 4. Contained Archive Box --- */
.mag-archive-box {
  background: linear-gradient(135deg, var(--slate900) 0%, var(--premiumDark) 100%);
  border-radius: var(--borderRadiusLg);
  padding: clamp(2rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3);
}

.mag-archive-bg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 8px);
  z-index: -1;
}

.mag-archive-box .mag-archive-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  margin-block-end: 1.5rem;
}

.mag-archive-box .mag-archive-desc {
  font-size: 1.05rem;
  line-height: 1.8;
  font-weight: 300;
  max-width: 600px;
  margin: 0;
}

.mag-archive-box .btn-primary-editorial,
.mag-archive-box .btn-outline-editorial {
  display: inline-flex;
  align-items: center;
  height: fit-content;
  padding: 0.85rem 2rem;
}

.mag-archive-visual {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stack-img {
  position: absolute;
  width: 160px;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: var(--smoothTransition);
}

.stack-img.img-1 {
  transform: rotate(-15deg) translateX(-40px);
  z-index: 1;
}

.stack-img.img-2 {
  transform: rotate(0deg) translateY(-20px);
  z-index: 2;
}

.stack-img.img-3 {
  transform: rotate(15deg) translateX(40px);
  z-index: 3;
}

.mag-archive-box:hover .stack-img.img-1 {
  transform: rotate(-25deg) translateX(-60px);
}

.mag-archive-box:hover .stack-img.img-2 {
  transform: rotate(0deg) translateY(-40px);
}

.mag-archive-box:hover .stack-img.img-3 {
  transform: rotate(25deg) translateX(60px);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .mag-hero-contained .mag-hero-wrapper {
    aspect-ratio: 16/9;
  }

  .mag-hero-controls {
    inset-inline-end: 50%;
    transform: translateX(50%);
    bottom: 1.5rem;
    width: calc(100% - 3rem);
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .mag-hero-contained .mag-hero-wrapper {
    aspect-ratio: auto;
    min-height: 500px;
  }

  .mag-hero-caption {
    text-align: center;
  }

  .mag-hero-meta {
    justify-content: center;
  }

  .mag-3d-book {
    max-width: 200px;
  }
}

/**========================================================================
 *                           Contact Us Page (Premium Split Card)
 *========================================================================**/

.contact-subtitle {
  font-size: 1.1rem;
  color: var(--slate500);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/*================================ Split Card Shell ==============================*/
.contact-split-card {
  background: var(--whiteColor);
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 15px 40px -10px rgba(15, 23, 42, 0.1);
  border: 1px solid var(--slate200);
  margin-block-end: 4rem;
}

/*================================ Right Panel: Info (Dark) ==============================*/
.contact-info-panel {
  background: linear-gradient(135deg, var(--slate900) 0%, var(--premiumDark) 100%);
  color: var(--whiteColor);
  padding: clamp(2rem, 4vw, 4rem);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.info-panel-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 0% 100%, rgba(var(--primaryColorRGB), 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.info-panel-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-block-end: 2.5rem;
  position: relative;
  z-index: 1;
}

.contact-details-list {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: relative;
  z-index: 1;
}

.contact-details-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.detail-icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: var(--smoothTransition);
}

.contact-details-list li:hover .detail-icon {
  background: var(--primaryColor);
  color: var(--whiteColor);
  transform: scale(1.1);
  box-shadow: var(--premiumGlow);
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.detail-label {
  font-size: 0.85rem;
  color: var(--slate400);
  font-weight: 600;
}

.detail-text {
  font-size: 1rem;
  color: var(--whiteColor);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  text-decoration: none;
  text-align: right;
  transition: var(--mainTransition);
}

a.detail-text:hover {
  color: var(--primaryColor);
}

/* Social Grid */
.contact-socials-section {
  position: relative;
  z-index: 1;
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  padding-block-start: 2rem;
}

.socials-label {
  display: block;
  font-size: 0.9rem;
  color: var(--slate300);
  margin-block-end: 1.25rem;
  font-weight: 600;
}

.contact-social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.social-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: var(--slate300);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.social-pill i {
  font-size: 1.2rem;
}

.social-pill:hover {
  background: var(--whiteColor);
  color: var(--slate900);
  transform: translateY(-2px);
}

.social-pill.instagram:hover i {
  color: #E1306C;
}

.social-pill.telegram:hover i {
  color: #0088cc;
}

.social-pill.twitter:hover i {
  color: #000000;
}

.social-pill.iranian-app:hover i {
  color: var(--primaryColor);
}

/*================================ Left Panel: Form (Light) ==============================*/
.contact-form-panel {
  padding: clamp(2rem, 4vw, 4rem);
  background: var(--whiteColor);
  height: 100%;
}

.form-panel-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--slate900);
  margin-block-end: 0.5rem;
}

.form-panel-desc {
  font-size: 0.95rem;
  color: var(--slate500);
  margin-block-end: 2.5rem;
}

.premium-contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.premium-contact-form .form-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--slate700);
  margin: 0;
}

.premium-contact-form .required {
  color: var(--primaryColor);
  margin-inline-start: 0.2rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper .input-icon {
  position: absolute;
  inset-inline-end: 1.25rem;
  color: var(--slate400);
  font-size: 1.1rem;
  z-index: 2;
  transition: var(--mainTransition);
}

.input-wrapper .textarea-icon {
  top: 1.25rem;
}

.premium-contact-form .form-control {
  width: 100%;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: 0.75rem;
  padding: 1rem;
  padding-inline-start: 3rem;
  font-size: 0.95rem;
  color: var(--slate800);
  transition: var(--smoothTransition);
  outline: none;
}

html[dir="rtl"] .premium-contact-form .form-control {
  padding: 1rem 3rem 1rem 1rem;
}

.premium-contact-form textarea.form-control {
  padding-block-start: 1rem;
  resize: vertical;
  min-height: 120px;
}

.premium-contact-form .form-control::placeholder {
  color: var(--slate400);
  font-weight: 400;
}

.premium-contact-form .form-control:focus {
  background: var(--whiteColor);
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 4px rgba(var(--primaryColorRGB), 0.1);
}

.input-wrapper:focus-within .input-icon {
  color: var(--primaryColor);
}

.submit-contact-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--slate900);
  color: var(--whiteColor);
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 3rem;
  border-radius: 3rem;
  cursor: pointer;
  transition: var(--smoothTransition);
  width: 100%;
  /* Full width on mobile, overridden on desktop */
}

.submit-contact-btn:hover {
  background: var(--primaryColor);
  transform: translateY(-3px);
  box-shadow: var(--premiumGlow);
}

/* Make Contact Form 7 compatible with our styles if they use it */
.wpcf7-form-control-wrap {
  width: 100%;
  display: block;
}

/*================================ Responsive Adjustments ==============================*/
@media (min-width: 768px) {
  .submit-contact-btn {
    width: auto;
  }
}

@media (max-width: 991px) {
  .contact-social-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .contact-social-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 2rem 1.5rem;
  }
}

/**========================================================================
 *                           About Us Page (Premium Editorial)
 *========================================================================**/

.about-page {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.section-spacing {
  margin-block-start: clamp(4rem, 8vw, 6rem);
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--slate500);
  margin-block-start: 0.5rem;
}

/*================================ 1. Editorial Hero Section ==============================*/
.about-editorial-hero {
  padding-block: clamp(2rem, 5vw, 4rem);
  position: relative;
}

.hero-typography-wrapper {
  position: relative;
  z-index: 2;
}

.hero-kicker-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primaryColor);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-block-end: 2rem;
}

.hero-kicker-line::before {
  content: '';
  width: 40px;
  height: 2px;
  background-color: var(--primaryColor);
}

.hero-massive-title {
  font-size: clamp(1.5rem, 3vw, 3rem);
  font-weight: 900;
  color: var(--slate900);
  line-height: 1.1;
  letter-spacing: -2px;
  margin-block-end: 2rem;
}

.hero-massive-title .text-highlight {
  color: var(--primaryColor);
  position: relative;
  display: inline-block;
}

/* Subtle underline for the highlighted word */
.hero-massive-title .text-highlight::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 10px;
  width: 100%;
  height: 15px;
  background-color: rgba(var(--primaryColorRGB), 0.15);
  z-index: -1;
}

.hero-refined-desc {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--slate600);
  line-height: 1.9;
  max-width: 600px;
  text-align: justify;
  border-inline-start: 3px solid var(--slate200);
  padding-inline-start: 1.5rem;
}

/* Visual Composition */
.hero-visual-composition {
  position: relative;
  padding-inline-end: 2rem;
}

.visual-frame {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: -15px 20px 40px rgba(15, 23, 42, 0.15);
}

.parallax-img-soft {
  width: 100%;
  height: 115%;
  object-fit: cover;
  transform: translateY(-5%);
  will-change: transform;
}

/* Decorative offset border representing print frames */
.hero-visual-composition::before {
  content: '';
  position: absolute;
  inset-inline-start: -1rem;
  top: 1rem;
  width: 100%;
  height: 100%;
  border: 1px solid var(--slate300);
  border-radius: 2px;
  z-index: 0;
}

.visual-badge {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  background: var(--slate900);
  color: var(--whiteColor);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3);
  border: 4px solid var(--whiteColor);
}

.badge-year {
  font-family: var(--bodyFont);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.badge-text {
  font-size: 0.75rem;
  color: var(--slate300);
  margin-block-start: 0.25rem;
}


/*================================ 2. The Story ==============================*/
.section-kicker {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primaryColor);
  text-transform: uppercase;
  margin-block-end: 0.75rem;
  display: block;
}

.section-main-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 900;
  color: var(--slate900);
  line-height: 1.4;
  margin: 0;
  letter-spacing: -1px;
}

.story-text {
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  color: var(--slate600);
  line-height: 2.1;
  text-align: justify;
}

.story-text p {
  margin-block-end: 1.5rem;
}

.story-text strong {
  color: var(--slate900);
}

.story-text em {
  color: var(--primaryColor);
  font-style: normal;
  font-weight: 700;
}

/*================================ 3. Impact Stats ==============================*/
.about-stats {
  background: var(--premiumDark);
  border-radius: var(--borderRadiusLg);
  padding: 4rem 2rem;
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.4);
  position: relative;
  overflow: hidden;
}

.about-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--primaryColorRGB), 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.stat-number {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--whiteColor);
  line-height: 1;
}

.stat-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--slate400);
}

/*================================ 4. The Ecosystem (New Section) ==============================*/
.ecosystem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 320px;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  text-decoration: none;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.ecosystem-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 0;
}

.ecosystem-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 60%, transparent 100%);
  z-index: 1;
  transition: var(--smoothTransition);
}

.ecosystem-content {
  position: relative;
  z-index: 2;
  transform: translateY(20px);
  transition: var(--smoothTransition);
}

.ecosystem-icon {
  width: 45px;
  height: 45px;
  background: rgba(var(--whiteColorRGB), 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--whiteColorRGB), 0.3);
  color: var(--whiteColor);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-block-end: 1rem;
  transition: var(--smoothTransition);
}

.ecosystem-title {
  color: var(--whiteColor);
  font-size: 1.25rem;
  font-weight: 800;
  margin-block-end: 0.5rem;
}

.ecosystem-desc {
  color: rgba(var(--whiteColorRGB), 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
  opacity: 0;
  transition: var(--smoothTransition);
}

.ecosystem-card:hover .ecosystem-bg {
  transform: scale(1.08);
}

.ecosystem-card:hover .ecosystem-overlay {
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.98) 0%, rgba(var(--premiumDarkRGB), 0.6) 50%, rgba(var(--premiumDarkRGB), 0.2) 100%);
}

.ecosystem-card:hover .ecosystem-content {
  transform: translateY(0);
}

.ecosystem-card:hover .ecosystem-desc {
  opacity: 1;
}

.ecosystem-card:hover .ecosystem-icon {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

/*================================ 5. Missions Grid (Bootstrap Rows) ==============================*/
.mission-card {
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: 2.5rem 2rem;
  transition: var(--smoothTransition);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mission-card:hover {
  background: var(--slate50);
  border-color: var(--primaryColor);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
  transform: translateY(-5px);
}

.mission-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: rgba(var(--primaryColorRGB), 0.08);
  color: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-block-end: 1.5rem;
  transition: var(--smoothTransition);
}

.mission-card:hover .mission-icon {
  background: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: var(--premiumGlow);
}

.mission-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--slate800);
  margin-block-end: 0.75rem;
}

.mission-desc {
  font-size: 0.95rem;
  color: var(--slate500);
  line-height: 1.8;
  margin: 0;
}

/*================================ 6. Leadership Card ==============================*/
.leadership-card {
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
}

.leader-image-wrapper {
  width: 100%;
  height: 100%;
  min-height: 450px;
  position: relative;
}

.leader-image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
  transition: var(--smoothTransition);
  mix-blend-mode: darken;
}

.leadership-card:hover .leader-image-wrapper img {
  filter: grayscale(0%);
}

.leader-info {
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.leader-quote-icon {
  font-size: 4rem;
  color: rgba(var(--primaryColorRGB), 0.05);
  position: absolute;
  top: 2rem;
  inset-inline-end: 2rem;
}

.leader-name {
  font-size: 2rem;
  font-weight: 900;
  color: var(--slate900);
  margin-block-end: 0.25rem;
}

.leader-role {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primaryColor);
  margin-block-end: 1.5rem;
}

.leader-bio {
  font-size: 1.1rem;
  color: var(--slate600);
  line-height: 1.9;
  font-style: italic;
  margin-block-end: 2rem;
  border-inline-start: 3px solid var(--slate300);
  padding-inline-start: 1.25rem;
}

.leader-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--whiteColor);
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  border: 1px solid var(--slate200);
  width: fit-content;
}

.meta-label {
  font-size: 0.85rem;
  color: var(--slate500);
}

.meta-value {
  font-size: 0.9rem;
  color: var(--slate800);
  font-weight: 700;
}

/*================================ 7. Editorial CTA Section ==============================*/
.cta-elegant-wrapper {
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: clamp(2.5rem, 5vw, 4rem);
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
}

/* Elegant background lines */
.cta-elegant-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 10px,
      rgba(var(--slate200RGB), 0.3) 10px,
      rgba(var(--slate200RGB), 0.3) 11px);
  opacity: 0.5;
  pointer-events: none;
}

.cta-kicker {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 1rem;
}

.cta-elegant-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--slate900);
  margin-block-end: 1rem;
  letter-spacing: -1px;
}

.cta-elegant-desc {
  font-size: 1.1rem;
  color: var(--slate600);
  line-height: 1.8;
  margin: 0;
  max-width: 600px;
}

/* Magnetic Button Styles */
.magnetic-btn-wrapper {
  display: inline-block;
  padding: 1.5rem;
  /* Safe area for magnetic pull */
}

.btn-magnetic-editorial {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--slate900);
  color: var(--whiteColor);
  padding: 0.75rem 0.75rem 0.75rem 2rem;
  border-radius: 4rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.3s ease, color 0.3s ease;
  will-change: transform;
}

.btn-magnetic-editorial .btn-icon-circle {
  width: 48px;
  height: 48px;
  background: var(--whiteColor);
  color: var(--slate900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: var(--smoothTransition);
}

.magnetic-btn-wrapper:hover .btn-magnetic-editorial {
  background: var(--primaryColor);
}

.magnetic-btn-wrapper:hover .btn-icon-circle {
  transform: rotate(-45deg);
}

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 991px) {
  .hero-massive-title {
    br {
      display: none;
    }

    /* Let it wrap naturally on smaller screens */
  }

  .hero-visual-composition {
    max-width: 500px;
    margin: 0 auto;
  }

  .cta-elegant-wrapper {
    text-align: center;
  }

  .cta-elegant-desc {
    margin: 0 auto;
  }

  .magnetic-btn-wrapper {
    padding: 0;
    margin-block-start: 1rem;
  }

  .story-heading {
    text-align: center;
    margin-block-end: 2rem;
  }

  .leader-image-wrapper {
    min-height: 350px;
  }
}


@media (max-width: 767px) {
  .about-slogan {
    font-size: 4rem;
  }

  .leader-info {
    text-align: center;
  }

  .leader-bio {
    border-inline-start: none;
    padding-inline-start: 0;
  }

  .leader-meta {
    margin: 0 auto;
  }

  .ecosystem-card {
    height: 250px;
  }

  .cta-actions {
    flex-direction: column;
  }

  .cta-actions a {
    width: 100%;
    justify-content: center;
  }
}

/*================================ Accordion ==============================*/

.faq-section {
  border: 1px solid var(--borderColor);
  background-color: var(--whiteColor);
  box-shadow: var(--boxShadow);
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 0;
}

.faq-section .faq-banner {
  width: 100%;
}

.accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 0.0625rem solid var(--borderColor);
  border-radius: 0 !important;
}

.accordion .accordion-item:last-child {
  border-bottom: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--primaryColor);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: var(--borderColor);
  box-shadow: none;
  z-index: 3;
  outline: 0;
}

.accordion-button {
  justify-content: space-between;
  border-radius: 0 !important;
  align-items: center;
  font-weight: 600;
  padding: 1.25rem;
}

.accordion-button::after {
  background-image: none;
  font-family: var(--fontIcons);
  height: fit-content;
  width: fit-content;
  font-weight: 400;
  content: "\f078";
  font-size: 1.25rem;
  line-height: 0;
  margin-inline-end: 0;
}

.accordion-body p {
  text-align: justify;
  margin-bottom: 0;
  color: var(--grayTextColor);
  line-height: 1.8;
  font-weight: 500;
  font-size: 1rem;
}

/*================================ Seo Content Box ==============================*/
.seo-section {
  position: relative;
}

.more-description {
  padding-bottom: 50px;
  max-height: 250px;
  overflow: hidden;
}

.more-description::after {
  mask: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
  mask: linear-gradient(transparent, #000 100%);
  transition: ease-in-out 300ms;
  backdrop-filter: blur(3px);
  position: absolute;
  height: 70px;
  width: 100%;
  content: "";
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

.all-description {
  padding-bottom: 70px;
  max-height: fit-content;
  overflow-y: auto;
}

.more-description~.default-button {
  inset: auto 0 20px 0;
  position: absolute;
  width: fit-content;
  margin: auto;
}

.more-description.all-description::after {
  visibility: hidden;
  opacity: 0;
}

.more-description .title,
.more-description .sub-title {
  color: var(--primaryColor);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.more-description .sub-title {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.more-description p {
  text-align: justify;
  line-height: 1.9;
  font-size: 0.875rem;
  color: var(--textColorL3);
}

.more-description p strong {
  color: var(--textColorL2);
}

/*================================ About Us ==============================*/
.work-steps-section {
  min-height: calc(100vh - var(--headerHeight));
}

.work-steps-section .work-step-item {
  background-color: #333;
  justify-content: center;
  flex-direction: column;
  align-items: start;
  position: relative;
  padding: 50px;
  display: flex;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.work-steps-section .col-lg-3:nth-child(3) .work-step-item {
  background-color: var(--darkBack);
}

.work-steps-section .work-step-item:has(.work-step-back)::before {
  background-color: #101010;
  position: absolute;
  opacity: 0.75;
  margin: auto;
  height: 100%;
  width: 100%;
  content: "";
  z-index: -1;
  inset: 0;
}

.work-steps-section .work-step-item .work-step-back {
  filter: brightness(75%) contrast(110%);
  position: absolute;
  object-fit: cover;
  height: 100%;
  margin: auto;
  z-index: -2;
  width: 100%;
  inset: 0;
}

.work-step-item .work-step-number {
  font-family: "Work Sans", sans-serif;
  color: var(--primaryColor);
  margin-bottom: 2rem;
  font-size: 100px;
  font-weight: 200;
  line-height: 1;
}

.work-step-item .work-step-title {
  font-size: clamp(1.125rem, 1.75vw, 2rem);
  color: var(--lightTextColor);
  line-height: 1.25;
  font-weight: bold;
}

.work-step-item .work-step-title::after {
  background-color: var(--primaryColor);
  margin-block: 1.25rem;
  max-width: 50px;
  display: flex;
  height: 2px;
  width: 100%;
  content: "";
}

.work-step-item p {
  color: var(--lightTextColor);
  text-align: justify;
  font-weight: 300;
  font-size: 1rem;
}

.textual-content-section {
  flex-direction: column;
  display: flex;
}

.textual-content-section img {
  width: 100%;
}

.textual-content-section .title,
.textual-content-section .sub-title {
  font-size: clamp(1.125rem, 1.75vw, 2rem);
  color: var(--textColorL1);
  font-weight: bold;
}

.textual-content-section .sub-title {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.textual-content-section .description {
  color: var(--grayTextColor);
  text-align: justify;
  font-weight: 400;
  font-size: 1rem;
}

.counters-list {
  margin-top: 1.25rem;
}

.counter-section {
  border-inline-end: 1px solid var(--whiteColor);
  text-align: center;
  padding: 24px;
}

.counters-list .col-lg-3:last-child .counter-section {
  border: none;
}

.counter-section i {
  text-shadow: var(--textShadow);
  color: var(--primaryColor);
  margin-bottom: 20px;
  font-size: 72px;
  opacity: 0.8;
}

.counter-section .counter-value {
  color: var(--lightTextColor);
  line-height: 1.125;
  font-weight: bold;
  font-size: 50px;
  direction: rtl;
}

.counter-section .counter-value::after {
  color: rgb(255, 255, 255);
  font-size: 40px;
  content: "+";
  opacity: 0.5;
}

.counter-section .counter-title {
  color: var(--lightTextColor);
  font-size: 1.125rem;
  font-weight: 500;
}

.about-image {
  border-radius: var(--borderRadius);
  object-fit: cover;
  height: 100%;
  width: 100%;
}



/*================================ Client's Comments Slider ==============================*/

.customer-profile {
  border-radius: 100%;
  height: 100px;
  width: 100px;
}

.customer-info {
  background-image: url(../images/quot.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  margin-block: 1rem;
  text-align: center;
}

.customer-info .customer-name {
  color: var(--textColorL1);
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 18px;
}

.customer-comment {
  color: var(--grayTextColor);
  text-align: center;
  max-width: 748px;
}

.customer-rating {
  justify-content: center;
  align-items: center;
  color: #f7c201;
  display: flex;
  gap: 0.125rem;
}

.testimonials-section {
  background: url(../images/testimonials-1-bg.png) center/cover no-repeat;
}

.testimonial-heading-block {
  background: linear-gradient(45deg, var(--primaryColor), var(--secondColor));
  border-radius: 1.25rem 0 0 1.25rem;
  color: var(--lightTextColor);
  justify-content: center;
  flex-direction: column;
  text-align: center;
  align-items: start;
  padding: 3rem 4vw;
  padding-inline-end: 10vw;
  text-align: start;
  display: flex;
  height: 35vw;
}

.testimonial-heading-block p {
  color: var(--lightTextColor);
}

.testimonials-section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.testimonial-block {
  position: relative;
  padding-top: 2rem;
}

.quote-shape {
  position: absolute;
  top: -2vw;
  left: 10vw;
  width: 8vw;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(151, 151, 151, 0.25));
  z-index: 2;
}

.testimonial-slider-card {
  background: url(../images/t-card-bg.png) center/cover no-repeat;
  box-shadow: var(--boxShadow);
  margin-inline-start: -10vw;
  border-radius: 1.25rem;
  padding-bottom: 5rem;
  position: relative;
  max-width: 46vw;
  padding: 2rem;
  z-index: 1;
}

.testimonial-1 {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.testimonial-1 img {
  width: 9rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: 1rem;
}

.testimonial-slider-arrows .testimonial-prev:after,
.testimonial-slider-arrows .testimonial-next:after {
  content: "";
  display: grid;
  place-content: center;
  width: 3.5rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(29, 76, 115, 0.2);
  border: 1px solid var(--primaryColor);
  font-family: var(--fontIcons);
  font-size: 1.25rem;
  color: var(--primaryColor);
  position: absolute;
  bottom: 0.5rem;
  z-index: 2;
}

.testimonial-slider-arrows .testimonial-prev:after {
  content: "\f104";
  left: 1.5rem;
}

.testimonial-slider-arrows .testimonial-next:after {
  content: "\f105";
  left: 6rem;
}

.testimonial-prev,
.testimonial-next {
  all: unset;
  position: unset;
}

@media (max-width: 1199px) {
  .testimonial-heading-block {
    border-radius: 0;
    height: auto;
    text-align: center;
    align-items: center;
    padding: 3rem 2rem 6rem;
  }

  .testimonial-slider-card {
    margin: -4rem auto 0;
    max-width: 70vw;
  }

  .quote-shape {
    left: 12vw;
    top: -6vw;
  }
}

@media (max-width: 767px) {
  .testimonial-heading-block {
    padding: 2.5rem 1.5rem 5rem;
  }

  .testimonial-slider-card {
    max-width: 90vw;
    margin-top: -3rem;
  }

  .testimonial-1 {
    flex-direction: column;
    text-align: center;
  }

  .testimonial-1 img {
    width: 6rem;
  }

  .quote-shape {
    left: 2vw;
  }

  .testimonial-slider-arrows .testimonial-prev:after,
  .testimonial-slider-arrows .testimonial-next:after {
    width: 2.5rem;
    height: 2.25rem;
    font-size: 1rem;
    bottom: 0.25rem;
    left: 0;
  }

  .testimonial-slider-arrows .testimonial-next:after {
    right: 0;
  }
}


/* ==========================================================================
   SABA TV VOD PLATFORM (CINEMATIC DARK MODE)
   ========================================================================== */

.saba-tv-platform {
  background-color: var(--premiumDark);
  color: var(--whiteColor);
  min-height: 100vh;
}

.bg-dark-glass {
  background-color: rgba(255, 255, 255, 0.02);
  border-block-start: 1px solid rgba(255, 255, 255, 0.05);
  border-block-end: 1px solid rgba(255, 255, 255, 0.05);
}

.border-bottom-dark {
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 1. Cinematic Hero Slider --- */
.tv-hero-section {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 600px;
  max-height: 900px;
}

.tv-hero-slider,
.tv-hero-slider .swiper-wrapper,
.tv-hero-slider .swiper-slide,
.tv-hero-slide-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.tv-hero-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tv-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 10s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-slide-active .tv-hero-bg {
  transform: scale(1);
}

/* Vignette Effect (Darkens edges and the text area for readability) */
.tv-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to inline-end, rgba(var(--premiumDarkRGB), 1) 0%, rgba(var(--premiumDarkRGB), 0.6) 40%, transparent 100%),
    linear-gradient(to top, rgba(var(--premiumDarkRGB), 1) 0%, transparent 25%);
  z-index: 1;
}

.tv-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 650px;
  padding-inline-start: clamp(1rem, 4vw, 3rem);
}

.tv-hero-badges {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.badge-exclusive {
  background: linear-gradient(45deg, #f59e0b, #d97706);
  color: var(--whiteColor);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.badge-live {
  background: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  animation: premiumPulse 2s infinite;
}

.badge-category {
  color: var(--slate300);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.tv-hero-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  color: var(--whiteColor);
  line-height: 1.3;
  margin-block-end: 1.25rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.tv-hero-desc {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-block-end: 2.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Hero Actions */
.tv-hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-play-massive {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--whiteColor);
  color: var(--slate900);
  font-size: 1.15rem;
  font-weight: 800;
  padding: 0.85rem 2.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.btn-play-massive:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

.btn-add-list,
.btn-mute-toggle {
  all: unset;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.btn-add-list:hover,
.btn-mute-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--whiteColor);
  transform: scale(1.1);
}

.tv-hero-controls {
  position: absolute;
  bottom: 2rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 10;
}

.tv-hero-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3);
  width: 10px;
  height: 10px;
}

.tv-hero-pagination .swiper-pagination-bullet-active {
  background: var(--whiteColor);
  width: 30px;
  border-radius: 5px;
}

/* --- 2. Live Strip (Marquee) --- */
.tv-live-strip {
  background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%);
  padding-block: 0.75rem;
  position: relative;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

.live-strip-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.live-indicator-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--whiteColor);
  white-space: nowrap;
  padding-inline-end: 1rem;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.3);
}

.live-marquee {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
}

.live-marquee a {
  display: inline-block;
  color: var(--whiteColor);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  animation: marqueeScroll 25s linear infinite;
}

.live-marquee a:hover {
  animation-play-state: paused;
  text-decoration: underline;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.btn-enter-live {
  white-space: nowrap;
  color: var(--whiteColor);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  transition: var(--smoothTransition);
}

.btn-enter-live:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: translateX(-5px);
}

/* --- 3. VOD Shelves & Video Cards --- */
.tv-shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 1.5rem;
}

.tv-shelf-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--whiteColor);
  margin: 0;
}

.tv-shelf-title span {
  font-size: 0.85rem;
  color: var(--slate400);
  font-weight: 500;
}

.tv-view-all {
  color: var(--slate400);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--mainTransition);
}

.tv-view-all:hover {
  color: var(--whiteColor);
}

.tv-shelf-nav {
  display: flex;
  gap: 0.5rem;
}

.shelf-btn {
  all: unset;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--mainTransition);
}

.shelf-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* VOD Card (Netflix Style) */
.vod-card {
  display: block;
  width: 100%;
  position: relative;
  transition: var(--smoothTransition);
}

.vod-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.vod-thumb-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--slate800);
}

.vod-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.vod-overlay-play {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--smoothTransition);
}

.vod-overlay-play i {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.25rem;
  padding-inline-start: 4px;
  /* Optical center for play icon */
  transform: scale(0.8);
  transition: var(--smoothTransition);
}

.duration-badge {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-end: 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  z-index: 2;
}

.vod-progress {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 3;
}

.vod-progress .progress-bar {
  height: 100%;
  background: var(--primaryColor);
}

.vod-card:hover .vod-thumb-wrapper img {
  transform: scale(1.05);
}

.vod-card:hover .vod-overlay-play {
  opacity: 1;
}

.vod-card:hover .vod-overlay-play i {
  transform: scale(1);
  background: var(--primaryColor);
  border-color: var(--primaryColor);
}

.vod-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vod-cat-tag {
  font-size: 0.75rem;
  color: var(--primaryColor);
  font-weight: 700;
}

.vod-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--whiteColor);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: var(--mainTransition);
}

.vod-card:hover .vod-title {
  color: var(--primaryColor);
}

.vod-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--slate400);
}

/* Horizontal Featured VOD */
.featured-horizontal .vod-link {
  flex-direction: row;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
}

.featured-horizontal .vod-thumb-wrapper {
  width: 55%;
  border-radius: 0;
}

.featured-horizontal .vod-info {
  width: 45%;
  padding: 2rem;
  justify-content: center;
}

.featured-horizontal .vod-title {
  font-size: 1.35rem;
  -webkit-line-clamp: 3;
}

.featured-horizontal .vod-excerpt {
  font-size: 0.95rem;
  color: var(--slate400);
  line-height: 1.8;
  margin-block-start: 1rem;
}

/* --- 4. Audio / Podcast Cards --- */
.audio-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.audio-track-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: var(--smoothTransition);
}

.audio-track-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(-5px);
}

.audio-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.audio-cover {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.audio-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audio-play-btn {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whiteColor);
  font-size: 1.2rem;
  opacity: 0;
  transition: var(--mainTransition);
}

.audio-track-card:hover .audio-play-btn {
  opacity: 1;
}

.audio-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.audio-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--whiteColor);
  margin-block-end: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.audio-meta {
  font-size: 0.8rem;
  color: var(--slate400);
}

.audio-waveform {
  color: var(--slate500);
  font-size: 1.5rem;
  padding-inline-end: 0.5rem;
  transition: var(--mainTransition);
}

.audio-track-card:hover .audio-waveform {
  color: var(--primaryColor);
}

/* --- 5. Photo Galleries (Masonry Grid) --- */
.tv-gallery-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}

.tv-gallery-card.portrait {
  aspect-ratio: 3/4;
}

.tv-gallery-card.landscape {
  aspect-ratio: auto;
}

.tv-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tv-gallery-card .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  z-index: 2;
}

.tv-gallery-card .gallery-icon {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  color: var(--whiteColor);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  width: fit-content;
  margin-block-end: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tv-gallery-card .gallery-title {
  color: var(--whiteColor);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  transform: translateY(10px);
  transition: var(--smoothTransition);
}

.tv-gallery-card:hover img {
  transform: scale(1.08);
}

.tv-gallery-card:hover .gallery-title {
  transform: translateY(0);
  color: var(--primaryColor);
}

/* Responsive */
@media (max-width: 991px) {
  .featured-horizontal .vod-link {
    flex-direction: column;
  }

  .featured-horizontal .vod-thumb-wrapper,
  .featured-horizontal .vod-info {
    width: 100%;
  }

  .featured-horizontal .vod-info {
    padding: 1.5rem;
  }

  .tv-hero-content {
    align-items: center;
    text-align: center;
    margin: 0 auto;
    padding-inline: 1rem;
  }

  .tv-hero-vignette {
    background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 1) 0%, rgba(var(--premiumDarkRGB), 0.4) 100%);
  }

  .tv-hero-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .tv-hero-section {
    height: auto;
    min-height: 550px;
  }

  .live-strip-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    text-align: center;
  }

  .live-indicator-box {
    border: none;
    justify-content: center;
  }
}

/* ==========================================================================
   SABA TV PLATFORM - SIDEBAR
   ========================================================================== */

.sabatv-sidebar {
  background-color: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: clamp(1rem, 2vw, 1.5rem);
  position: sticky;
  top: calc(var(--headerHeight) + 2rem);
  box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.03);
  max-height: calc(100vh - var(--headerHeight) - 4rem);
  overflow-y: auto;
}

/* Custom Scrollbar for Sidebar */
.sabatv-sidebar::-webkit-scrollbar {
  width: 4px;
}

.sabatv-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sabatv-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--slate200);
  border-radius: 10px;
}

.sabatv-sidebar:hover::-webkit-scrollbar-thumb {
  background-color: var(--slate300);
}

/* Home Link */
.sabatv-nav-home {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background-color: var(--slate50);
  border-radius: var(--borderRadius);
  color: var(--slate800);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  margin-block-end: 1.5rem;
  transition: var(--smoothTransition);
  border: 1px solid var(--slate100);
}

.sabatv-nav-home i {
  font-size: 1.2rem;
  color: var(--primaryColor);
}

.sabatv-nav-home:hover,
.sabatv-nav-home.active {
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  border-color: var(--primaryColor);
  box-shadow: 0 4px 15px rgba(var(--primaryColorRGB), 0.2);
}

.sabatv-nav-home:hover i,
.sabatv-nav-home.active i {
  color: var(--whiteColor);
}

/* Category Groups */
.sabatv-nav-group {
  margin-block-end: 1.5rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px dashed var(--slate200);
}

.sabatv-nav-group:last-child {
  margin-block-end: 0;
  padding-block-end: 0;
  border-block-end: none;
}

.sabatv-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--slate400);
  margin-block-end: 0.85rem;
  padding-inline-start: 0.5rem;
}

.sabatv-group-title i {
  font-size: 1.1rem;
  color: var(--slate300);
}

.sabatv-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sabatv-group-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  color: var(--slate700);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 6px;
  transition: var(--mainTransition);
}

.sabatv-group-list a:hover,
.sabatv-group-list a.active {
  background-color: rgba(var(--primaryColorRGB), 0.04);
  color: var(--primaryColor);
  padding-inline-start: 1.5rem;
}

/* Badges */
.sabatv-badge-new {
  font-size: 0.65rem;
  font-weight: 800;
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  padding: 0.15rem 0.5rem;
  border-radius: 2rem;
}

/* Responsive Hide for Sidebar */
@media (max-width: 991px) {
  .sabatv-sidebar {
    display: none;
    /* Usually moved to a drawer/offcanvas on mobile */
  }
}

/* ==========================================================================
   SABA TV PLATFORM - MAIN CONTENT (PREMIUM UI / VOD AESTHETIC)
   ========================================================================== */

/* --- Layout Base --- */
.sabatv-main-wrapper {
  width: 100%;
}

.sabatv-main-wrapper .section-heading-title {
  font-size: clamp(1.25rem, 1.5vw, 1.75rem);
}
/* --- 1. Cinematic Hero Showcase --- */
.sabatv-hero-section {
  position: relative;
  width: 100%;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  background-color: var(--premiumDark);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translateZ(0);
  /* Hardware Acceleration */
}

.sabatv-hero-slider {
  width: 100%;
  aspect-ratio: 21/9;
  min-height: 480px;
}

.sabatv-hero-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Ken Burns Effect */
.sabatv-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 10s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.swiper-slide-active .sabatv-hero-bg {
  transform: scale(1);
}

.sabatv-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--premiumDarkRGB), 0.95) 0%, rgba(var(--premiumDarkRGB), 0.4) 50%, transparent 100%);
  z-index: 1;
}

/* Staggered Content Reveal */
.sabatv-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 4vw, 4rem);
  width: 100%;
  max-width: 850px;
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}

.swiper-slide-active .sabatv-hero-content {
  transform: translateY(0);
  opacity: 1;
}

.sabatv-hero-badges {
  display: flex;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}

.sabatv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: 2rem;
  color: var(--whiteColor);
  letter-spacing: 0.5px;
}

.sabatv-badge.live-badge {
  background: #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  animation: premiumLivePulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes premiumLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.sabatv-badge.exclusive-badge {
  background: var(--primaryColor);
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.3);
}

.sabatv-badge.category-badge {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sabatv-hero-title {
  color: var(--whiteColor);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1.35;
  margin-block-end: 1rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}

.sabatv-hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  line-height: 1.8;
  margin-block-end: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sabatv-hero-meta {
  display: flex;
  gap: 1.5rem;
  color: var(--slate300);
  font-size: 0.95rem;
  font-weight: 500;
  margin-block-end: 2.5rem;
}

.sabatv-hero-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sabatv-hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sabatv-btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 800;
  border-radius: 4rem;
  text-decoration: none;
  transition: var(--smoothTransition);
  will-change: transform;
}

.sabatv-btn-play.massive {
  background: var(--whiteColor);
  color: var(--slate900);
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
}

.sabatv-btn-play.massive:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.25);
  background: var(--slate50);
}

.sabatv-btn-play.massive.danger {
  background: #ef4444;
  color: var(--whiteColor);
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
}

.sabatv-btn-play.massive.danger:hover {
  background: #dc2626;
  box-shadow: 0 15px 35px rgba(239, 68, 68, 0.4);
}

.sabatv-btn-icon {
  all: unset;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.sabatv-btn-icon:hover {
  background: var(--whiteColor);
  color: var(--slate900);
  transform: translateY(-3px);
}

/* Custom Pagination */
.sabatv-hero-controls {
  position: absolute;
  inset-inline-end: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 10;
}

.sabatv-hero-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  width: 10px;
  height: 10px;
  transition: var(--smoothTransition);
}

.sabatv-hero-pagination .swiper-pagination-bullet-active {
  background: var(--whiteColor);
  width: 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- 2 & 4. Standard Video Cards (Swimlane & Grid) --- */
.sabatv-video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sabatv-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.sabatv-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  margin-block-end: 1rem;
  background-color: var(--slate100);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
  border: 1px solid var(--slate100);
  transform: translateZ(0);
}

.sabatv-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

.sabatv-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
}

.sabatv-thumb-overlay i {
  color: var(--whiteColor);
  font-size: 2.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transform: scale(0.8) translateY(10px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.sabatv-duration-badge {
  position: absolute;
  bottom: 0.75rem;
  inset-inline-end: 0.75rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  z-index: 3;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Hover States */
.sabatv-video-card:hover .sabatv-card-thumb img {
  transform: scale(1.06);
}

.sabatv-video-card:hover .sabatv-thumb-overlay {
  opacity: 1;
}

.sabatv-video-card:hover .sabatv-thumb-overlay i {
  transform: scale(1) translateY(0);
  background: var(--primaryColor);
  border-color: var(--primaryColor);
}

.sabatv-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--slate900);
  line-height: 1.6;
  margin-block-end: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.sabatv-video-card:hover .sabatv-card-title {
  color: var(--primaryColor);
}

.sabatv-card-meta {
  font-size: 0.8rem;
  color: var(--slate500);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 500;
}

.meta-cat {
  font-weight: 700;
}

.meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--slate300);
}

/* Swimlane Navigation Controls */
.sabatv-slider-nav {
  display: flex;
  gap: 0.5rem;
}

.sabatv-nav-circle {
  all: unset;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  color: var(--slate700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: var(--smoothTransition);
}

.sabatv-nav-circle:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.2);
}

/* --- 3. Saba Shorts (Vertical Format) --- */
.sabatv-shorts-container {
  background: linear-gradient(145deg, var(--slate50) 0%, var(--whiteColor) 100%);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.02);
}

.shorts-logo-icon {
  height: 28px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.sabatv-short-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--borderRadius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.1);
  transform: translateZ(0);
}

.short-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  background: var(--slate200);
}

.short-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.short-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.1) 50%, transparent 100%);
  z-index: 1;
  transition: opacity 0.4s ease;
}

.short-play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.short-content {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 1.25rem 1rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.short-title {
  color: var(--whiteColor);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.5;
  margin-block-end: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.short-views {
  color: var(--slate300);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sabatv-short-card:hover .short-thumb img {
  transform: scale(1.08);
}

.sabatv-short-card:hover .short-gradient {
  opacity: 0.9;
}

.sabatv-short-card:hover .short-play-icon {
  opacity: 1;
  transform: scale(1);
  background: var(--primaryColor);
}

/* --- 5. Audio & Music (Pure CSS Equalizer) --- */


.sabatv-audio-list-item {
  background: var(--slate50);
  border: 1px solid var(--slate100);
  border-radius: var(--borderRadius);
  transition: var(--smoothTransition);
  overflow: hidden;
}

.sabatv-audio-list-item:hover {
  background: var(--whiteColor);
  border-color: var(--slate300);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.05);
  transform: translateY(-3px);
}

.audio-link-wrapper {
  display: flex;
  align-items: center;
  padding: 0.85rem;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.audio-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}

.audio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.audio-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  color: var(--whiteColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  backdrop-filter: blur(4px);
  transition: var(--smoothTransition);
}

.sabatv-audio-list-item:hover .audio-thumb img {
  transform: scale(1.1);
}

.sabatv-audio-list-item:hover .audio-play-btn {
  background: var(--primaryColor);
  transform: scale(1.1);
}

.audio-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  z-index: 2;
}

.audio-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primaryColor);
  margin-block-end: 0.3rem;
}

.audio-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--slate800);
  line-height: 1.4;
  margin-block-end: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.sabatv-audio-list-item:hover .audio-title {
  color: var(--primaryColor);
}

.audio-meta {
  font-size: 0.8rem;
  color: var(--slate500);
  display: flex;
  gap: 1rem;
  font-weight: 500;
}

/* Pure CSS Animated Equalizer */
.audio-equalizer {
  position: absolute;
  inset-inline-end: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  pointer-events: none;
  z-index: 1;
}

.audio-equalizer span {
  width: 4px;
  background-color: var(--slate300);
  border-radius: 2px;
  animation: eq-play 1s infinite ease-in-out alternate;
  transition: background-color 0.4s ease;
}

.audio-equalizer span:nth-child(1) {
  animation-delay: 0.0s;
}

.audio-equalizer span:nth-child(2) {
  animation-delay: 0.3s;
}

.audio-equalizer span:nth-child(3) {
  animation-delay: 0.6s;
}

.audio-equalizer span:nth-child(4) {
  animation-delay: 0.9s;
}

@keyframes eq-play {
  0% {
    height: 6px;
  }

  100% {
    height: 24px;
  }
}

.sabatv-audio-list-item:hover .audio-equalizer span {
  background-color: var(--primaryColor);
}

/* --- 6. Photo Albums (Custom CSS Grid Bento) --- */
.sabatv-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 1rem;
}

.sabatv-bento-item {
  position: relative;
  border-radius: var(--borderRadius);
  overflow: hidden;
  transform: translateZ(0);
}

/* Golden Ratio Proportions */
.bento-large {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.bento-top-right {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.bento-bottom-right-1 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.bento-bottom-right-2 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.sabatv-bento-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bento-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.3) 50%, transparent 100%);
  z-index: 1;
  transition: background 0.4s ease;
}

.bento-content {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
}

.bento-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  margin-block-end: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bento-title {
  color: var(--whiteColor);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-bottom-right-1 .bento-title,
.bento-bottom-right-2 .bento-title {
  font-size: 1rem;
}

.sabatv-bento-item:hover img {
  transform: scale(1.06);
}

.sabatv-bento-item:hover .bento-gradient {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.5) 60%, transparent 100%);
}

/* --- 7. Teasers Compact Grid --- */
.sabatv-teaser-card {
  background: var(--whiteColor);
  border: 1px solid var(--slate100);
  border-radius: var(--borderRadius);
  padding: 0.75rem;
  transition: var(--smoothTransition);
}

.sabatv-teaser-card:hover {
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.05);
  border-color: var(--slate300);
  transform: translateY(-3px);
}

.sabatv-teaser-card a {
  text-decoration: none;
  display: block;
}

.teaser-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  margin-block-end: 0.75rem;
}

.teaser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.teaser-play {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--smoothTransition);
}

.teaser-play i {
  color: var(--whiteColor);
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: var(--smoothTransition);
}

.teaser-duration {
  position: absolute;
  bottom: 0.35rem;
  inset-inline-end: 0.35rem;
  background: rgba(15, 23, 42, 0.85);
  color: var(--whiteColor);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  z-index: 2;
}

.sabatv-teaser-card:hover .teaser-thumb img {
  transform: scale(1.05);
}

.sabatv-teaser-card:hover .teaser-play {
  opacity: 1;
}

.sabatv-teaser-card:hover .teaser-play i {
  transform: scale(1);
  background: var(--primaryColor);
}

.teaser-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--slate800);
  line-height: 1.5;
  margin-block-end: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.sabatv-teaser-card:hover .teaser-title {
  color: var(--primaryColor);
}

.teaser-cat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate500);
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
  .sabatv-hero-slider {
    aspect-ratio: 16/9;
    min-height: 400px;
  }

  /* Bento Grid Fallback for Tablets */
  .sabatv-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .bento-large {
    grid-column: 1 / 3;
    grid-row: span 1;
    aspect-ratio: 16/9;
  }

  .bento-top-right {
    grid-column: 1 / 3;
    grid-row: span 1;
    aspect-ratio: 21/9;
  }

  .bento-bottom-right-1 {
    grid-column: 1 / 2;
    grid-row: span 1;
    aspect-ratio: 4/3;
  }

  .bento-bottom-right-2 {
    grid-column: 2 / 3;
    grid-row: span 1;
    aspect-ratio: 4/3;
  }
}

@media (max-width: 767px) {
  .sabatv-hero-slider {
    aspect-ratio: auto;
    min-height: 500px;
  }

  .sabatv-hero-content {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .sabatv-hero-meta {
    justify-content: center;
  }

  .sabatv-btn-play.massive {
    width: 100%;
    justify-content: center;
  }

  /* Bento Grid Fallback for Mobile */
  .sabatv-bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-large,
  .bento-top-right,
  .bento-bottom-right-1,
  .bento-bottom-right-2 {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
  }
}

/* ==========================================================================
   SABA TV - SINGLE MEDIA VIEW (VIDEO, AUDIO, DETAILS & RELATED)
   ========================================================================== */

.sabatv-single-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: fadeIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 1. Video Player Section --- */
.sabatv-player-section {
  width: 100%;
  margin-block-end: 2rem;
}

.sabatv-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: var(--premiumDark);
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.15);
  border: 1px solid var(--slate200);
  transform: translateZ(0);
  /* Hardware Acceleration */

  /* Plyr.js Custom Theme Overrides */
  --plyr-color-main: var(--primaryColor);
  --plyr-video-background: var(--premiumDark);
  --plyr-menu-background: rgba(15, 23, 42, 0.95);
  --plyr-menu-color: var(--whiteColor);
  --plyr-font-family: var(--bodyFont);
  --plyr-control-radius: 8px;
}

.sabatv-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  outline: none;
}

/* --- 2. Custom Audio Player Section --- */
.sabatv-audio-section {
  position: relative;
  width: 100%;
  padding-block-end: 2rem;
}

.saba-custom-audio-player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(-275deg, var(--primaryColor) 0%, var(--secondColor) 100%);
  box-shadow: 0 15px 35px -5px rgba(var(--primaryColorRGB), 0.3);
  border-radius: 1.25rem;
  padding: 0.75rem;
  color: var(--whiteColor);
  direction: ltr;
  /* Media naturally progresses LTR */
  transition: var(--smoothTransition);
}

.saba-audio-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--borderRadiusLg);
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.saba-audio-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.saba-audio-btn:active {
  transform: scale(0.95);
}

.saba-audio-progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0.5rem;
}

.saba-audio-track {
  position: relative;
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: height 0.2s ease;
}

.saba-audio-track:hover {
  height: 8px;
}

.saba-audio-buffered {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.saba-audio-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  background: var(--whiteColor);
  border-radius: 10px;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.saba-audio-time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: monospace;
  white-space: nowrap;
  opacity: 0.9;
}

.saba-audio-settings-wrapper {
  position: relative;
}

.saba-audio-dropdown {
  min-width: 220px;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--borderRadiusLg) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
  padding: 0.75rem !important;
  border: none !important;
  direction: rtl;
  transform-origin: bottom left;
  animation: dropUpFade 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes dropUpFade {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.saba-audio-dropdown .dropdown-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--slate400);
  margin-block-end: 0.5rem;
  padding-inline: 0.5rem;
}

.speed-opt,
.download-opt {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--mainTransition);
  box-sizing: border-box;
  color: var(--slate700);
}

.speed-opt:hover,
.download-opt:hover {
  background: var(--slate50);
  color: var(--primaryColor);
  padding-inline-start: 1.25rem;
}

.speed-opt.active {
  background: rgba(var(--primaryColorRGB), 0.08);
  color: var(--primaryColor);
}

.saba-audio-dropdown hr {
  margin-block: 0.5rem;
  border-color: var(--slate200);
  opacity: 1;
}

/* --- 3. Media Header & Tags --- */
.sabatv-media-details {
  display: flex;
  flex-direction: column;
}

.sabatv-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.sabatv-tag-list .category-pill {
  background: var(--slate50);
  border: 1px solid var(--slate200);
  color: var(--slate600);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.sabatv-tag-list .category-pill:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.2);
}

.sabatv-media-title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 900;
  color: var(--slate900);
  line-height: 1.4;
  margin: 0;
  letter-spacing: -0.5px;
}

/* --- 4. Action Bar --- */
.sabatv-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--slate200);
}

.sabatv-publisher {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.publisher-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publisher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.publisher-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.publisher-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--slate900);
  margin: 0;
}

.publisher-date {
  font-size: 0.85rem;
  color: var(--slate500);
  font-weight: 500;
}

.sabatv-interactive-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-interactive {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  color: var(--slate700);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.6rem 1.25rem;
  border-radius: 3rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-interactive i {
  font-size: 1.1rem;
  color: var(--slate500);
  transition: color 0.3s ease;
}

.btn-interactive:hover,
.btn-interactive[aria-expanded="true"] {
  background: var(--whiteColor);
  border-color: var(--slate300);
  color: var(--slate900);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
}

.btn-interactive:hover i,
.btn-interactive[aria-expanded="true"] i {
  color: var(--slate800);
}

.btn-interactive.like-btn:hover {
  background: rgba(var(--primaryColorRGB), 0.05);
  border-color: rgba(var(--primaryColorRGB), 0.2);
  color: var(--primaryColor);
}

.btn-interactive.like-btn:hover i {
  color: var(--primaryColor);
}

/* --- 5. Share Dropdown --- */
.saba-share-menu {
  min-width: 280px;
  padding: 1.5rem !important;
  border-radius: var(--borderRadiusLg) !important;
  border: none !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15) !important;
  transform-origin: top left;
  animation: dropDownFade 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.share-menu-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--slate800);
  margin-block-end: 1.25rem;
}

.share-icons-grid {
  display: flex;
  justify-content: space-between;
  margin-block-end: 1.5rem;
}

.share-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--slate50);
  color: var(--slate600);
  font-size: 1.5rem;
  text-decoration: none;
  transition: var(--smoothTransition);
}

.share-icon-btn.telegram:hover {
  background: #0088cc;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
  transform: translateY(-3px);
}

.share-icon-btn.whatsapp:hover {
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
  transform: translateY(-3px);
}

.share-icon-btn.twitter:hover {
  background: #000000;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.share-icon-btn.linkedin:hover {
  background: #0a66c2;
  color: #fff;
  box-shadow: 0 4px 15px rgba(10, 102, 194, 0.3);
  transform: translateY(-3px);
}

.share-link-box {
  display: flex;
  align-items: stretch;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadius);
  overflow: hidden;
}

.share-link-box input {
  flex-grow: 1;
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--slate600);
  outline: none;
}

.share-link-box button {
  all: unset;
  background: var(--primaryColor);
  color: var(--whiteColor);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--mainTransition);
}

.share-link-box button:hover {
  background: var(--slate900);
}

/* --- 6. Collapsible Information Cards (Download & Embed) --- */
.sabatv-collapse-area .collapse {
  transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sabatv-info-card {
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-block-start: 1.5rem;
}

.info-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--slate900);
  margin-block-end: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-card-title i {
  color: var(--primaryColor);
  font-size: 1.25rem;
}

.info-card-desc {
  font-size: 0.9rem;
  color: var(--slate500);
  margin-block-end: 1rem;
}

.download-quality-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-download-quality {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 180px;
  padding: 0.85rem 1.25rem;
  background: var(--whiteColor);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadius);
  text-decoration: none;
  color: var(--slate800);
  transition: var(--smoothTransition);
}

.btn-download-quality .quality {
  font-weight: 800;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.btn-download-quality .size {
  font-weight: 500;
  color: var(--slate400);
  font-size: 0.8rem;
  margin-inline-start: 0.5rem;
}

.btn-download-quality i {
  color: var(--slate400);
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.btn-download-quality:hover {
  border-color: var(--primaryColor);
  background: var(--whiteColor);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(var(--primaryColorRGB), 0.1);
}

.btn-download-quality:hover .quality,
.btn-download-quality:hover i {
  color: var(--primaryColor);
}

/* Embed Code Box */
.embed-code-wrapper {
  position: relative;
  border-radius: var(--borderRadius);
  overflow: hidden;
}

.embed-code-wrapper textarea {
  width: 100%;
  background: var(--slate900);
  color: var(--slate300);
  border: 1px solid var(--slate800);
  border-radius: var(--borderRadius);
  padding: 1rem;
  padding-block-start: 4rem;
  font-family: monospace;
  font-size: 0.9rem;
  resize: none;
  outline: none;
  transition: border-color 0.3s ease;
}

.embed-code-wrapper textarea:focus {
  border-color: var(--primaryColor);
}

.btn-copy-code {
  all: unset;
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--whiteColor);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: var(--smoothTransition);
}

.btn-copy-code:hover {
  background: var(--primaryColor);
}

/* --- 7. Media Description --- */
.sabatv-media-description {
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: var(--borderRadiusLg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-block-start: 1.5rem;
}

.description-text {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--slate700);
  text-align: justify;
  margin: 0;
}

.description-tags {
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--slate200);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.tags-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--slate500);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hashtag-link {
  color: var(--primaryColor);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--mainTransition);
}

.hashtag-link:hover {
  color: var(--slate900);
}

/* --- 8. Related Videos Grid --- */
.sabatv-related-section {
  margin-block-start: 4rem;
}

.sabatv-video-card {
  background: var(--whiteColor);
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  padding: 0.5rem;
  transition: var(--smoothTransition);
}

.sabatv-video-card:hover {
  background: var(--slate50);
  border-color: var(--slate200);
}

.sabatv-card-link {
  text-decoration: none;
  color: inherit;
}

.sabatv-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  margin-block-end: 1rem;
  transform: translateZ(0);
}

.sabatv-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sabatv-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--smoothTransition);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sabatv-thumb-overlay i {
  color: var(--whiteColor);
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: var(--smoothTransition);
}

.sabatv-duration-badge {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-end: 0.5rem;
  background: rgba(15, 23, 42, 0.85);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  z-index: 2;
}

.sabatv-video-card:hover .sabatv-card-thumb img {
  transform: scale(1.08);
}

.sabatv-video-card:hover .sabatv-thumb-overlay {
  opacity: 1;
}

.sabatv-video-card:hover .sabatv-thumb-overlay i {
  transform: scale(1);
  background: var(--primaryColor);
}

.sabatv-card-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sabatv-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--slate900);
  line-height: 1.5;
  margin-block-end: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.sabatv-video-card:hover .sabatv-card-title {
  color: var(--primaryColor);
}

.sabatv-card-meta {
  font-size: 0.8rem;
  color: var(--slate500);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 500;
}

.meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--slate300);
}

/* --- Responsive Adjustments --- */
@media (max-width: 767px) {
  .sabatv-action-bar {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .sabatv-interactive-btns {
    width: 100%;
    overflow-x: auto;
    padding-block-end: 0.5rem;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .btn-interactive {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .saba-custom-audio-player {
    margin-inline: 0;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }

  .sabatv-media-title {
    font-size: 1.35rem;
  }

  .btn-download-quality {
    width: 100%;
  }
}

/* ==========================================================================
   SABA TV - SINGLE PHOTO GALLERY (CLEAN BEM ARCHITECTURE)
   ========================================================================== */

/* --- 1. Gallery Hero Cover --- */
.sabatv-gallery-hero {
  width: 100%;
  border-radius: var(--borderRadiusLg);
  overflow: hidden;
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.15);
  background-color: var(--premiumDark);
}

.gallery-hero-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  min-height: 380px;
  margin: 0;
  display: flex;
  align-items: flex-end;
}

.gallery-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.3) 60%, transparent 100%);
  z-index: 1;
}

.gallery-hero-caption {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  width: 100%;
}

.sabatv-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1.25rem;
}

.gallery-hero-title {
  color: var(--whiteColor);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.gallery-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  color: var(--slate300);
  font-size: 0.9rem;
  font-weight: 500;
  margin-block-start: 1rem;
}

.gallery-hero-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gallery-hero-meta i {
  color: var(--primaryColor);
}

/* --- 2. Action Bar (Clean CSS) --- */
.sabatv-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--slate200);
}

.sabatv-publisher {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.publisher-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publisher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.publisher-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.publisher-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--slate900);
  margin: 0;
}

.publisher-date {
  font-size: 0.85rem;
  color: var(--slate500);
}

/* --- 3. Dynamic Masonry Gallery --- */
.sabatv-photo-grid-section {
  margin-block-start: 2rem;
}

.sabatv-masonry-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 0.75rem;
}

.gallery-grid-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--borderRadius);
  overflow: hidden;
  transform: translateZ(0); 
  background: var(--slate100);
}

.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.span-row-2 { grid-row: span 2; }
.span-col-2 { grid-column: span 2; }

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.gallery-item-overlay i {
  color: var(--whiteColor);
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.gallery-grid-item:hover img { transform: scale(1.08); }
.gallery-grid-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-grid-item:hover .gallery-item-overlay i { transform: scale(1); background: var(--primaryColor); border-color: var(--primaryColor); }

/* --- 4. Related Albums Cards (Pure CSS) --- */
.sabatv-related-section {
  margin-block-start: 4rem;
}

.sabatv-album-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--whiteColor);
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  padding: 0.5rem;
  transition: var(--smoothTransition);
}

.sabatv-album-card:hover {
  background: var(--slate50);
  border-color: var(--slate200);
}

.sabatv-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sabatv-album-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3; /* Controlled in CSS, not inline */
  border-radius: 6px;
  overflow: hidden;
  margin-block-end: 1rem;
  transform: translateZ(0);
}

.sabatv-album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sabatv-photo-count {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-end: 0.5rem;
  background: rgba(15, 23, 42, 0.85);
  color: var(--whiteColor);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sabatv-album-card:hover .sabatv-album-thumb img { transform: scale(1.08); }
.sabatv-album-card:hover .sabatv-thumb-overlay { opacity: 1; }
.sabatv-album-card:hover .sabatv-card-title { color: var(--primaryColor); }

/* --- Responsive Layout Adjustments --- */
@media (max-width: 991px) {
  .sabatv-masonry-gallery {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      grid-auto-rows: 180px;
  }
}

@media (max-width: 767px) {
  .gallery-hero-figure {
      aspect-ratio: 16/9;
      min-height: auto;
  }
  .sabatv-masonry-gallery {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 150px;
  }
  .span-col-2 { grid-column: span 1; }
  .sabatv-action-bar {
      flex-direction: column;
      align-items: flex-start;
  }
}
/*================================ Cta Form ==============================*/

.cta-form {
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 1rem;
}

.cta-form .input-box {
  max-width: 300px;
}

.cta-form .default-button {
  box-shadow: none;
  padding-block: 5px;
}

/*============================ END OF Main Styles ============================*/

/**========================================================================
 *                              Premium Footer
 *========================================================================**/
.main-footer {
  background: var(--premiumDark);
  background-image: radial-gradient(circle at 100% 0%, rgba(var(--primaryColorRGB), 0.05) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(var(--whiteColorRGB), 0.02) 0%, transparent 50%);
  color: var(--slate400);
  border-top: 3px solid var(--primaryColor);
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}

.footer-top {
  padding-block: 5rem 4rem;
}

/*================================ Brand Section ==============================*/
.footer-brand {
  padding-inline-end: 2rem;
}

.footer-logo {
  max-width: 160px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 10px rgba(var(--whiteColorRGB), 0.1));
}

.footer-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  text-align: justify;
  color: var(--slate300);
  opacity: 0.8;
}

/*================================ Social Medias ==============================*/
.footer-socials {
  display: flex;
  gap: 1rem;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(var(--whiteColorRGB), 0.03);
  border: 1px solid rgba(var(--whiteColorRGB), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate50);
  font-size: 1.15rem;
  transition: var(--smoothTransition);
}

.footer-socials a:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
  transform: translateY(-4px);
  box-shadow: var(--premiumGlow);
}

/*================================ Widgets & Titles ==============================*/
.footer-title {
  color: var(--whiteColor);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-title::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--primaryColor);
  border-radius: 2px;
}

/*================================ Footer Links ==============================*/
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-links li a {
  color: var(--slate400);
  font-size: 0.95rem;
  transition: var(--mainTransition);
  display: inline-flex;
  align-items: center;
  position: relative;
}

.footer-links li a::before {
  content: '\f104';
  font-family: var(--fontIcons);
  font-size: 0.75rem;
  margin-inline-end: 0.5rem;
  color: var(--primaryColor);
  opacity: 0;
  transform: translateX(10px);
  transition: var(--smoothTransition);
}

.footer-links li a:hover {
  color: var(--whiteColor);
  transform: translateX(-5px);
}

.footer-links li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/*================================ Contact List ==============================*/
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(var(--primaryColorRGB), 0.08);
  color: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: var(--mainTransition);
}

.contact-item:hover .contact-icon {
  background: var(--primaryColor);
  color: var(--whiteColor);
  transform: scale(1.05);
}

.contact-text {
  color: var(--slate300);
  font-size: 0.95rem;
  line-height: 1.6;
}

.contact-text a {
  color: var(--slate300);
  transition: var(--mainTransition);
  display: inline-block;
}

.contact-text a:hover {
  color: var(--primaryColor);
}

/*================================ Footer Bottom ==============================*/
.footer-bottom {
  border-top: 1px solid rgba(var(--whiteColorRGB), 0.05);
  padding-block: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyright,
.developer {
  margin: 0;
  font-size: 0.9rem;
  color: var(--slate500);
}

.copyright strong {
  color: var(--slate300);
  font-weight: 500;
}

.developer a {
  color: var(--whiteColor);
  font-weight: 500;
  transition: var(--mainTransition);
}

.developer a:hover {
  color: var(--primaryColor);
}


/*============================ END OF Footer ============================*/

/**========================================================================
 *                           Fixed Elements
 *========================================================================**/
/*================================ Scroll Up Button ==============================*/

#scrollToTop {
  background-color: var(--textColorL1);
  border-radius: var(--borderRadius);
  transition: var(--mainTransition);
  border: 1px solid transparent;
  box-shadow: var(--boxShadow);
  inset-inline-start: 1rem;
  justify-content: center;
  color: var(--whiteColor);
  align-items: center;
  visibility: hidden;
  font-size: 1.25rem;
  aspect-ratio: 1/1;
  position: fixed;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  bottom: 1rem;
  height: 45px;
  z-index: 100;
  width: 45px;
}

#scrollToTop:hover {
  background-color: var(--primaryColor);
}

/*================================ Fixed Shortcut Widget ==============================*/

.fixed-shortcut-widget {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  width: 7.5rem;
  height: 7.5rem;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: var(--mainTransition);
}

.shortcut-widget-bg {
  position: absolute;
  border-radius: var(--borderRadiusLg);
  transform: rotate(90deg);
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, var(--primaryColor), var(--secondColor));
  box-shadow: inset 0px 0px 60px 5px rgba(255, 255, 255, 0.3);
  transition: var(--mainTransition);
  z-index: 1;
}

.fixed-shortcut-widget:hover .shortcut-widget-bg {
  z-index: -2;
}

.shortcut-center-logo {
  position: absolute;
  width: 55px;
  height: 55px;
  object-fit: contain;
  transition: var(--mainTransition);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid transparent;
  transition:
    all 0.4s ease-in-out,
    background-color 0.2s ease-in-out;
  text-decoration: none;
}

.shortcut-item:nth-child(1) {
  border-top-right-radius: var(--borderRadiusLg);
}

.shortcut-item:nth-child(2) {
  border-top-left-radius: var(--borderRadiusLg);
}

.shortcut-item:nth-child(3) {
  border-bottom-right-radius: var(--borderRadiusLg);
}

.shortcut-item:nth-child(4) {
  border-bottom-left-radius: var(--borderRadiusLg);
}

.shortcut-icon-fa {
  font-size: 1.5rem;
  opacity: 0;
  transition: 0.2s ease-in-out;
}

.shortcut-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0;
  transition: 0.2s ease-in-out;
}

.sys-item-2 .shortcut-icon-fa {
  color: var(--thirdColor);
}

.sys-item-4 .shortcut-icon-fa {
  color: var(--textColorL1);
}

/*---------------- Hover & Click (Mobile) Effects ----------------*/

.fixed-shortcut-widget:hover,
.fixed-shortcut-widget.is-open {
  width: 9rem;
  height: 9rem;
  cursor: pointer;
}

.fixed-shortcut-widget:hover .shortcut-widget-bg,
.fixed-shortcut-widget.is-open .shortcut-widget-bg {
  opacity: 0;
}

.fixed-shortcut-widget:hover .shortcut-center-logo,
.fixed-shortcut-widget.is-open .shortcut-center-logo {
  opacity: 0;
  z-index: -3;
  transform: scale(0.5);
}

.fixed-shortcut-widget:hover .shortcut-item,
.fixed-shortcut-widget.is-open .shortcut-item {
  margin: 0.25rem;
  border-radius: var(--borderRadius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--borderColor);
  background: rgba(255, 255, 255, 0.9);
}

.fixed-shortcut-widget:hover .shortcut-icon-fa,
.fixed-shortcut-widget:hover .shortcut-icon-img,
.fixed-shortcut-widget.is-open .shortcut-icon-fa,
.fixed-shortcut-widget.is-open .shortcut-icon-img {
  opacity: 1;
}

.sys-item-1 .shortcut-icon-fa {
  color: #d32f2f;
}

.sys-item-2 .shortcut-icon-fa {
  color: #1a1a2e;
}

.sys-item-3 .shortcut-icon-fa {
  color: #3f51b5;
}

.sys-item-4 .shortcut-icon-fa {
  color: #2e7d32;
}

.fixed-shortcut-widget.is-open .sys-item-1:hover,
.fixed-shortcut-widget:hover .sys-item-1:hover {
  background-color: #d32f2f;
}

.fixed-shortcut-widget.is-open .sys-item-2:hover,
.fixed-shortcut-widget:hover .sys-item-2:hover {
  background-color: #1a1a2e;
}

.fixed-shortcut-widget.is-open .sys-item-3:hover,
.fixed-shortcut-widget:hover .sys-item-3:hover {
  background-color: #3f51b5;
}

.fixed-shortcut-widget.is-open .sys-item-4:hover,
.fixed-shortcut-widget:hover .sys-item-4:hover {
  background-color: #2e7d32;
}

.fixed-shortcut-widget.is-open .shortcut-item:hover .shortcut-icon-fa,
.fixed-shortcut-widget:hover .shortcut-item:hover .shortcut-icon-fa {
  color: var(--whiteColor);
}

.fixed-shortcut-widget.is-open .shortcut-item:hover .shortcut-icon-fa,
.fixed-shortcut-widget:hover .shortcut-item:hover .shortcut-icon-fa {
  color: var(--whiteColor);
}

.fixed-shortcut-widget.is-open .shortcut-item:hover .shortcut-icon-img,
.fixed-shortcut-widget:hover .shortcut-item:hover .shortcut-icon-img {
  filter: brightness(0) invert(1);
}

@media (max-width: 575px) {
  .fixed-shortcut-widget {
    transform: scale(0.85);
    inset-inline-end: 0.25rem;
    transform-origin: bottom right;
  }
}


/**========================================================================
 *                           Modals & Overlays
 *========================================================================**/

/*================================ Search Modal ==============================*/
.premium-search-modal {
  background-color: rgba(var(--premiumDarkRGB), 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.premium-search-modal .modal-content {
  background-color: transparent;
  border: none;
  box-shadow: none;
  height: 100vh;
}

/* Close Button */
.modal-close-btn {
  all: unset;
  position: absolute;
  top: 2.5rem;
  inset-inline-end: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate400);
  cursor: pointer;
  transition: var(--smoothTransition);
  z-index: 10;
}

.modal-close-btn i {
  font-size: 2.5rem;
  transition: var(--mainTransition);
}

.modal-close-btn span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.modal-close-btn:hover {
  color: var(--primaryColor);
  transform: translateY(-5px);
}

.modal-close-btn:hover i {
  transform: rotate(90deg);
}

/* Search Form Wrapper */
.search-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  transform: translateY(30px);
  opacity: 0;
  transition: var(--smoothTransition);
  transition-delay: 0.2s;
}

.premium-search-modal.show .search-wrapper {
  transform: translateY(0);
  opacity: 1;
}

.search-form {
  display: flex;
  align-items: center;
  position: relative;
  border-block-end: 2px solid rgba(var(--whiteColorRGB), 0.1);
  padding-block-end: 1rem;
  margin-block-end: 2rem;
  transition: border-color 0.3s ease;
}

.search-form:focus-within {
  border-block-end-color: var(--primaryColor);
}

.search-icon {
  font-size: 2rem;
  color: var(--slate500);
  margin-inline-end: 1rem;
}

.search-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: var(--whiteColor);
  font-size: clamp(1.125rem, 2vw, 2rem);
  font-weight: 700;
  padding: 0;
  outline: none;
  box-shadow: none;
}

.search-input:focus,
.search-input:hover {
  background: transparent;
  border: none;
  color: var(--whiteColor);
}

.search-input::placeholder {
  color: rgba(var(--whiteColorRGB), 0.75);
  font-weight: 300;
}

.search-submit-btn {
  all: unset;
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 3rem;
  cursor: pointer;
  transition: var(--mainTransition);
  margin-inline-start: 1rem;
}

.search-submit-btn:hover {
  background-color: var(--whiteColor);
  color: var(--primaryColor);
  box-shadow: var(--premiumGlow);
}

/* Search Suggestions */
.search-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.suggestion-label {
  color: var(--slate500);
  font-size: 0.9rem;
}

.suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.suggestion-tags a {
  color: var(--slate300);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  background: rgba(var(--whiteColorRGB), 0.05);
  border: 1px solid rgba(var(--whiteColorRGB), 0.1);
  transition: var(--mainTransition);
}

.suggestion-tags a:hover {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--whiteColor);
}

/*================================ Mobile Drawer Modal ==============================*/
.mobile-drawer-modal {
  padding: 0 !important;
}

.mobile-drawer-modal .modal-dialog {
  margin: 0;
  margin-inline-start: auto;
  max-width: 340px;
  width: 100%;
  height: 100%;
}

html[dir="rtl"] .mobile-drawer-modal.fade .modal-dialog {
  transform: translateX(100%);
  transition: var(--smoothTransition);
}

html[dir="rtl"] .mobile-drawer-modal.show .modal-dialog {
  transform: translateX(0);
}

.mobile-drawer-modal .modal-content {
  border: none;
  border-radius: 0;
  height: 100%;
  background-color: var(--whiteColor);
  display: flex;
  flex-direction: column;
}

/* Drawer Header */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-block-end: 1px solid var(--slate100);
}

.drawer-logo img {
  max-height: 45px;
  width: 100%;
}

.drawer-close-btn {
  all: unset;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--slate50);
  color: var(--slate600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--mainTransition);
}

.drawer-close-btn:hover {
  background: var(--primaryColor);
  color: var(--whiteColor);
  transform: rotate(90deg);
}

/* Drawer Body & Search */
.drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.drawer-search form {
  position: relative;
  margin-block-end: 2rem;
}

.drawer-search input {
  width: 100%;
  background: var(--slate50);
  border: 1px solid var(--slate200);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem 0.85rem 3rem;
  font-size: 0.95rem;
  color: var(--textColorL1);
  transition: var(--mainTransition);
  outline: none;
}

.drawer-search input:focus {
  border-color: var(--primaryColor);
  background: var(--whiteColor);
  box-shadow: 0 0 0 4px rgba(var(--primaryColorRGB), 0.1);
}

.drawer-search button {
  all: unset;
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate400);
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--mainTransition);
}

.drawer-search input:focus+button {
  color: var(--primaryColor);
}

/* Drawer Navigation */
.drawer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drawer-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  color: var(--slate800);
  font-weight: 600;
  font-size: 1rem;
  transition: var(--mainTransition);
}

.drawer-nav-link.active,
.drawer-nav-link:hover {
  background-color: rgba(var(--primaryColorRGB), 0.05);
  color: var(--primaryColor);
}

.accordion-icon {
  font-size: 0.75rem;
  color: var(--slate400);
  transition: var(--mainTransition);
}

/* Drawer Accordion Implementation */
.drawer-accordion-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: var(--smoothTransition);
}

.drawer-nav-item.is-open .drawer-accordion-menu {
  max-height: 300px;
}

.drawer-nav-item.is-open .accordion-icon {
  transform: rotate(180deg);
  color: var(--primaryColor);
}

.accordion-link {
  display: block;
  padding: 0.6rem 1rem 0.6rem 2rem;
  color: var(--slate500);
  font-size: 0.9rem;
  position: relative;
  transition: var(--mainTransition);
}

.accordion-link::before {
  content: '';
  position: absolute;
  inset-inline-start: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--slate300);
  transition: var(--mainTransition);
}

.accordion-link:hover {
  color: var(--primaryColor);
  padding-inline-start: 2.5rem;
}

.accordion-link:hover::before {
  background-color: var(--primaryColor);
  width: 12px;
  border-radius: 2px;
}

/* Drawer Footer */
.drawer-footer {
  padding: 1.5rem;
  background: var(--slate50);
  border-block-start: 1px solid var(--slate200);
}

.drawer-socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-block-end: 1rem;
}

.drawer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--whiteColor);
  color: var(--slate600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: var(--mainTransition);
}

.drawer-socials a:hover {
  background: var(--primaryColor);
  color: var(--whiteColor);
  transform: translateY(-3px);
  box-shadow: var(--premiumGlow);
}

.drawer-copyright {
  text-align: center;
  font-size: 0.8rem;
  color: var(--slate400);
  margin: 0;
}

/**========================================================================
 *                           Responsive
 *========================================================================**/

/*================================ Responsive Adjustments ==============================*/
@media (max-width: 1199px) {
  .nav-list {
    gap: 0.75rem;
  }

  .nav-link {
    font-size: 0.85rem;
  }
}

@media (max-width: 991px) {
  .top-bar {
    display: none;
  }

  .header-content {
    height: 70px !important;
  }

  .footer-brand {
    padding-inline-end: 0;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .search-input {
    font-size: 1.5rem;
  }

  .search-submit-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
  }

  .modal-close-btn {
    top: 1.5rem;
    inset-inline-end: 1.5rem;
  }

  .modal-close-btn i {
    font-size: 2rem;
  }

  .footer-top {
    padding-block: 4rem 3rem;
  }

  .footer-title {
    margin-bottom: 1.25rem;
  }
}