@font-face {
    font-family: 'RudawRegular2';
    src: url('../fonts/rudawregular2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Harmattan';
    src: url('../fonts/harmattan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'NewRudaw';
    src: url('../fonts/rudawregular2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Colour palette */
:root {
  --sky: #39B7FF;      /* Light sky blue used on hero backgrounds */
  --sun: #FFB32B;      /* Warm yellow/orange for primary buttons */
  --coral: #FF6B6B;    /* Coral red used on cards and highlights */
  --teal: #23C8C2;     /* Fresh teal for accents */
  --navy: #000000;     /* Deep navy for strong text and icons */
  --ink: #15314A;      /* Default body text colour */
  --bg: #FFFFFF;       /* Background colour for pages */
  --border: #e6eef6;   /* Light grey for subtle borders */
  --shadow: 0 8px 24px rgba(11, 43, 90, 0.08); /* Soft drop shadow */
  --radius: 12px;      /* Base radius for elements */
  --ease: cubic-bezier(.2, .8, .2, 1); /* Easing used for animations */
}




/* Basic reset */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;

  overflow-x: hidden;
}

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  /* Use the imported Poppins font for a modern look.  Fall back to system
     fonts if unavailable. */
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);

}

/* Images and video elements should never exceed their container.
   Setting a global max-width and auto height makes media
   responsive by default across the entire site. */
img, video {
  max-width: 100%;
  height: auto;
}

/* Container used to centre content and apply max-width constraints */
.container {
  /* Centre content and restrict the width on large displays.  The max-width
     ensures the layout does not stretch excessively on very wide
     monitors. */
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (max-width: 600px) {
  .container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Global responsive typography and spacing adjustments.  These media
   queries progressively reduce font sizes, increase tap targets on mobile
   devices and adjust padding to maintain comfortable spacing on smaller
   screens. */
@media (max-width: 1024px) {
  body {
    font-size: 15px;
  }
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  .btn {
    height: 42px;
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 13px;
  }
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1rem;
  }
  .btn {
    height: 48px;
    padding: 0 20px;
    font-size: 0.95rem;
  }
}

/* Pages that display cart, delivery and checkout details should occupy
   the full available width while remaining centred on large displays.
   Use a maximum width consistent with the container for PCs (1200px)
   and allow full width on smaller screens. */
.delivery-page,
.cart-page,
.checkout-page {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
/* Header styles */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0px 9px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.06s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--sun);
  color: #212121;
}

.btn-primary:hover {
  background: #ffca55;
}

.btn-outline {
  border-color: var(--border);
  background: #fff;
  color: var(--navy);
}

.btn-outline:hover {
  border-color: #cbd5e1;
}

/* -------------------------------------------------------------------------- */
/* Photo upload tips styling                                                  */

/* Container for the tips section.  Uses a soft pastel background and
   dashed border to highlight the upload guidelines. */
.photo-tips {
  background: #fdf1ff;
  border: 2px dashed #e4bdf3;
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
/* Title for the tips section.  Uppercase text with subtle letter spacing. */
.photo-tips-title {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  color: #333;
  letter-spacing: 0.5px;
}
/* Layout grid for tip items.  Wraps items and centers them horizontally. */
.tips-grid {
  /* Use a fixed 3-column grid so that two rows of three images
     appear consistently.  This prevents the 4/2 arrangement and
     ensures symmetrical layout regardless of available width. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  justify-items: center;
}
/* Base wrapper for each tip image.  Circular cropping with overflow hidden. */
.tip-wrapper {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
}
.tip-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
/* Icon overlay for each tip item.  Positioned at the top right, with
   contrasting colours depending on the tip type. */
.tip-icon {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
}
/* Colour variants for good and bad tip backgrounds. */
.tip-bad .tip-icon {
  background: #e74c3c;
}
.tip-good .tip-icon {
  background: #2ecc71;
}
/* Soft tinted overlay behind the image to colour‑code tips.  Use pseudo
   elements to avoid modifying the image directly. */
.tip-bad::before,
.tip-good::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
}
.tip-bad::before {
  background: rgba(231, 76, 60, 0.12);
}
.tip-good::before {
  background: rgba(46, 204, 113, 0.12);
}

/* -------------------------------------------------------------------------- */
/* Guest My Books button styling                                             */

/* Provide a distinctive style for the My Books button shown to guests.  This
   uses a neutral background with a subtle border and hover effects. */
.guest-my-books {
  background: #fff;
  border: 2px solid var(--border);
  color: var(--navy);
  padding: 0 12px;
  height: 36px;
  line-height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.guest-my-books:hover {
  background: var(--border);
  color: var(--navy);
}

/* Icon button for menu/close icons */
.icon-btn {
  height: 40px;
  width: 39px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.06s var(--ease);
}

/* Payment QR display */
.payment-qr {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.payment-qr img {
  max-width: 240px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/*
 * Payment app button styling
 *
 * The FIB mobile apps provide deep links that allow the user to complete
 * payment outside the web interface.  When these links are available a
 * “Pay in FIB App” button is shown below the QR code.  Define a modest
 * styling for this button so it stands out yet remains consistent with
 * other action buttons.  The green tone echoes success and payment
 * confirmation colours elsewhere on the site.
 */
.payment-app .btn-success {
  display: inline-block;
  background-color: #10b981; /* emerald green */
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}
.payment-app .btn-success:hover {
  background-color: #059669; /* darker green on hover */
}

/* Status indicator styling for payment progress
 *
 * The checkout page displays the current payment status (“PENDING”,
 * “PAID”, etc.) next to a bold label.  Apply spacing and weight so
 * that the status appears distinct from surrounding text.  The .paid
 * class, inserted by JavaScript when the payment completes, colours
 * the tick mark green.  You can further customise additional status
 * colours here if desired.
 */
.status {
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 4px;
}
.status .paid {
  color: #10b981;
  margin-left: 4px;
}

/* Global success button styling
 *
 * Some payment providers (like FIB) present an external app link as a
 * primary action.  Define a generic .btn-success class so that these
 * links adopt a consistent look and feel across the site.  The green
 * tones harmonise with the status indicators and convey progression.
 */
.btn-success {
  display: inline-block;
  background-color: #10b981;
  color: #ffffff;
  padding: 6px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.btn-success:hover {
  background-color: #059669;
}

/* Countdown timer for payment status checks */
.payment-timer {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #6c757d;
}

/*
 * Footer styling
 *
 * A modern, responsive footer that displays branding on the left and
 * quick links/app icons on the right.  On narrow screens the
 * elements stack vertically and centre align for improved
 * readability.  Colours complement the primary header colours and
 * maintain consistency across the site.
 */
/* ---------- Kurdolla Responsive Footer ---------- */
.kdft-footer {
  background: #ffdb99;
  padding: 24px 0;
  margin-top: 40px;
  border-top: 1px solid var(--border, #d9d9d9);
  color: #333;
}

.kdft-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100px;
  height: 1px;
  width: 100%;
  background: #d9d0b0;
}

.kdft-content {
  max-width: 1250px;
  margin: 0 auto;
  padding: 30px 40px 40px 40px;
}

/* Top row */
.kdft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kdft-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.kdft-logo img { height: 42px; }
.kdft-logo .kdft-logo-text { font-size: 26px; font-weight: 600; }

/* Social icons (always visible) */
.kdft-media {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kdft-icon {
  font-size: 2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.kdft-icon.tiktok   { color: #010101; }
.kdft-icon.facebook { color: #1877f2; }
.kdft-icon.youtube  { color: #ff0000; }
.kdft-icon.instagram{ color: #e1306c; }
.kdft-icon.snapchat { color: #fffc00; text-shadow: 0 0 2px #000; }
.kdft-icon:hover    { transform: scale(1.1); filter: brightness(1.15); }

/* Link columns */
.kdft-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.kdft-box {
  flex: 1 1 20%;
  min-width: 170px;
}
.kdft-link-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  position: relative;
}
.kdft-link-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 35px;
  background: #333;
}
.kdft-box li { list-style: none; margin: 8px 0; }
.kdft-box a,
.kdft-box span {
  color: #333;
  font-size: 15px;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.kdft-box a:hover { opacity: 1; text-decoration: underline; }

/* Subscribe form */
.kdft-input-box {
  margin-right: 55px;
}
.kdft-input-box input.kdft-input {
  height: 40px;
  width: 100%;
  border: 2px solid #d5c28a;
  background: #fff2cc;
  border-radius: 4px;
  padding: 0 14px;
  font-size: 14px;
  color: #333;
  margin-top: 6px;
}
.kdft-input-box button.kdft-button {
  height: 42px;
  width: 100%;
  background: #a0600b;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.kdft-input-box button.kdft-button:hover {
  background: #824d08;
}

/* Bottom bar */
.kdft-bottom {
  background: #ffe7a5;
}
.kdft-bottom-inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.kdft-bottom-text,
.kdft-bottom-text a {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  opacity: 0.85;
  text-decoration: none;
}
.kdft-bottom-text a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* -------- Responsive breakpoints -------- */
@media (max-width: 768px) {
  /* Stack columns on top of each other */
  .kdft-links {
    flex-direction: column;
  }
  .kdft-box,
  .kdft-input-box {
    width: 100%;
    flex-basis: 100%;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .kdft-top {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .kdft-logo .kdft-logo-text {
    font-size: 22px;
  }
  .kdft-icon {
    font-size: 1.6rem;
    width: 36px;
    height: 36px;
  }
  .kdft-bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
}


/* Removed legacy payment-option styling.  See updated styles below for
   flex-based layout and provider colours. */

/* Order detail page styling */
.order-detail-page {
  background: #fff;
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.order-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.order-detail-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.order-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px 0;
  padding-bottom: 20px;
  position: relative;
}
.order-status-bar .step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 4px;
}
.order-status-bar .step .circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  margin: 0 auto 8px;
}
.order-status-bar .step.completed .circle {
  /* Use a purple tone to align with the order status bar design */
  background: #a76cc7;
}
.order-status-bar .step .title {
  font-weight: 600;
  margin-bottom: 4px;
}
.order-status-bar .step .desc {
  font-size: 0.75rem;
  color: #6c757d;
}
/* Connecting lines between steps */
.order-status-bar .step::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--border);
  z-index: -1;
}
.order-status-bar .step.completed::after {
  background: #a76cc7;
}

.order-detail-body {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}
.order-items, .order-side {
  flex: 1 1 300px;
}
.order-item-card {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.order-item-card img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.order-item-info .item-title {
  font-weight: 600;
}
.order-item-info .item-meta {
  font-size: 0.75rem;
  color: #6c757d;
}
.order-item-card .item-price {
  margin-left: auto;
  font-weight: 600;
}
.shipping-box, .summary-box {
  background: #f8f8f8;
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.summary-box p {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}
.summary-box p strong {
  font-weight: 700;
}
@media (max-width: 768px) {
  .order-detail-body {
    flex-direction: column;
  }
}

/* Orders page styles */
.my-orders-page .orders-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Base order card styling */
.order-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Header bar for order cards */
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(144, 69, 193, 0.1);
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #604280;
}
.order-card-header .order-count {
  margin-right: auto;
}
.order-card-header .view-link {
  text-decoration: none;
  color: #604280;
  font-weight: 600;
}
.order-card-header .view-link:hover {
  text-decoration: underline;
}

/* Body section containing image and details */
.order-card-body {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 16px;
}
.order-card-body img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.order-info {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.order-info .order-row {
  width: 50%;
  margin-bottom: 4px;
}
.order-info .order-label {
  font-weight: bold;
  display: block;
}
.order-info .order-value {
  color: var(--navy);
}

@media (max-width: 600px) {
  .order-card-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .order-card-body img {
    width: 100%;
    height: auto;
  }
  .order-info .order-row {
    width: 100%;
  }
}

.icon-btn:hover {
  background: rgba(57, 183, 255, 0.08);
  border-color: rgba(57, 183, 255, 0.35);
}

.icon-btn:active {
  transform: translateY(1px);
}

/* Drawer and overlay (mobile navigation) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ease);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: #fff;
  box-shadow: var(--shadow);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.28s var(--ease);
}

.drawer.show {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.drawer-head h2 {
  margin: 0;
  font-size: 18px;
  color: var(--navy);
}

.nav-list {
  list-style: none;
  padding: 12px;
  margin: 0;
  display: grid;
  gap: 8px;
}

.nav-list .nav-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--navy);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nav-list .nav-link:hover {
  background: rgba(35, 200, 194, 0.12);
  border-color: rgba(35, 200, 194, 0.35);
}

.drawer-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
}

/* Desktop breakpoint: show inline nav and hide drawer */
@media (min-width: 992px) {
  .overlay,
  .drawer {
    display: none !important;
  }
}

/* Form styling for login and register pages */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 40px 16px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}

.auth-card h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--navy);
}

.auth-card .input-group {
  margin-bottom: 14px;
}

.auth-card label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--navy);
}

.auth-card input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}

.auth-card input:focus {
  outline: none;
  border-color: rgba(35, 200, 194, 0.35);
  box-shadow: 0 0 0 2px rgba(35, 200, 194, 0.2);
}

.auth-card .error {
  color: #d3362d;
  font-size: 13px;
  margin-top: 4px;
}

.auth-card .helper {
  font-size: 14px;
  margin-top: 16px;
  text-align: center;
  color: var(--navy);
}

.auth-card .helper a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}

.auth-card .helper a:hover {
  text-decoration: underline;
}

/* Error state disabling the register button */
.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .auth-wrapper {
    padding-top: 60px;
  }
}

/* ------------------------------------------------------------------ */
/*  Utility classes to replace inline styles from PHP templates         */
/*  These classes provide common alignment, spacing and colouring      */
/*  without requiring inline style attributes in the markup.           */

/* Bold username display in the header */
.username-display {
  font-weight: 600;
}

/* Error text colour matching the existing design */
.error-text {
  color: #d3362d;
}

/* Account page layout */
.account-container {
  padding: 24px 0;
}

/* Grid layout for profile and address sections on larger screens */
.account-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.profile-section,
.address-section {
  flex: 1 1 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.avatar-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  background: #e0e7ef;
  border-radius: 50%;
}
.profile-info {
  flex: 1;
}
.profile-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.profile-email {
  margin: 4px 0 0;
  color: #6b7280;
}
.profile-edit-form .form-actions,
.address-section .form-actions {
  display: flex;
  gap: 8px;
  margin-top: 33px;
}

/* Address list */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.address-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.address-info {
  font-size: 14px;
  line-height: 1.4;
}
.address-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.address-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-size: 14px;
}
/* Differentiate edit and delete buttons */
.address-actions .edit-address-btn {
  color: var(--sun);
}
.address-actions .delete-address-btn {
  color: var(--coral);
}
.address-actions .edit-address-btn:hover {
  color: var(--coral);
}
.address-actions .delete-address-btn:hover {
  color: var(--sun);
}
.no-address {
  color: #6b7280;
  font-style: italic;
  margin-bottom: 12px;
}

/* Spacing adjustments for address form and button */
#addressFormWrapper {
  margin-top: 12px;
  margin-bottom: 12px;
}
#addAddressBtn {
  margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .account-grid {
    flex-direction: column;
  }
  .profile-section,
  .address-section {
    flex: 1 1 auto;
  }
}

/* Center text horizontally */
.center {
  text-align: center;
}

/* Margin utilities */
.mb-12 {
  margin-bottom: 12px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-16 {
  margin-top: 16px;
}

/* Full width buttons */
.btn-full {
  width: 100%;
}

/* Home page layout classes */
.home-main {
  padding: 80px 16px;
  text-align: center;
}

.home-title {
  font-size: 2.4rem;
  color: var(--navy);
  margin-bottom: 16px;
}

.home-subtitle {
  font-size: 1.1rem;
  color: var(--ink);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Utility colour classes */
.text-navy {
  color: var(--navy);
}

/* -------------------------------------------------------------------------- */
/* Additional styles for user menu, currency selector and books grid           */
/* These classes support the new header actions and the My Books page.        */

/* Language selector styling */
/*
  Style the language dropdown similar to the original currency selector.  We
  intentionally avoid the `cursor: not-allowed` property so that users can
  interact with the select element.  The custom arrow SVG ensures a
  consistent appearance across browsers.
*/
.currency-selector select {
  appearance: none;
  background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polyline points="6 8 10 12 14 8" fill="none" stroke="%23000" stroke-width="2"/></svg>') no-repeat right 0.8em center/0.6em;
  padding: 6px 28px 6px 10px;
  font-size: 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--navy);
  cursor: pointer;
}


/* Books page grid */
.my-books-page {
  padding-top: 32px;
  padding-bottom: 32px;
}

/*
 * Responsive grid for the My Books page
 *
 * Instead of using a flexbox with fixed widths, switch to a CSS grid that
 * automatically adapts to the available viewport.  The grid will create as
 * many columns as fit, with each card occupying at least 250px of width
 * while growing to fill the remaining space.  This ensures that the
 * cards are distributed evenly on large screens and stacked neatly on
 * smaller devices without overflow.
 */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}


/* My Books cards layout
 * Use the original proportions: three cards per row on large screens,
 * two on medium screens, and full width on small screens.  Cards
 * automatically flex to fill available space while maintaining
 * consistent gaps defined in the books-grid container. */
.my-book-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Book cover images scale with the card width; heights adapt automatically */
.my-book-card img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.my-book-card img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


/* Responsive breakpoints for books grid */
@media (max-width: 600px) {
  .my-book-card {
    height: auto !important;
  }
  .my-book-card img {
    height: auto !important;
    width: 100%;
    object-fit: cover;
  }
}

.my-book-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.my-book-card h3 {
  font-size: 1.1rem;
  margin-top: 12px;
  margin-bottom: 4px;
  color: var(--navy);
}

.my-book-info {
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 12px;
}

.my-book-actions {
  margin-top: auto;
}

.btn-secondary {
  background: #f0f0f0;
  border: 2px solid #e0e0e0;
  color: var(--navy);
}

.btn-secondary:hover {
  background: #e6e6e6;
}

/* -------------------------------------------------------------------------- */
/* Account and Orders pages                                                   */

/* Generic padding for account and orders pages */
.my-account-page,
.my-orders-page {
  padding-top: 32px;
  padding-bottom: 32px;
  max-width: 75vw;
}

/* Form styling for account page */
.my-account-page .input-group {
  margin-bottom: 14px;
}

.my-account-page label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--navy);
}

.my-account-page input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}

/* Ensure consistent sizing for inputs across forms */
.form-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

/* -------------------------------------------------------------------------- */
/* Messages */

/* Warning displayed when a user attempts to access a story that they do not own */
.not-owner-msg {
  background: #ffe1e1;
  color: #a30000;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center;
  font-weight: 600;
}


/* ---------- HERO ---------- */
.hero{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:5rem 8%; gap:3rem;
}
.text-side{flex:1 1 45%; min-width:300px}
.text-side h1{font-size:2.6rem; line-height:1.1; margin:0 0 1rem; font-weight:800; opacity:0; animation:fadeIn 800ms ease-out forwards}
.text-side p{color:#5e4b44; font-size:1.1rem; margin:0 0 1.6rem; opacity:0; transform:translateY(14px); animation:fadeUp 650ms .15s ease-out forwards}
.sb-btn{
  display:inline-block; background:#ff7b00; color:#fff; text-decoration:none; font-weight:700;
  padding:.9rem 1.6rem; border-radius:999px; box-shadow:0 12px 28px rgba(0,0,0,.12); transition:transform .15s ease, box-shadow .2s ease, background .2s;
  opacity:0; transform:translateY(14px); animation:fadeUp 650ms .3s ease-out forwards;
}
.sb-btn:hover{transform:translateY(-2px); box-shadow:0 22px 40px rgba(0,0,0,.18); background:#e06f00}
.sub{display:block; margin-top:.8rem; color:#ff7b00}

.books{flex:1 1 45%; display:flex; justify-content:center; gap:2rem}
.col{display:flex;flex-direction:column;gap: 1.2rem;}
.col img{
  width: 180px;
  border-radius:18px;
  box-shadow:-6px 8px 16px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(30px) rotateY(-5deg);
  animation:fadeUp 700ms ease forwards;
}
.left img:nth-child(1){animation-delay:.25s; margin-top:5rem}
.left img:nth-child(2){animation-delay:.4s}
.mid  img:nth-child(1){animation-delay:.35s; margin-top:2rem}
.mid  img:nth-child(2){animation-delay:.5s}
.right img:nth-child(1){animation-delay:.45s}
.right img:nth-child(2){animation-delay:.6s;margin-top: 0rem;}

/* ---------- SHELVES ---------- */
.shelf{padding:0}
.shelf-inner{
  padding:3.2rem 8%;
  max-width: 96vw;
  margin:0 auto;
}
.eyebrow{
  letter-spacing:.22em; text-transform:uppercase; color:#7a7a7a; font-size:.78rem; margin:0 0 .4rem;
}
.eyebrow--light{ color:#ffe4ee; opacity:.9; }
.shelf-title{
  font-size:1.9rem; line-height:1.2; margin:.2rem 0 1.4rem; font-weight:700;
}

/* backgrounds to clearly separate sections */
.shelf--mint{
  background:
    radial-gradient(60rem 60rem at -10% -10%, #e6fff5 0%, #e6fff500 55%),
    linear-gradient(#f6fff9, #f8fff9);
}
.shelf--lavender{
  background:
    radial-gradient(60rem 60rem at 110% -10%, #efe6ff 0%, #efe6ff00 55%),
    linear-gradient(#fbf8ff, #fbf8ff);
}

/* grid */
.card-grid{
  display:grid; gap:28px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items: stretch;                 /* ensure items fill the row height */
}

/* card */
.book-card{
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease;
  position:relative;

  /* === NEW: equal height + pinned CTA === */
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:430px;                     /* tweak for your design */
}
.book-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(0,0,0,.18) }
.book-card:focus-within{ outline:2px solid #0000; box-shadow:0 0 0 3px #e5e5ff, 0 22px 40px rgba(0,0,0,.18) }



/* thumbnail */
.thumb{ aspect-ratio: 1 / 1; overflow:hidden; background:#f3f3f3; position:relative; flex:0 0 auto; }
.thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .35s ease, filter .2s ease;
}
.book-card:hover .thumb img{ transform:scale(1.06); filter:saturate(1.05) }

/* meta */
.book-title{
  font-size:1.05rem; margin:.85rem .95rem .25rem; line-height:1.35; font-weight:700;

  /* NEW: clamp + reserve height for stability */
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2;
  min-height:calc(1.35 * 1.05rem * 2);
}
.book-sub{
  color:#6a6a6a; font-size:.95rem; margin:0 .95rem 1rem; line-height:1.4;

  /* NEW: clamp + reserve height */
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2;
  min-height:calc(1.4 * 0.95rem * 2);
}

/* CTA pill */
.pill{
  margin:.2rem .95rem 1.1rem;
  display:inline-block; text-decoration:none; font-weight:700;
  background:#7a5cff; color:#fff; padding:.6rem 1rem; border-radius:12px;
  box-shadow:0 10px 18px rgba(122,92,255,.25); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;

  /* NEW: pin to bottom */
  margin-top:auto;
}
.pill:hover{ transform:translateY(-2px); box-shadow:0 18px 26px rgba(122,92,255,.35); filter:saturate(1.1) }

/* ---------- NEW: SCALLOPS + PINK SHOWCASE ---------- */
.scallop{
  height:33px;
  line-height:0;
  overflow:hidden;
  /* Adjust relative path to the relocated decorative image */
  background-image:url('../images/pink-diamond.svg');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:auto 33px;
}
.scallop--top{ position:relative; top:15px; }
.scallop--bottom{
  position:relative; top:-15px;
  transform:scaleY(-1);
  transform-origin:center;
}

.character-showcase{
  background: linear-gradient(180deg, #ff6b94 0%, #f15a8b 100%);
  padding: 3.5rem 6% 4.5rem;
  text-align:center;
  color:#fff;
}
.showcase-title{
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  margin:.5rem 0 2.2rem;
  font-weight:800;
}

.showcase-grid{
  display:flex; justify-content:space-around; gap:3rem; flex-wrap:wrap;
  max-width:1200px; margin:0 auto;
}

.cs-group{ position:relative; display:flex; flex-direction:column; align-items:center; }
.bubbles{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.bubble{
  border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.bubble:hover{ transform:scale(1.08); box-shadow:0 14px 28px rgba(0,0,0,.35); }
.bubble--sm{ width:110px; height:110px; }
.bubble--md{ width:130px; height:130px; }
.bubble--lg{ width:150px; height:150px; }

.cs-label{
  margin-top:1rem;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:1.4rem; color:#fff;
}

.cs-arrow{ position:absolute; width:120px; opacity:.95; }
.cs-arrow--left{ top:40%; left:-70px; transform:rotate(-10deg); }
.cs-arrow--top{ top:-60px; left:50%; transform:translateX(-50%); width:130px; }
.cs-arrow--right{ top:60%; right:-70px; transform:rotate(10deg); }

/* ---------- ANIMATIONS ---------- */
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes fadeUp{from{opacity:0; transform:translateY(24px) rotateY(-5deg)} to{opacity:1; transform:translateY(0) rotateY(0)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .hero{ flex-direction:column; text-align:center; padding:3.5rem 6%; }

@media (max-width: 900px){
  .books{ display:none !important; }
}
  .col{display:contents;}
  .col img{
    width:100%;
    max-width:170px;
    margin:0 !important;
    transform:translateY(18px) rotateY(-3deg);
  }

  .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .book-card{ min-height:400px; }   /* slightly shorter on mobile */

  /* pink section: stack nicely */
  .showcase-grid{ flex-direction:column; gap:3.5rem; }
  .cs-arrow{ position:static; display:block; margin:.6rem auto 0; transform:none !important; width:120px; }
  .cs-label{ margin-top:.4rem; }
}
@media (max-width: 520px){
  .text-side h1{ font-size:2.1rem }
  .card-grid{ grid-template-columns: 1fr; }

  .bubble--lg{ width:140px; height:140px; }
  .bubble--md{ width:110px; height:110px; }
  .bubble--sm{ width:90px; height:90px; }
}
/* === Smooth hover for hero covers (all 6 images) === */
.books .col img{
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter   .55s ease,
    box-shadow .55s ease;
  will-change: transform, filter;
}

/* Desktop / devices that support hover */
@media (hover:hover){
  .books .col img:hover{
    /* gentle zoom + a little darker */
    transform: translateY(0) rotateY(0) scale(1.07);
    filter: brightness(.86) saturate(1.03);
    box-shadow: -10px 16px 28px rgba(0,0,0,.30);
  }
}

/* Keep the mobile tilt but still scale a bit if the device supports hover */
@media (max-width:900px) and (hover:hover){
  .books .col img:hover{
    transform: translateY(18px) rotateY(-3deg) scale(1.05);
  }
}
.story-container {
    max-width: 960px;
    margin: 40px auto;
    padding: 24px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
h1, h2, h3 {
    margin-top: 0;
}

/* Form layout */
/* Center the form and stack each input vertically */
form {
    display: flex;
    flex-direction: column;
}
form .form-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
form .form-group {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
}
form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
form .form-group input,
form .form-group select {
    width: 100%;
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    /* Prevent mobile browsers from zooming inputs by ensuring font size >=16px */
    font-size: 16px;
}
form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 24px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  background: #2b9ff1;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Hover: smooth solid color with lift */
form button[type="submit"]:hover {
  background: #552ce0;
  color: #fff;
  border-color: #552ce0;
  box-shadow: 0 6px 16px rgba(85, 44, 224, 0.3);
  transform: translateY(-1px);
}

/* Pressed feel */
form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(85, 44, 224, 0.25);
}

/* Disabled (optional safety) */
form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Mobile tweak: full width + slightly smaller height */
@media (max-width: 480px) {
  form button[type="submit"] {
    width: 100%;
    height: 42px;
    font-size: 15px;
    border-radius: 8px;
  }
}


/* Story display */
.story-list {
    margin-top: 40px;
}
.story-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.story-item img {
    max-width: 200px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.story-duo {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.story-text {
    flex: 1 1 45%;
    white-space: pre-wrap;
    padding: 0 5px;
}
.story-text strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

/* Sorani translation styling */
.sorani-text {
    font-family: Tahoma, sans-serif;
    direction: rtl;
    text-align: right;
}

/* Generic translated text styling.  Applies a sensible font and alignment
 * based on the direction attribute set on the element.  Use the dir
 * attribute (rtl or ltr) to control the writing direction. */
.translated-text {
  white-space: pre-wrap;
  padding: 0 5px;
}
.translated-text[dir="rtl"] {
  font-family: newrudaw, sans-serif;
  text-align: right;
}
.translated-text[dir="ltr"] {
  font-family: inherit;
  text-align: left;
}

/* Locked page overlay styling.  The overlay covers the entire page and
 * provides a semi-transparent background with a centred message and icon.
 */
.locked-page-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.75);
  color: #444;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  z-index: 2;
}
.locked-page-overlay .lock-icon {
  margin-bottom: 0.4rem;
}

/* Upload area */
#upload-area {
    margin-top: 30px;
    border: 2px dashed #aaa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    position: relative;
    background-color: #fafafa;
}
#upload-area.hover {
    background-color: #f0f0ff;
    border-color: #6a35ff;
}
#upload-area img.preview {
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto;
    display: block;
}
#upload-area .remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#progress-container {
    margin-top: 20px;
    display: none;
}


/*
 * Font handling for left‑to‑right (LTR) and right‑to‑left (RTL) layouts.
 * When the document is RTL we prioritise the Rudaw fonts for Arabic and
 * Sorani Kurdish scripts, with Harmattan and Noto Sans Arabic as
 * fallbacks.  When the document is LTR we use Poppins for Latin
 * scripts.  We apply the font family declarations on both the <html>
 * and <body> elements to ensure consistent inheritance across the
 * entire page.
 */

html[dir="rtl"], body[dir="rtl"] {
    direction: rtl;
    text-align: right;
    /* Prioritise the locally bundled Rudaw font.  NewRudaw and
       RudawRegular2 map to the same face, followed by Noto Sans
       Arabic and Harmattan. */
    font-family: 'NewRudaw', 'RudawRegular2', 'Noto Sans Arabic', 'Harmattan', sans-serif !important;
}

html:not([dir="rtl"]), body:not([dir="rtl"]) {
    /* Use the imported Poppins for left‑to‑right languages. */
    font-family: 'NewRudaw', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}


/* Reverse horizontal menus and action bars */

/* Align grids and forms for RTL */
[dir="rtl"] .account-grid,
[dir="rtl"] .form-grid,
[dir="rtl"] .books-grid,
[dir="rtl"] .address-list,
[dir="rtl"] .my-book-card,
[dir="rtl"] .my-book-info,
[dir="rtl"] .address-section {
  text-align: right;
      font-family: 'NewRudaw', 'Harmattan', 'Noto Sans Arabic', sans-serif;

}

/* Ensure labels align to the right */
[dir="rtl"] label {
  display: block;
  text-align: right;
      font-family: 'NewRudaw', 'Harmattan', 'Noto Sans Arabic', sans-serif;

}
#progress-bar-wrapper {
    background:#e9ecef;
    border-radius:4px;
    overflow:hidden;
    height:20px;
}

/* ------------------------------------------------------------------ */
/* Additional mobile header tweaks
 *
 * The following rules refine the behaviour of the header and drawer on
 * narrow screens (mobile).  We hide the username next to the user icon,
 * relocate the language selector into the drawer and centre the logo.
 */
@media (max-width: 991.98px) {
  /* Hide the username label next to the user icon on mobile to save space */
  .username-display {
    display: none;
  }
}

/* Drawer language selector styling.  Positioned at the bottom of the
 * mobile navigation drawer, this row of buttons allows users to change
 * languages easily on mobile.  The buttons expand horizontally and
 * wrap as needed on very small screens. */
.drawer-languages {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.drawer-languages .lang-btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--navy);
  background: #f8fafc;
  font-size: 0.9rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.drawer-languages .lang-btn:hover {
  background: #eee;
}
.drawer-languages .lang-btn.active {
  background: var(--sun);
  border-color: var(--sun);
  color: #212121;
}

/* Ensure the mobile navigation overlay and drawer sit above all page
 * content by assigning high z-index values.  Without these values the
 * hero sections on certain pages could appear above the overlay. */
.overlay {
  z-index: 1100;
}
.drawer {
  z-index: 1101;
}
#progress-bar {
    background:#6a35ff;
    width:0%;
    height:100%;
    transition: width 0.3s ease;
}
#progress-message {
    margin-top:8px;
    font-size:14px;
    color:#555;
}

/* Next step button */
.btn-next {
    display: inline-block;
    padding: 12px 24px;
    background-color: #6a35ff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.btn-next:hover {
    background-color: #552ce0;
}

/* Storybook view styles */
.storybook-view {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}
.thumbnails {
    width: 180px;
    flex-shrink: 0;
}
.thumb-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
/*
 * Rename the generic `.thumb` class to `.story-thumb` to avoid clashing
 * with the `.thumb` class defined in the storybook styles.  This ensures
 * the thumbnail styling on the story page remains scoped and does not
 * override other pages.  All references to `.thumb` below have been
 * updated accordingly.
 */
.story-thumb {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.story-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
/* Page number below thumbnails */
.story-thumb .page-num {
    display: block;
    text-align: center;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
/* Hover effect for thumbnails */
.story-thumb:hover {
    border-color: #6a35ff;
    box-shadow: 0 0 5px rgba(106,53,255,0.4);
    cursor: pointer;
}
.story-thumb.active {
    border-color: #6a35ff;
    box-shadow: 0 0 5px rgba(106,53,255,0.6);
}
.book-content {
    flex: 1;
}
.spread {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.page {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    position: relative; /* allow overlay to position correctly */
}
.page img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Wrapper for image and overlay, so overlay positions relative to the image area only */
.image-wrapper {
    position: relative;
}
.page-text {
    padding: 10px;
    font-size: 14px;
    color: #333;
}

/* Waiting message styling for placeholders */
.waiting-message {
    text-align: center;
    font-style: italic;
    color: #888;
    margin: 6px 0;
}

/* Story generation overlay */
#storyGenOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
#storyGenOverlay .overlay-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 80%;
    max-width: 400px;
}
#storyGenOverlay .bar-wrapper {
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    height: 16px;
    margin-top: 10px;
}
#storyGenOverlay .bar {
    height: 100%;
    width: 0%;
    background: #6a35ff;
    transition: width 0.4s ease;
}

/* Overlay for page interactions (download & edit) */
.page-overlay {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    /* Content sizes itself based on inner icons */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 12px;
    border-radius: 6px;
    /* White card with subtle shadow */
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    color: #000;
    font-size: 0;
}
/* When hovering or active, show overlay and enable pointer events */
.page:hover .page-overlay,
.page.active .page-overlay {
    opacity: 1;
    pointer-events: auto;
}
.page-overlay span {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    pointer-events: auto;
    transition: color 0.2s ease;
}
.page-overlay span:hover {
    color: #6a35ff;
}

/* Image viewer popup */
#imagePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}
#imagePopup .popup-content {
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#imagePopup img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}
#imagePopup .close-btn {
    position: absolute;
    top: 0px;
    right: 15px;
    font-weight: bold;
    cursor: pointer;
    font-size: 3vw;
    color: #ff0000;
    transition: color 0.2s ease;
}
#imagePopup .close-btn:hover {
    color: #6a35ff;
}

/* Modal for editing image prompts */
#editModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

/* Modal for editing multiple images */
#multiEditModal {
    /* Hidden by default; shown via JS */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3100;
    align-items: center;
    justify-content: center;
}

/* Container for the multi-edit modal */
#multiEditModal .multi-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    width: 95%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

#multiEditModal h4 {
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 10px;
}

#multiEditModal textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    font-size: 16px;
}

#multiEditModal .modal-actions {
    margin-top: 12px;
    text-align: right;
}

#multiEditModal .modal-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#multiEditModal .modal-actions .cancel-btn {
    background: #ccc;
    color: #333;
    margin-right: 10px;
}

#multiEditModal .modal-actions .submit-btn {
    background: #6a35ff;
    color: #fff;
}

/* Layout for the selectable image thumbnails in the multi-edit modal */
#multiEditModal .multi-image-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 10px;
}

#multiEditModal .multi-image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px;
}

#multiEditModal .multi-image-item img {
    max-width: 90px;
    max-height: 90px;
    margin-bottom: 4px;
}

/* Face fix modal styling */
#faceFixModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3200;
    align-items: center;
    justify-content: center;
}

#faceFixModal .face-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

#faceFixModal h4 {
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 10px;
}

#faceFixModal .face-image-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#faceFixModal .face-image-list .face-image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px;
}

#faceFixModal .face-image-list .face-image-item img {
    max-width: 90px;
    max-height: 90px;
    margin-bottom: 4px;
}

#faceFixModal .modal-actions {
    margin-top: 12px;
    text-align: right;
}

#faceFixModal .modal-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#faceFixModal .modal-actions .cancel-btn {
    background: #ccc;
    color: #333;
    margin-right: 10px;
}

#faceFixModal .modal-actions .submit-btn {
    background: #6a35ff;
    color: #fff;
}

/* Warning button for face fix */
.btn-warning {
    background: #ffc107;
    color: #212121;
}
.btn-warning:hover {
    background: #ffb300;
}
#editModal .modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
}
#editModal h4 {
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 10px;
}
#editModal textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    /* Use at least 16px font size on mobile to avoid zooming */
    font-size: 16px;
}
#editModal .modal-actions {
    margin-top: 12px;
    text-align: right;
}
#editModal .modal-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
#editModal .modal-actions .cancel-btn {
    background: #ccc;
    color: #333;
    margin-right: 10px;
}
#editModal .modal-actions .submit-btn {
    background: #6a35ff;
    color: #fff;
}
.edit-panel {
    margin-top: 10px;
    display: none;
}
.edit-panel input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 6px;
}
.edit-panel button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #6a35ff;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

/* Styling for notes and footer in the prompt step */
.prompt-note, .prompt-footer {
    font-size: 18px;
    margin: 20px 0;
    text-align: center;
    line-height: 1.6;
}
.prompt-note {
    font-weight: 600;
}
.prompt-footer {
    color: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Make the story container almost full width and reduce side margins */
    .story-container {
        margin: 0;
        padding: 16px 10px;
        width: 100%;
    }
    /* Remove body font-size override in the story stylesheet; the main stylesheet sets body sizes */
    form .form-grid {
        grid-template-columns: 1fr;
    }
    .story-duo {
        flex-direction: column;
    }
    .storybook-view {
        flex-direction: column;
    }
    .thumbnails {
        /* Hide thumbnails on mobile to give more space */
        display: none;
    }
    /* Show larger thumbnails in two columns on mobile */
    .thumb-pair {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 10px;
    }
    .spread {
        flex-direction: column;
    }
    .page {
        margin-bottom: 20px;
    }
}

/* Center align elements in upload step */
.upload-actions {
    text-align: center;
    margin-top: 20px;
}
/* Custom styles for disabled thumbnails during loading */
/* Placeholder thumbnails (greyed out while waiting for generation) */
.story-thumb.placeholder img {
    filter: grayscale(1) opacity(0.5);
}

/*
 * Modern adjustments and utility classes. These classes are appended after the
 * original styles so they take precedence. They standardize form field sizes
 * and introduce helper classes for spacing, alignment and button variations.
 */

/* Hide elements by default (used for hidden file inputs, etc.) */
.hidden {
    display: none;
}

/* Generic overlay base class used by multiple overlays */
/* Generic overlay base class used by multiple overlays */
.story-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}
/* Specific overlay z-index variations */
.story-overlay-progress {
    z-index: 1000;
}

/*
 * Overlay displayed while waiting for AI-generated images to complete.
 * This overlay appears on the story view before any image polling begins
 * and shows a circular countdown timer.  It sits above the generic
 * progress overlay but below other modal dialogs.
 */
.story-overlay-wait {
    /* Use a higher stacking context than the standard progress overlay */
    z-index: 1500;
}

/* Container for the circular countdown spinner and timer text */
.story-overlay-wait .wait-circle {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px auto;
}

/* Rotating spinner forming part of the countdown visual */
.story-overlay-wait .wait-circle .spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 8px solid #6a35ff;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    animation: waitSpin 1s linear infinite;
    box-sizing: border-box;
}

/* Timer text displayed in the centre of the spinner */
.story-overlay-wait .wait-circle #waitTimer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

@keyframes waitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
#storyGenOverlay {
    z-index: 2000;
}

/* Content wrapper inside overlays */
.story-overlay-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 80%;
    max-width: 400px;
}

/* Progress bar wrappers and bars */
.bar-wrapper {
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    height: 16px;
    width: 100%;
}
.bar {
    width: 0%;
    height: 100%;
    background: #6a35ff;
    transition: width 0.4s ease;
}

/* Overlay messages */
.overlay-message {
    margin-bottom: 15px;
    font-weight: 600;
}

/* Utility spacing and alignment classes */
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 {margin-top: 20px;}
.mt-30 { margin-top: 30px; }
.text-center { text-align: center; }

/* Button variations */
.btn-upload {
    display: none;
    margin-top: 10px;
    background-color: #ff9500;
}
.btn-secondary {
    background-color: #e0e0e0;
    color: #333;
}

/* Upload progress container and bar styling */
.progress-container {
    display: none;
    margin-top: 20px;
}
.progress-bar-wrapper {
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
}
.progress-bar {
    background: #6a35ff;
    width: 0%;
    height: 100%;
    transition: width 0.3s ease;
}
.progress-message {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
}

/* Age dropdown appearance reset */
.age-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Custom tone input field hidden by default */
.custom-tone-input {
    display: none;
    margin-top: 10px;
}

/* Modernize form inputs: override defaults from extracted styles */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-size: 16px;
    box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #6a35ff;
    box-shadow: 0 0 0 2px rgba(106,53,255,0.2);
}

/* -------------------------------------------------------------------------- */
/* Custom Tone Translation Preview                                            */
/* Displays the English translation beneath the custom tone input. Hidden by  */
/* default and shown when a translation is available via JS.                   */
.tone-translation-preview {
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
    display: none;
}

/* ========================================================================== */
/* Cart, Delivery & Checkout Pages                                           */
/* Styles to support the shopping cart, delivery details and checkout flows. */
/* These rules build on the existing theme colours and spacing variables to  */
/* ensure a cohesive look across the site.                                   */
/* ========================================================================== */

/* Progress bar across checkout steps */
.progress-steps {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 8px;
}
.progress-steps .step {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: var(--navy);
  position: relative;
}
.progress-steps .step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: var(--border);
}
.progress-steps .step.completed {
  color: #6a35ff;
  border-bottom: 4px solid #d8b6ff;
}
.progress-steps .step.active {
  color: #6a35ff;
  border-bottom: 4px solid #6a35ff;
}

/* Cart page layout */
.cart-page .cart-main {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 10px;
}
.cart-items {
  flex: 1 1 60%;
  min-width: 280px;
}
.order-summary {
  flex: 1 1 35%;
  min-width: 250px;
  background: #f9f7fd;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.cart-item {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  position: relative;
  align-items: flex-start;
}
.cart-item .item-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
}
.cart-item .item-info {
  flex: 1;
}
.cart-item .item-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.cart-item .item-variant {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #666;
}
.cart-item .item-price,
.cart-item .item-qty {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.cart-item .remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 22px;
  color: #ff2e2e;
  text-decoration: none;
  line-height: 1;
}
[dir="rtl"] .cart-item .remove-btn {
  right: auto;   /* disable the original */
  left: 6px;     /* new position for RTL */
}

.cart-item .remove-btn:hover {
  color: var(--coral);
}

/* Quantity controls within the cart */
.item-qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.item-qty-control .qty-btn {
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  transition: background 0.1s ease;
}
.item-qty-control .qty-btn:hover {
  background: #f3f3f3;
}
.item-qty-control .qty-number {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* Story info bar at the top of the story page */
.story-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.story-info-bar .child-info {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.story-info-bar .change-lang .btn {
  font-size: 14px;
  padding: 6px 12px;
}

/* Modal overlay for changing book language */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal.show {
  display: flex;
}

/*
 * Layout fix: ensure the fixed header always sits above the hero and other
 * sections. Without a high z-index the mobile menu button may become
 * obscured by the hero video or other content, making it impossible
 * to click. Adding a relative position also establishes a stacking
 * context for its children.
 */
[data-header] {
  position: relative;
  z-index: 1000;
}
.modal-dialog {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow);
}
.modal-dialog h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}
.modal-dialog .form-group {
  margin-bottom: 16px;
}
.modal-dialog .form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.modal-dialog select {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Fixed add-to-cart button at the bottom of story page */
.fixed-add-to-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-add-to-cart .btn-add-to-cart {
  width: 100%;
  max-width: 320px;
  text-align: center;
  animation: slide-up 0.4s var(--ease);
}

/* When multiple order buttons are displayed (PDF vs Printed), distribute
   space evenly and allow both buttons to be visible side by side on
   desktop and mobile.  Each button shares half of the available width
   with a small margin for separation. */
.fixed-add-to-cart .btn-order-pdf,
.fixed-add-to-cart .btn-add-to-cart {
  flex: 1 1 0;
  max-width: 50%;
  margin: 0 4px;
  text-align: center;
}
@media (max-width: 600px) {
  .fixed-add-to-cart .btn-order-pdf,
  .fixed-add-to-cart .btn-add-to-cart {
    max-width: none;
    width: 50%;
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Saved addresses list styling */
.saved-addresses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.address-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.address-option input[type="radio"] {
  margin-top: 5px;
}
.address-card {
  background: #f8f8fc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  flex: 1;
}
.address-card.add-card {
  display: flex;
  align-items: center;
  color: var(--navy);
  font-weight: 600;
}
.address-card .add-icon {
  font-size: 20px;
  margin-right: 6px;
}
.new-address-fields {
  margin-top: 16px;
  padding: 16px;
  background: #f8f8fc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Order summary details */
.order-summary h3 {
  margin-top: 0;
  font-size: 20px;
  margin-bottom: 12px;
}
.order-summary .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 16px;
  color: var(--navy);
}
.order-summary .summary-row.total {
  font-weight: 700;
  font-size: 18px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 8px;
}
.order-summary .coupon-section {
  margin-top: 16px;
}
.coupon-section label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--navy);
}
.coupon-input-row {
  display: flex;
  align-items: stretch;
  border: 2px dotted #d8b6ff;
  border-radius: var(--radius);
  overflow: hidden;
}
.coupon-input-row input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 16px;
  background: transparent;
  color: var(--navy);
}
.coupon-input-row input.input-error {
  color: #d9534f;
}
.coupon-input-row .apply-btn {
  border: none;
  padding: 10px 16px;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #6a35ff;
  cursor: pointer;
  white-space: nowrap;
}
.coupon-section .coupon-error {
  color: #d9534f;
  font-size: 14px;
  margin-top: 4px;
}
.order-summary .btn-continue {
  display: block;
  width: 100%;
  padding: 2px;
  margin-top: 20px;
  border-radius: var(--radius);
  background: #00558b;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.order-summary .btn-continue:hover {
  background: #5940c0;
}

/* Delivery page */
.delivery-page .shipping-form {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 10px;
}
.delivery-page .shipping-details {
  flex: 1 1 60%;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.delivery-page .shipping-details h3,
.delivery-page .shipping-method h3 {
  margin-top: 0;
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--navy);
}
.delivery-page .form-group {
  margin-bottom: 12px;
}
.delivery-page .form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--navy);
}
.delivery-page .form-group input,
.delivery-page .form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  background: #f9f9f9;
  font-size: 16px;
}
.delivery-page .shipping-method {
  flex: 1 1 35%;
  min-width: 250px;
  background: #f9f7fd;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.delivery-page .shipping-option {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.delivery-page .shipping-option input {
  margin-right: 12px;
}
.delivery-page .shipping-option label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
.delivery-page .ship-days {
  font-size: 14px;
  color: #666;
  margin-left: auto;
  margin-right: 12px;
}
.delivery-page .ship-price {
  font-weight: 600;
  color: var(--navy);
}
.delivery-page .form-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.delivery-page .btn-continue {
  padding: 12px 24px;
  border-radius: var(--radius);
  background: #00558b;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.delivery-page .btn-continue:hover {
  background: #5940c0;
}

/* Checkout page */
.checkout-page .checkout-main {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 10px;
}
.checkout-page .checkout-items {
  flex: 1 1 60%;
  min-width: 280px;
}
.checkout-page .checkout-item {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
  /* Position relative so that absolutely positioned children like the remove button
     can be placed relative to this container. */
  position: relative;
}
/* Checkout remove button styling to mirror the cart page */
.checkout-page .checkout-item .remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 22px;
  color: #999;
  text-decoration: none;
  line-height: 1;
}
.checkout-page .checkout-item .remove-btn:hover {
  color: var(--coral);
}
.checkout-page .checkout-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
}
.checkout-page .checkout-info {
  flex: 1;
}
.checkout-page .checkout-info h4 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.checkout-page .checkout-info p {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #666;
}
.checkout-page .checkout-summary {
  flex: 1 1 35%;
  min-width: 250px;
  background: #f9f7fd;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.checkout-page .checkout-summary h3 {
  margin-top: 0;
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--navy);
}
.checkout-page .shipping-info p {
  margin: 0;
  font-size: 14px;
  color: var(--navy);
}
.checkout-page .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 16px;
  color: var(--navy);
}
.checkout-page .summary-row.total {
  font-weight: 700;
  font-size: 18px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 8px;
}
/*
 * Payment method layout
 *
 * The payment methods on the checkout page originally stacked vertically.  To
 * present both FIB and FastPay in a single row, the container uses flexbox
 * with a gap to separate options.  Each option aligns its radio input and
 * label horizontally and does not add a bottom margin.  The parent
 * alignment centres the group within its container.  Mobile browsers wrap
 * items naturally if there is insufficient space.
 */
.payment-methods {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
/* Payment method option layout
 * Each .payment-option expands equally across the row using flex
 * properties.  min-width provides a floor to prevent the cards from
 * becoming too narrow on very small screens; max-width limits their
 * size on large screens.  Labels take up the full width of their
 * container so background colours apply evenly.
 */
.payment-option {
  /*
   * Payment option cards should flex evenly within the payment-methods
   * container.  Setting flex: 1 ensures that each option grows to the
   * same width in the row while min-width provides a floor so the
   * buttons remain legible on smaller screens.  We omit a max-width
   * so that options can expand proportionally on larger displays.
   */
  display: flex;
  flex: 1 1 200px;
  /* Provide a minimum width so the options do not shrink too small on
     narrow screens. */
  min-width: 180px;
  align-items: stretch;
}
.payment-option input {
  display: none;
}
.payment-option label {
  flex: 1 1 auto;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Base provider colours when not selected */
.payment-option input[value="fastpay"] + label {
  background: #fc286182;
  color: #ffffff;
}
.payment-option input[value="fib"] + label {
  background: #00a69c73;
  color: #ffffff;
}
/* Selected states apply solid brand colours */
.payment-option input[value="fastpay"]:checked + label {
  background: #fc2861;
  color: #ffffff;
  border-color: #fc2861;
}
.payment-option input[value="fib"]:checked + label {
  background: linear-gradient(90deg, #01bfa5, #008f7a);
  color: #ffffff;
  border-color: #008f7a;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .cart-page .cart-main,
  .delivery-page .shipping-form,
  .checkout-page .checkout-main {
    flex-direction: column;
  }

  .cart-items,
  .order-summary,
  .delivery-page .shipping-details,
  .delivery-page .shipping-method,
  .checkout-page .checkout-items,
  .checkout-page .checkout-summary {
    flex: 1 1 100%;
    min-width: 100%;
  }

}




/* Root hero container */


/*
 * Kids‑oriented content styles
 */

/* Container for the AI and animation cards */
.kd-kids-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 4rem 3rem;
  background: #F9F5FF;
}

/* On wide screens, switch to a two‑column grid for the kids cards.  Using
   CSS grid here ensures the AI chat and animation cards sit neatly
   beside each other regardless of extra padding or gap calculations. */
@media (min-width: 992px) {
  .kd-kids-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Base size and layout for the AI and animation cards.  A common
   class (kd‑card) handles the sizing, layout and unified background
   styling for all primary cards.  Cards use flexbox to arrange their
   textual content and illustration side by side.  A minimum width
   prevents them from becoming too narrow. */
.kd-card {
  flex: 1 1 calc(50% - 1rem);
  min-width: 300px;
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  /* Unified background image: gradient overlay and decorative SVG pattern */
  background-image: linear-gradient(135deg, #2abfd78a 0%, #c23b4cb3 100%), url(https://res.cloudinary.com/dmuecdqxy/q_auto/v1731913693/static/group-8svg_1731913691_85041.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}

/* Content area inside each main card */
.kd-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Illustration area inside each main card */
.kd-card-image {
  flex: 0 0 180px;
  max-width: 180px;
  display: flex;
  justify-content: flex-end;
}
.kd-card-image img {
  width: 100%;
  height: auto;
}

/* Tag inside cards */
.kd-card-tag {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  color: inherit;
  opacity: 0.75;
}

/* Card title */
.kd-card-title {
  font-size: 2rem;
  margin: 0 0 1rem 0;
  line-height: 1.3;
  max-width: 20ch;
}

/* Card description */
.kd-card-desc {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 35ch;
  line-height: 1.5;
}

/* Button inside cards */
.kd-card-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background-color: #9e3a3a;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s, background-color 0.3s;
}

.kd-card-button:hover {
  background-color: #4A2E7F;
  transform: translateY(-2px);
}

/* Category section wrapper */
.kd-categories {
  background-color: #FDF9FF;
  padding: 4rem 3rem;
  text-align: center;
}

/* Heading for category section */
.kd-categories-title {
  font-size: 2.25rem;
  margin-bottom: 3rem;
  color: #6D3A9E;
}

/* Grid for category cards */
.kd-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* Base styles for category cards */
.kd-category-card {
  flex: 1 1 calc(33.333% - 3rem);
  min-width: 220px;
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  /* Unified gradient background and decorative pattern */
  background-image:
    linear-gradient(135deg, #54b54c94 0%, #fd96317a 100%),
    url("https://res.cloudinary.com/dmuecdqxy/q_auto/v1731913693/static/group-8svg_1731913691_85041.svg");
    
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
  text-align: left;
  transition: transform 0.3s;
}


.kd-category-card:hover {
  transform: translateY(-5px);
}

/* Icon inside category cards */
.kd-category-icon {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
}

/* Name inside category cards */
.kd-category-name {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Content container inside each category card (holds the title) */
.kd-category-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Illustration container inside each category card */
.kd-category-image {
  flex: 0 0 90px;
  max-width: 90px;
  display: flex;
  justify-content: flex-end;
}
.kd-category-image img {
  width: 100%;
  height: auto;
}

/* Learn category colours */
.kd-category-learn {
  /* category specific styles can be defined here if needed */
}

/* Colouring category colours */
.kd-category-coloring {
  /* category specific styles can be defined here if needed */
}

/* Stories category colours */
.kd-category-stories {
  /* category specific styles can be defined here if needed */
}

.kd-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.kd-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .kd-card {
    flex: 1 1 100%;
  }
  .kd-category-card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media (max-width: 600px) {
  .kd-kids-section,
  .kd-categories {
    padding: 3rem 1.5rem;
  }
  .kd-card-title {
    font-size: 1.6rem;
  }
  .kd-category-card {
    flex: 1 1 100%;
  }
}






html[dir="rtl"] .kd-card,
html[dir="rtl"] .kd-category-card {
  flex-direction: row-reverse;
}

html[dir="rtl"] .kd-card-content,
html[dir="rtl"] .kd-category-content {
  text-align: right;
  align-items: flex-end;
}
/* Container */
/* Container for 4 language buttons */
.book-lang-selection .lang-options,
.book-langs-group .lang-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Each button */
.lang-option {
  position: relative;
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
  height: 44px;
  min-width: 80px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  color: #111;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  line-height: 1;            /* remove extra top gap */
}

/* Hide checkbox/radio */
.lang-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Text inside the button */
.lang-option span {
  display: flex;
  align-items: center;       /* vertical center text inside its own line box */
  justify-content: center;
  line-height: 1;
  height: 100%;              /* ensures full vertical centering */
  width: 100%;
  pointer-events: none;
  text-align: center;
}

/* Hover / Active */
.lang-option:hover {
  background: #efefef;
}

.lang-option:has(input:checked),
.lang-option.is-active {
  background: #bd1a40;   /* red */
  color: #fff;
  border-color: #bd1a40;
  transform: scale(1.02);
}

/* Mobile */
@media (max-width: 480px) {
  .lang-option {
    height: 40px;
    min-width: 70px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* ========== Story Language Bar (PC + Mobile) ========== */

/* Outer container: your existing class */
.book-lang-selection.story-lang-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
  padding: 6px 0;
}

/* Inner wrapper for buttons */
.book-lang-selection.story-lang-bar .lang-options {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Each language button */
.book-lang-selection.story-lang-bar .lang-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 80px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  color: #111;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  line-height: 1;
}

/* Hide the checkbox/radio input */
.book-lang-selection.story-lang-bar .lang-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Text inside button */
.book-lang-selection.story-lang-bar .lang-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  line-height: 1;
  pointer-events: none;
  text-align: center;
}

/* Hover and selected states */
.book-lang-selection.story-lang-bar .lang-option:hover {
  background: #eeeeee;
}
.book-lang-selection.story-lang-bar .lang-option:has(input:checked),
.book-lang-selection.story-lang-bar .lang-option.is-active {
  background: #bd1a40;
  color: #fff;
  border-color: #bd1a40;
  transform: scale(1.02);
}

/* ✅ Checkmark in selected button */
.book-lang-selection.story-lang-bar .lang-option:has(input:checked)::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 13px;
  color: #fff;
  pointer-events: none;
}

/* ========== Mobile ========== */
@media (max-width: 480px) {
  .book-lang-selection.story-lang-bar {
    gap: 8px;
    flex-wrap: wrap;
  }
  .book-lang-selection.story-lang-bar .lang-option {
    height: 40px;
    min-width: 70px;
    padding: 0 12px;
    font-size: 14px;
  }
  .book-lang-selection.story-lang-bar .lang-option:has(input:checked)::after {
    right: 8px;
    font-size: 12px;
  }
}

/* === Simplified footer styles === */

/* Add padding to bottom of core pages so content does not run into the footer */
.cart-page,
.delivery-page,
.checkout-page,
.page-container {
  padding-bottom: 80px;
}

/* ---------------------------------------------------------------------
   Social login buttons
   ---------------------------------------------------------------------
   Buttons for third‑party authentication providers such as Google and
   Facebook.  These follow the style of the screenshot provided by the
   client, with the Facebook button filled and the Google button
   outlined.  Use the class 'btn-social' on anchors and augment with
   either 'btn-fb' or 'btn-google' to apply provider‑specific colours.
*/
/*
 * Layout the social login buttons side‑by‑side for a more polished look.  Each
 * button flexes equally to fill the available width.  Icons are inserted via
 * a child span with the class "icon"; see the markup in index.php.
 */
.social-login {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

/* Provider specific colours */
.btn-fb {
  background-color: #1877F2;
  color: #fff;
  border: 1px solid #1877F2;
}
.btn-fb:hover {
  background-color: #155dbd;
  border-color: #155dbd;
}

.btn-google {
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
}
.btn-google:hover {
  background-color: #f7f7f7;
  border-color: #ccc;
}

/* Icon circle for provider logos.  Use uppercase letters as the icons via the
 * markup (see index.php).  Each icon is rendered as a 24×24 circle with the
 * provider colour applied to the letter.  The circle itself is white for
 * both providers to match brand guidelines.
 */
.btn-social .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 16px;
  font-weight: bold;
}

/* Facebook icon styling */
.btn-fb .icon {
  background-color: #fff;
  color: #1877F2;
}

/* Google icon styling */
.btn-google .icon {
  background-color: #fff;
  color: #4285F4;
}

/* Danger button style used for destructive actions (e.g. remove from gallery).
   Define a red variant consistent with the site palette.  Without this class the
   "Remove from Gallery" button falls back to unstyled links. */
.btn-danger {
  background-color: var(--coral);
  color: #fff;
  border: 1px solid var(--coral);
}
.btn-danger:hover {
  background-color: #d25454; /* Darken the coral on hover for contrast */
  border-color: #d25454;
}

/* Book card delete icon.  Position an icon in the top right corner of each
   my-book-card.  The icon appears as a small circle with a cross and only
   becomes visible when hovering over the card on desktop.  On touch
   devices the icon is always visible. */
.my-book-card {
  position: relative;
}
.my-book-card .delete-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.my-book-card .delete-icon:hover {
  background-color: rgba(0,0,0,0.7);
}

/*
 * Ticket Reply Page
 *
 * The conversation between a user and the support team should read like
 * a modern chat application.  Messages are displayed as rounded
 * bubbles, aligned left for the user and right for the admin.  Soft
 * background colours distinguish between the two parties while
 * keeping the look consistent with the Kurdolla palette.  The
 * container ensures messages flow naturally and remain responsive on
 * mobile devices.
 */
.ticket-reply-page .ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.ticket-reply-page .ticket-message {
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #ffffff;
  display: inline-block;
  word-wrap: break-word;
}

/* User messages: align to the left with a hint of teal. */
.ticket-reply-page .ticket-message.user {
  align-self: flex-start;
  background-color: rgba(35, 200, 194, 0.15);
  color: var(--navy);
}

/* Admin messages: align to the right with a hint of sky blue. */
.ticket-reply-page .ticket-message.admin {
  align-self: flex-end;
  background-color: rgba(57, 183, 255, 0.15);
  color: var(--navy);
}

.ticket-reply-page .ticket-message-meta {
  font-size: 0.75rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
}

.ticket-reply-page .ticket-message-body {
  white-space: pre-wrap;
  line-height: 1.4;
}

.ticket-reply-page .ticket-reply-form .form-group {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.ticket-reply-page .ticket-reply-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

/*
 * Inline price display inside the personalise button on the storybook page.
 * The .pill-price span wraps the amount and currency text.  We reduce
 * the font size relative to the button text and align the baseline so
 * the currency sits neatly with the amount.  Previously margins were used
 * to separate the price from the label, but the layout is now handled via
 * a flex container on the button (.pill-price-btn).
 */
.pill-price {
  display: inline-flex;
  align-items: baseline;
  font-size: 0.85em;
  font-weight: 700;
}
.pill-price .currency {
  font-size: 0.6em;
  /* Increase spacing between the amount and currency so they are not cramped. */
  margin-left: 0.3em;
  opacity: 0.9;
}
/* Apply spacing based on page direction */
/* Direction-dependent spacing removed; the price is separated via flex layout on the button. */
/*
html[dir="ltr"] .pill-price { margin-left: 0.5rem; }
html[dir="rtl"] .pill-price { margin-right: 0.5rem; }
*/

/* Button variant that separates the label and the price across the available width.  Assign this class to
   personalise buttons containing prices to layout content horizontally and fill the card width. */
.pill-price-btn {
  display: flex;
  /* Use space-between so the label and price occupy opposite ends of the button
     across both LTR and RTL contexts.  The HTML markup always places the
     label first and the price second.  In RTL layouts the second item
     naturally flows to the left, and in LTR layouts it flows to the right. */
  justify-content: space-between;
  align-items: center;
  width: 100%;

  /* Override the default horizontal margins from .pill.  Without removing
     the horizontal margins, setting width:100% causes the button to be
     wider than its container, resulting in the price text being clipped
     on the right.  Keep the vertical margin values from .pill (margin-top
     is auto to push the button to the bottom of its flex parent), but
     remove margin-left and margin-right so the button fits within the
     card. */
  margin-left: 0;
  margin-right: 0;

  /* Position relative so that the price tooltip can be absolutely
     positioned within the button. */
  position: relative;
}

/* Tooltip container for displaying both printed and PDF prices.  The tooltip
   remains hidden by default and appears when the user hovers the personalise
   button (parent anchor).  Use white background with subtle shadow and
   rounded corners for readability. */
.pill-price-btn .price-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  margin-bottom: 0.5rem;
  right: 0;
  background: #ffffff;
  color: #4a4a4a;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 20;
}

/* Show tooltip on hover */
.pill-price-btn:hover .price-tooltip {
  display: block;
}

/* Price line inside tooltip: align baseline to keep currency aligned
   with amount.  Use small gap between the label, amount and currency. */
.pill-price-btn .price-tooltip .price-option {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.4em;
}
.pill-price-btn .price-tooltip .price-option .currency {
  font-size: 0.6em;
  opacity: 0.9;
}

/* For RTL layouts, position tooltip to the left and reverse the order of
   items inside each price option. */
html[dir="rtl"] .pill-price-btn .price-tooltip {
  right: auto;
  left: 0;
  text-align: right;
}
html[dir="rtl"] .pill-price-btn .price-tooltip .price-option {
  flex-direction: row-reverse;
}
/* Hide the delete icon until the card is hovered when using a pointer input */
@media (hover:hover) and (pointer:fine) {
  .my-book-card .delete-icon {
    opacity: 0;
  }
  .my-book-card:hover .delete-icon {
    opacity: 1;
  }
}

/* =========================================================================
   Price dropdown for personalise buttons (click to reveal)

   The .price-toggle-btn class is applied to personalise buttons on the
   storybook page when both printed and PDF pricing are available.  When
   clicked the first time, a dropdown appears listing both price options;
   clicking again will navigate to the story personalisation page.  On
   RTL languages (Kurdish/Arabic) the dropdown aligns to the right and
   preserves the natural reading order.
   ========================================================================= */

/* Base styles for the toggle button: fill the card width and provide a
   relative positioning context for the dropdown.  Override horizontal
   margins from .pill so that the button does not overflow its card. */
.price-toggle-btn {
  position: relative;
  display: block;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Hidden by default.  The dropdown appears above the button when
   .show is added.  It has a white background, soft shadow and rounded
   corners.  We centre it horizontally relative to the button. */
.price-toggle-btn .price-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  margin-bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #4a4a4a;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0.75rem;
  z-index: 100;
  white-space: nowrap;
}

/* Each price option sits on its own row with a small gap between the
   segments (label, amount and currency).  Align baseline so the
   currency sits neatly with the number. */
.price-toggle-btn .price-dropdown .price-option {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 0.75rem;
}

/* Styling for the numeric amount and currency within the dropdown.
   Reduce the currency size slightly and fade it for visual hierarchy. */
.price-toggle-btn .price-dropdown .amount {
  font-size: 0.85em;
  font-weight: 700;
}
.price-toggle-btn .price-dropdown .currency {
  font-size: 0.6em;
  opacity: 0.85;
}

/* When .show is present on the dropdown container, display it and stack
   the price options vertically. */
.price-toggle-btn .price-dropdown.show {
  display: flex;
  flex-direction: column;
}

/* RTL support: align the dropdown to the right and reverse flex order
   so that the segments maintain correct reading order. */
html[dir="rtl"] .price-toggle-btn .price-dropdown {
  left: auto;
  right: 50%;
  transform: translateX(50%);
  text-align: right;
}
html[dir="rtl"] .price-toggle-btn .price-dropdown .price-option {
  flex-direction: row-reverse;
}



/* ===============================================================
   Kurdolla — Header v2 (kd2-*) and Footer (kd-footer*)
   Moved out of header.php / footer.php on 2026-04-22.
   These blocks used to be inline <style> tags. They live here now
   so the server can cache them as a static asset.
   ALL classes use kd2-* / kd-footer* prefixes and do NOT collide
   with legacy rules elsewhere in this file.
   =============================================================== */
/* ==============================================================
   Kurdolla header v2 — fresh, isolated, RTL-proof
   Every class name prefixed `kd2-` to avoid clashing with
   anything in assets/css/style.css.
   ============================================================== */

/* Brand tokens (restated locally so we don't depend on style.css). */
:root {
  --kd2-teal:  #23C8C2;
  --kd2-teal2: #1AA39E;
  --kd2-sky:   #39B7FF;
  --kd2-sun:   #FFB32B;
  --kd2-coral: #FF6B6B;
  --kd2-ink:   #15314A;
  --kd2-muted: #64748B;
  --kd2-line:  #E6EEF6;
  --kd2-cream: #FFF8ED;
}

/* --- The bar --- */
.kd2-bar {
  position: sticky;
  top: 0;
  z-index: 2000;
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--kd2-line);
  box-shadow: 0 1px 0 rgba(21, 49, 74, 0.03);
  transition: box-shadow .2s ease;
}
.kd2-bar.kd2-scrolled {
  box-shadow: 0 4px 14px rgba(21, 49, 74, 0.06);
}

/* --- Inner row. `direction: ltr` is mandatory: it pins the visual
   order (logo left, actions right) independently of the page's
   writing direction. --- */
.kd2-bar__row {
  direction: ltr;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 60px;
  box-sizing: border-box;
}

/* --- Logo (LEFT always) --- */
.kd2-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 44px;
  max-width: 170px;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.kd2-logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 520px) {
  .kd2-logo { max-width: 130px; height: 40px; }
  .kd2-logo img { height: 32px; }
}

/* --- Right cluster (EVERYTHING except logo) --- */
.kd2-tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
@media (min-width: 992px) { .kd2-tools { gap: 14px; } }

/* --- Icon button base (hamburger, cart, lang) --- */
.kd2-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--kd2-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease, transform .08s ease;
  padding: 0;
}
.kd2-iconbtn:hover { background: var(--kd2-cream); }
.kd2-iconbtn:active { transform: scale(0.95); }
.kd2-iconbtn svg { width: 22px; height: 22px; display: block; }

/* Cart badge */
.kd2-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--kd2-coral);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  border: 2px solid #fff;
  pointer-events: none;
}

/* --- Desktop nav links --- */
.kd2-nav {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 992px) { .kd2-nav { display: inline-flex; } }
.kd2-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--kd2-ink);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: background .15s ease;
  white-space: nowrap;
}
.kd2-nav__link:hover { background: var(--kd2-cream); }

/* --- Chatbot pill (desktop): clean, minimal, professional --- */
.kd2-nav__chatpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--kd2-teal2) !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1.5px solid var(--kd2-teal);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
  white-space: nowrap;
}
.kd2-nav__chatpill:hover {
  background: var(--kd2-teal);
  color: #FFFFFF !important;
  border-color: var(--kd2-teal);
}
.kd2-nav__chatpill:active { transform: scale(0.97); }
.kd2-nav__chatpill::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323C8C2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='12' rx='3'/><circle cx='9' cy='13' r='1' fill='%2323C8C2'/><circle cx='15' cy='13' r='1' fill='%2323C8C2'/><path d='M12 3v4'/><circle cx='12' cy='2.5' r='0.8' fill='%2323C8C2'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transition: background-image .15s ease;
}
.kd2-nav__chatpill:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='12' rx='3'/><circle cx='9' cy='13' r='1' fill='white'/><circle cx='15' cy='13' r='1' fill='white'/><path d='M12 3v4'/><circle cx='12' cy='2.5' r='0.8' fill='white'/></svg>");
}

/* --- Mobile chatbot launcher (round avatar) --- */
.kd2-chatbot-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(35, 200, 194, 0.32);
  border: 2px solid #fff;
  position: relative;
  transition: transform .15s ease;
}
.kd2-chatbot-mobile:hover { transform: scale(1.05); }
.kd2-chatbot-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd2-chatbot-mobile::after {
  content: '';
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  background: #10B981;
  border: 2px solid #fff;
  border-radius: 50%;
}
@media (min-width: 992px) { .kd2-chatbot-mobile { display: none; } }

/* ---------- Language switcher (modern custom dropdown) ----------
   Replaces the native <select>. Built on <details><summary> for
   zero-JS base functionality + one tiny listener for outside-click.
   Desktop only — on mobile the drawer's language list is used. */
.kd2-langbox {
  position: relative;
  flex-shrink: 0;
  display: none;
}
@media (min-width: 992px) { .kd2-langbox { display: inline-block; } }
.kd2-langbox > summary {
  list-style: none;
  cursor: pointer;
}
.kd2-langbox > summary::-webkit-details-marker,
.kd2-langbox > summary::marker { display: none; }

/* Trigger pill */
.kd2-langbox__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--kd2-line);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--kd2-ink);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
  user-select: none;
}
.kd2-langbox[open] > .kd2-langbox__trigger,
.kd2-langbox > summary:hover .kd2-langbox__trigger,
.kd2-langbox > .kd2-langbox__trigger:hover {
  border-color: var(--kd2-teal);
  background: var(--kd2-cream);
}
.kd2-langbox[open] > summary .kd2-langbox__chev,
.kd2-langbox[open] > .kd2-langbox__trigger .kd2-langbox__chev {
  transform: rotate(180deg);
}

/* The current language code chip (EN, KU, AR, KR) */
.kd2-langbox__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(35, 200, 194, 0.25);
}
.kd2-langbox__label {
  color: var(--kd2-ink);
  white-space: nowrap;
}
.kd2-langbox__chev {
  color: var(--kd2-muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}

/* Dropdown menu */
.kd2-langbox__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--kd2-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(21, 49, 74, 0.14);
  z-index: 2100;
  animation: kd2LangOpen .16s ease-out;
}
[dir="rtl"] .kd2-langbox__menu {
  right: auto;
  left: 0;
}
@keyframes kd2LangOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each menu item */
.kd2-langbox__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--kd2-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .12s ease;
}
.kd2-langbox__item:hover {
  background: var(--kd2-cream);
  color: var(--kd2-ink);
}
.kd2-langbox__item.is-active {
  background: rgba(35, 200, 194, 0.10);
  color: #0F7A76;
  font-weight: 600;
}
.kd2-langbox__item-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.kd2-langbox__item.is-active .kd2-langbox__item-code {
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
  color: #FFFFFF;
}
.kd2-langbox__item-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kd2-langbox__item-check {
  color: var(--kd2-teal2);
  flex-shrink: 0;
}
/* Mid-width: hide the descriptive label, keep just the code chip */
@media (max-width: 1100px) {
  .kd2-langbox__label { display: none; }
  .kd2-langbox__trigger { padding: 0 10px; }
}

/* --- Cart dropdown (disclosure) --- */
.kd2-cart {
  position: relative;
  flex-shrink: 0;
}
.kd2-cart summary {
  list-style: none;
  cursor: pointer;
}
.kd2-cart summary::-webkit-details-marker { display: none; }

.kd2-cart__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--kd2-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(21, 49, 74, 0.12);
  padding: 14px;
  z-index: 2100;
}
.kd2-cart__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-height: 240px;
  overflow-y: auto;
}
.kd2-cart__item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--kd2-line);
}
.kd2-cart__item:last-child { border-bottom: 0; }
.kd2-cart__thumb {
  width: 48px; height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--kd2-cream);
}
.kd2-cart__info {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--kd2-ink);
  line-height: 1.35;
}
.kd2-cart__info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kd2-cart__info small {
  display: block;
  font-size: 12px;
  color: var(--kd2-muted);
}
.kd2-cart__empty {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--kd2-muted);
  text-align: center;
  padding: 8px 0;
}
.kd2-cart__view {
  display: block;
  width: 100%;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(35, 200, 194, 0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kd2-cart__view:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(35, 200, 194, 0.35);
}

/* --- Account (logged in) dropdown --- */
.kd2-acct {
  position: relative;
  flex-shrink: 0;
}
.kd2-acct summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--kd2-cream);
  color: var(--kd2-ink);
  font-weight: 700;
  font-size: 14px;
  transition: background .15s ease;
}
.kd2-acct summary::-webkit-details-marker { display: none; }
.kd2-acct summary:hover { background: #EEE2CF; }
.kd2-acct__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--kd2-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(21, 49, 74, 0.12);
  padding: 8px 0;
  z-index: 2100;
}
.kd2-acct__panel a {
  display: block;
  padding: 10px 16px;
  color: var(--kd2-ink);
  text-decoration: none;
  font-size: 14px;
  /* Respect the document's natural text direction inside the menu
     so Kurdish/Arabic labels read right-to-left as expected, even
     though the menu's visual position is LTR-pinned. */
  direction: inherit;
  text-align: start;
  transition: background .12s ease;
}
.kd2-acct__panel a:hover {
  background: var(--kd2-cream);
  color: var(--kd2-ink);
}

/* --- Login button (guest) --- */
.kd2-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--kd2-line);
  background: #fff;
  color: var(--kd2-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.kd2-login:hover {
  border-color: var(--kd2-teal);
  color: var(--kd2-teal);
  background: var(--kd2-cream);
}
@media (max-width: 520px) {
  .kd2-login { padding: 0 10px; font-size: 12.5px; height: 36px; }
}

/* --- Hamburger: hidden on desktop --- */
@media (min-width: 992px) { .kd2-ham { display: none; } }

/* --- Drawer (mobile menu) — keeps existing class names because
       the drawer JS in assets/js/app.js still hooks into them. --- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.overlay:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 84vw;
  max-width: 320px;
  height: 100dvh;
  background: #fff;
  z-index: 2600;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.2);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
[dir="rtl"] .drawer {
  transform: translateX(100%);
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.2);
}
.drawer:not([hidden]) { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kd2-line);
}
.drawer-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--kd2-ink);
}
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--kd2-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover { background: var(--kd2-cream); }
.drawer-body { padding: 14px 16px; overflow-y: auto; }
.drawer-logo { margin-bottom: 12px; }
.drawer-logo img { height: 40px; width: auto; }
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-list .nav-link {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--kd2-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background .12s ease;
}
.nav-list .nav-link:hover { background: var(--kd2-cream); }
.nav-list .nav-link--chatbot {
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
  color: #fff !important;
}
.nav-list .nav-link--chatbot:hover {
  filter: brightness(1.05);
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
}
.drawer-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.lang-btn {
  padding: 6px 12px;
  border: 1px solid var(--kd2-line);
  border-radius: 999px;
  color: var(--kd2-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.lang-btn.active {
  background: var(--kd2-teal);
  color: #fff;
  border-color: var(--kd2-teal);
}
.drawer-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--kd2-line);
}
.drawer-footer .btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--kd2-teal), var(--kd2-teal2));
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

  /* ==========================================================
     Kurdolla footer — modern, matches the header design system
     ========================================================== */
  /* We use our own namespaced classes (`kd-footer*`) so nothing
     collides with the old `.simple-footer` rules in style.css. */
  .kd-footer {
    margin-top: 48px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FDFAF2 100%);
    border-top: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-family: inherit;
    position: relative;
  }

  /* Decorative gradient strip at the very top of the footer — a
     subtle brand touch tying footer to header. */
  .kd-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
      90deg,
      var(--kd-sky),
      var(--kd-teal),
      var(--kd-sun),
      var(--kd-coral)
    );
  }

  .kd-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 44px 20px 0;
  }

  .kd-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
  }
  @media (max-width: 768px) {
    .kd-footer__grid {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-bottom: 24px;
    }
    .kd-footer__inner { padding: 32px 16px 0; }
  }

  /* --- Column: brand --- */
  .kd-footer__brand-logo {
    display: inline-flex;
    align-items: center;
    height: 40px;
    text-decoration: none;
    margin-bottom: 14px;
  }
  .kd-footer__brand-logo img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }
  .kd-footer__tagline {
    font-size: 14px;
    line-height: 1.6;
    color: var(--kd-muted);
    margin: 0 0 18px;
    max-width: 360px;
  }
  .kd-footer__socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .kd-footer__socials a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--kd-line);
    color: var(--kd-ink);
    text-decoration: none;
    transition: all 0.15s ease;
  }
  .kd-footer__socials a:hover {
    transform: translateY(-2px);
    border-color: var(--kd-teal);
    color: var(--kd-teal);
    box-shadow: 0 6px 16px rgba(35, 200, 194, 0.18);
  }
  .kd-footer__socials svg {
    width: 18px;
    height: 18px;
  }

  /* --- Column headings (shared) --- */
  .kd-footer__h {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kd-ink);
    margin: 0 0 14px;
  }

  /* --- Column: links --- */
  .kd-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .kd-footer__links a {
    color: var(--kd-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .kd-footer__links a:hover {
    color: var(--kd-teal);
    transform: translateX(3px);
  }
  [dir="rtl"] .kd-footer__links a:hover {
    transform: translateX(-3px);
  }

  /* --- Column: contact --- */
  .kd-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .kd-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--kd-muted);
  }
  .kd-footer__contact svg {
    width: 18px;
    height: 18px;
    color: var(--kd-teal);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .kd-footer__contact a {
    color: var(--kd-muted);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .kd-footer__contact a:hover { color: var(--kd-teal); }

  /* --- Bottom bar --- */
  .kd-footer__bottom {
    border-top: 1px solid var(--kd-line);
    padding: 18px 0 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--kd-muted);
  }
  .kd-footer__bottom a {
    color: var(--kd-muted);
    text-decoration: none;
    margin: 0 6px;
    transition: color 0.15s ease;
  }
  .kd-footer__bottom a:hover { color: var(--kd-teal); }
  .kd-footer__made {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .kd-footer__heart {
    color: var(--kd-coral);
    animation: kd-heart 1.6s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes kd-heart {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
  }

  /* Hide the legacy `.simple-footer` (just in case old CSS is still
     hanging around somewhere). */
  footer.simple-footer { display: none !important; }

  /* ===========================================================
     Mobile footer — tighter, centered, friendlier.
     Below 768px the 3-column grid stacks. Instead of letting it
     just linearize awkwardly (huge gaps, right-aligned orphans),
     we restructure each section so it reads cleanly on a narrow
     screen. Brand block centers, socials recenter, link columns
     center-align their headings, contact lines get proper visual
     rhythm.
     =========================================================== */
  @media (max-width: 768px) {
    .kd-footer { margin-top: 32px; }
    .kd-footer__inner {
      padding: 30px 20px 0 !important;
    }
    .kd-footer__grid {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
      padding-bottom: 20px !important;
      text-align: center;
    }

    /* Brand column: logo + tagline + socials all centered */
    .kd-footer__grid > div:first-child {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .kd-footer__brand-logo {
      margin: 0 auto 12px !important;
    }
    .kd-footer__brand-logo img {
      height: 44px !important;
      max-width: 140px;
    }
    .kd-footer__tagline {
      font-size: 14px;
      line-height: 1.55;
      margin: 0 auto 16px !important;
      max-width: 340px;
    }
    .kd-footer__socials {
      justify-content: center;
      gap: 10px !important;
    }
    .kd-footer__socials a {
      width: 42px !important;
      height: 42px !important;
    }

    /* Links and Contact columns: centered, tighter list */
    .kd-footer__h {
      text-align: center;
      margin-bottom: 12px !important;
      font-size: 12px !important;
      letter-spacing: 0.08em !important;
    }
    .kd-footer__links {
      align-items: center;
      gap: 10px !important;
    }
    .kd-footer__links a {
      font-size: 15px !important;
      padding: 4px 0;
    }
    /* Kill the hover-slide on mobile so centered links don't jump */
    .kd-footer__links a:hover,
    [dir="rtl"] .kd-footer__links a:hover {
      transform: none !important;
    }

    .kd-footer__contact {
      align-items: center;
      gap: 10px !important;
    }
    .kd-footer__contact li {
      justify-content: center;
      font-size: 14px !important;
      text-align: center;
    }
    .kd-footer__contact svg { margin-top: 2px; }

    /* Bottom bar: always column, readable, no cramming */
    .kd-footer__bottom {
      flex-direction: column !important;
      gap: 8px;
      text-align: center;
      padding: 18px 0 24px !important;
      font-size: 12.5px !important;
      border-top: 1px solid var(--kd-line);
    }
    .kd-footer__made {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* Very small phones: shrink even more */
  @media (max-width: 400px) {
    .kd-footer__inner { padding: 24px 16px 0 !important; }
    .kd-footer__grid { gap: 24px !important; }
    .kd-footer__brand-logo img { height: 40px !important; }
    .kd-footer__tagline { font-size: 13.5px; }
    .kd-footer__links a { font-size: 14.5px !important; }
  }



/* ===============================================================
   Kids Videos page — grid + lightbox modal (kv-*)
   =============================================================== */

.kv-page { background: #FFFBF2; }

.kv-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.kv-hero {
  text-align: center;
  padding: 28px 12px 28px;
}
.kv-hero__title {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  color: var(--kd2-ink);
  letter-spacing: -0.01em;
}
.kv-hero__subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--kd2-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .kv-hero { padding: 40px 12px 36px; }
  .kv-hero__title { font-size: 40px; }
  .kv-hero__subtitle { font-size: 16px; }
}

.kv-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .kv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .kv-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1200px){ .kv-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.kv-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--kd2-line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(21, 49, 74, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kv-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(21, 49, 74, 0.10);
  border-color: var(--kd2-teal);
}
.kv-card:active { transform: translateY(-1px); }

.kv-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1A2332;
  overflow: hidden;
}
.kv-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.kv-card:hover .kv-card__thumb img { transform: scale(1.04); }

.kv-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
  color: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity .18s ease;
}
.kv-card__play::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform .18s ease, background .18s ease;
}
.kv-card__play svg {
  position: relative;
  color: var(--kd2-coral);
  margin-inline-start: 4px;  /* optical center the triangle */
}
.kv-card:hover .kv-card__play::before {
  transform: scale(1.08);
  background: var(--kd2-coral);
}
.kv-card:hover .kv-card__play svg { color: #FFFFFF; }

.kv-card__body {
  padding: 14px 16px 16px;
  min-height: 0;
}
.kv-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--kd2-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kv-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--kd2-muted);
}
.kv-empty svg { opacity: 0.4; margin-bottom: 16px; }
.kv-empty p { margin: 0; font-size: 15px; }

/* --- Lightbox modal --- */
body.kv-modal-open { overflow: hidden; }

.kv-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: kvFadeIn .2s ease;
}
/* Honor the HTML `hidden` attribute. Without this, `display: flex`
   above beats the UA's default `[hidden] { display: none }` rule. */
.kv-modal[hidden] { display: none !important; }
@keyframes kvFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 32, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.kv-modal__panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: kvPanelIn .22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes kvPanelIn {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.kv-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kv-modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}
.kv-modal__close:hover { background: rgba(255,255,255,0.18); }
.kv-modal__frame {
  aspect-ratio: 16 / 9;
  background: #000;
  width: 100%;
}
.kv-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 520px) {
  .kv-modal { padding: 0; align-items: stretch; }
  .kv-modal__panel { max-width: 100%; border-radius: 0; height: 100%; display: flex; flex-direction: column; }
  .kv-modal__frame { flex: 1 1 auto; }
}


/* ===============================================================
   Kids Videos — Watch page (single-video player view)
   =============================================================== */

.kv-watch {
  max-width: 1040px;
  padding-top: 16px;
}

.kv-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  color: var(--kd2-ink);
  background: #FFFFFF;
  border: 1px solid var(--kd2-line);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.kv-back:hover {
  background: var(--kd2-cream);
  border-color: var(--kd2-teal);
  color: var(--kd2-ink);
}
.kv-back:active { transform: translateX(-2px); }
[dir="rtl"] .kv-back:active { transform: translateX(2px); }

.kv-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(21, 49, 74, 0.14);
}
.kv-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 520px) {
  /* Let the player stretch across the full screen edges on phones */
  .kv-wrap.kv-watch { padding-left: 0; padding-right: 0; }
  .kv-back { margin-left: 14px; margin-right: 14px; }
  .kv-player { border-radius: 0; box-shadow: none; }
  .kv-watch__title, .kv-related__heading, .kv-related__row { padding-left: 14px; padding-right: 14px; }
}

.kv-watch__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}
.kv-watch__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--kd2-ink);
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 768px) {
  .kv-watch__title { font-size: 26px; }
}

/* Red YouTube-branded button: visible escape hatch for any video
   whose embed gets blocked by YouTube's anti-bot check. */
.kv-watch__yt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #FF0000;
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  box-shadow: 0 3px 10px rgba(255, 0, 0, 0.20);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  flex-shrink: 0;
}
.kv-watch__yt:hover {
  background: #E00000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 0, 0, 0.28);
  color: #FFFFFF !important;
}
.kv-watch__yt svg { flex-shrink: 0; }

/* --- Related videos row (horizontal scroll) --- */
.kv-related {
  margin-top: 32px;
}
.kv-related__heading {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--kd2-ink);
}
.kv-related__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
@media (min-width: 640px) {
  .kv-related__row { grid-auto-columns: minmax(240px, 260px); gap: 16px; }
}
.kv-related__row::-webkit-scrollbar {
  height: 8px;
}
.kv-related__row::-webkit-scrollbar-thumb {
  background: var(--kd2-line);
  border-radius: 8px;
}

.kv-related__card {
  display: block;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid var(--kd2-line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--kd2-ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kv-related__card:hover {
  transform: translateY(-2px);
  border-color: var(--kd2-teal);
  box-shadow: 0 8px 22px rgba(21, 49, 74, 0.09);
  color: var(--kd2-ink);
  text-decoration: none;
}
.kv-related__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1A2332;
  overflow: hidden;
}
.kv-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kv-card__play--sm::before {
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22) !important;
}
.kv-related__title {
  padding: 10px 12px 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Kids Videos — "not loading?" fallback notice under the player */
.kv-player__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FFF4E5;
  border: 1px solid #FFD9A8;
  color: #7A4A10;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.kv-player__notice:hover {
  background: #FFE8C8;
  border-color: #FFB870;
  color: #6A3F0A;
}
.kv-player__notice:active { transform: scale(0.995); }
.kv-player__notice > svg:first-child {
  flex-shrink: 0;
  color: #E8820D;
}
.kv-player__notice span {
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.4;
  min-width: 0;
}
.kv-player__notice strong {
  display: block;
  font-weight: 700;
  margin-bottom: 1px;
  color: #4B2E0A;
}
.kv-player__notice-arrow {
  flex-shrink: 0;
  color: #E8820D;
}
[dir="rtl"] .kv-player__notice-arrow { transform: scaleX(-1); }

@media (max-width: 520px) {
  .kv-player__notice {
    margin-left: 14px;
    margin-right: 14px;
    font-size: 13px;
  }
}


/* ===============================================================
   Homepage sections — Videos preview, Chatbot promo, Trust strip
   All classes are `kd-home-*` prefixed so they won't collide with
   anything else in this file.
   =============================================================== */

.kd-home-section {
  padding: 48px 16px;
  position: relative;
}
.kd-home-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .kd-home-section { padding: 72px 24px; }
}

/* Section head: eyebrow + title + subtitle on the left,
   big CTA pill on the right. Stacks on mobile. */
.kd-home-section__head {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
  align-items: end;
}
@media (min-width: 768px) {
  .kd-home-section__head {
    grid-template-columns: 1fr auto;
    align-items: end;
    margin-bottom: 36px;
  }
}
.kd-home-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(35, 200, 194, 0.12);
  color: #0F7A76;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kd-home-section__eyebrow--sun {
  background: rgba(255, 179, 43, 0.18);
  color: #A06708;
}
.kd-home-section__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  color: var(--kd2-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .kd-home-section__title { font-size: 36px; }
}
.kd-home-section__subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--kd2-muted);
  line-height: 1.55;
  max-width: 640px;
}
@media (min-width: 768px) {
  .kd-home-section__subtitle { font-size: 17px; }
}

.kd-home-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  width: fit-content;
}
.kd-home-section__cta--teal {
  background: linear-gradient(135deg, #23C8C2, #1AA39E);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(35, 200, 194, 0.28);
}
.kd-home-section__cta--teal:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(35, 200, 194, 0.38);
  color: #FFFFFF;
  filter: brightness(1.05);
}
.kd-home-section__cta--sun {
  background: linear-gradient(135deg, #FFB32B, #F58F14);
  color: #1F1710;
  box-shadow: 0 6px 18px rgba(255, 179, 43, 0.35);
}
.kd-home-section__cta--sun:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 179, 43, 0.48);
  color: #1F1710;
  filter: brightness(1.05);
}
[dir="rtl"] .kd-home-section__cta svg { transform: scaleX(-1); }

/* ---------- Videos preview section ---------- */
.kd-home-section--videos {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEFCFB 100%);
}
.kd-home-videos-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .kd-home-videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .kd-home-videos-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.kd-home-video {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
  border: 1px solid #E6EEF6;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kd-home-video:hover {
  transform: translateY(-3px);
  border-color: #23C8C2;
  box-shadow: 0 12px 28px rgba(21, 49, 74, 0.10);
  color: inherit;
  text-decoration: none;
}
.kd-home-video__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1A2332;
  overflow: hidden;
}
.kd-home-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.kd-home-video:hover .kd-home-video__thumb img { transform: scale(1.05); }
.kd-home-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.kd-home-video__play::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform .18s ease, background .18s ease;
}
.kd-home-video__play svg {
  position: relative;
  color: #FF6B6B;
  margin-inline-start: 3px;
}
.kd-home-video:hover .kd-home-video__play::before {
  background: #FF6B6B;
  transform: scale(1.1);
}
.kd-home-video:hover .kd-home-video__play svg { color: #FFFFFF; }

.kd-home-video__title {
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--kd2-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Chatbot promo section ---------- */
.kd-home-section--chat {
  background: #FFFFFF;
}
.kd-home-chat {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 36px 24px;
  background: linear-gradient(135deg, #FFF8ED 0%, #FFE9C7 100%);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  .kd-home-chat {
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: 48px;
    padding: 56px 48px;
  }
}
.kd-home-chat::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,179,43,0.2) 0%, rgba(255,179,43,0) 70%);
  pointer-events: none;
}
[dir="rtl"] .kd-home-chat::before { right: auto; left: -60px; }

.kd-home-chat__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .kd-home-chat__media { align-items: flex-start; }
}
.kd-home-chat__avatar {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #23C8C2, #1AA39E);
  display: grid;
  place-items: center;
  font-size: 56px;
  color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(35, 200, 194, 0.35);
  overflow: hidden;
  border: 4px solid #FFFFFF;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .kd-home-chat__avatar { width: 140px; height: 140px; font-size: 64px; }
}
.kd-home-chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-home-chat__dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  background: #10B981;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
  animation: kdHomeChatPulse 2s infinite;
}
[dir="rtl"] .kd-home-chat__dot { right: auto; left: 6px; }
@keyframes kdHomeChatPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.8; }
}

.kd-home-chat__bubble {
  max-width: 300px;
  padding: 14px 18px;
  background: #FFFFFF;
  border-radius: 18px;
  border-top-left-radius: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kd2-ink);
  box-shadow: 0 4px 16px rgba(21, 49, 74, 0.08);
  position: relative;
}
[dir="rtl"] .kd-home-chat__bubble {
  border-top-left-radius: 18px;
  border-top-right-radius: 4px;
}

.kd-home-chat__content {
  position: relative;
  z-index: 1;
}

.kd-home-chat__safe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 20px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #0C6B4E;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- Why Kurdolla (trust strip) ---------- */
.kd-home-section--why {
  background: #FFFBF2;
  border-top: 1px solid #F1E8DA;
}
.kd-home-why__title {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: var(--kd2-ink);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .kd-home-why__title { font-size: 30px; margin-bottom: 40px; }
}
.kd-home-why__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .kd-home-why__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.kd-home-why__item {
  text-align: center;
  padding: 24px 20px;
  background: #FFFFFF;
  border: 1px solid #F1E8DA;
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kd-home-why__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(21, 49, 74, 0.08);
}
.kd-home-why__item h3 {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--kd2-ink);
}
.kd-home-why__item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--kd2-muted);
}
.kd-home-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin: 0 auto;
}
.kd-home-why__icon--sky   { background: rgba(57, 183, 255, 0.14);  color: #1D7FBF; }
.kd-home-why__icon--teal  { background: rgba(35, 200, 194, 0.14);  color: #0F7A76; }
.kd-home-why__icon--coral { background: rgba(255, 107, 107, 0.14); color: #C63838; }


/* ===============================================================
   Homepage hero v2 — full-width video + overlay + centered CTAs
   =============================================================== */

.kd-hero--v2 {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 80px;
  overflow: hidden;
  isolation: isolate;
  color: #FFFFFF;
  text-align: center;
}
@media (min-width: 768px) {
  .kd-hero--v2 { min-height: 620px; padding: 72px 32px 100px; }
}
@media (min-width: 1200px) {
  .kd-hero--v2 { min-height: 680px; }
}

/* Video + overlay — sits behind the content (z-index 0, content is 1) */
.kd-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1A2332;  /* fallback if video fails */
}
.kd-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Top dark band for the sticky header legibility */
    linear-gradient(180deg, rgba(10, 18, 32, 0.55) 0%, rgba(10, 18, 32, 0) 28%),
    /* Center dim for text pop */
    linear-gradient(180deg, rgba(10, 18, 32, 0.15) 0%, rgba(10, 18, 32, 0.35) 100%),
    /* Brand tint */
    linear-gradient(135deg, rgba(35, 200, 194, 0.22) 0%, rgba(255, 107, 107, 0.18) 100%);
  pointer-events: none;
}

/* Floating decorative shapes */
.kd-hero__shape {
  position: absolute;
  display: inline-flex;
  color: #FFFFFF;
  opacity: 0.24;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
  animation: kdHeroFloat 8s ease-in-out infinite;
}
.kd-hero__shape svg { width: 100%; height: 100%; display: block; }
.kd-hero__shape--1 {
  width: 44px; height: 44px;
  top: 18%; left: 8%;
  color: var(--kd2-sun, #FFB32B);
  animation-delay: 0s;
}
.kd-hero__shape--2 {
  width: 38px; height: 38px;
  top: 62%; right: 10%;
  color: var(--kd2-coral, #FF6B6B);
  animation-delay: -2.5s;
}
.kd-hero__shape--3 {
  width: 46px; height: 46px;
  top: 28%; right: 14%;
  color: #FFFFFF;
  opacity: 0.18;
  animation-delay: -5s;
}
@media (max-width: 560px) {
  .kd-hero__shape--1 { top: 8%; left: 6%; width: 34px; height: 34px; }
  .kd-hero__shape--2 { top: 72%; right: 6%; width: 30px; height: 30px; }
  .kd-hero__shape--3 { top: 14%; right: 8%; width: 34px; height: 34px; }
}
@keyframes kdHeroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .kd-hero__shape { animation: none; }
  .kd-hero__video { opacity: 0.4; }
}

/* Content block */
.kd-hero__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.kd-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #0E5E65;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kd-hero__badge svg { color: var(--kd2-sun, #FFB32B); }

.kd-hero__title {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  max-width: 720px;
}
@media (min-width: 560px) { .kd-hero__title { font-size: 40px; } }
@media (min-width: 900px) { .kd-hero__title { font-size: 52px; line-height: 1.1; } }
@media (min-width: 1280px){ .kd-hero__title { font-size: 60px; } }

/* CTA row */
.kd-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.kd-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease, background .15s ease;
  white-space: nowrap;
}
.kd-hero__btn--primary {
  background: linear-gradient(135deg, var(--kd2-teal, #23C8C2), #1AA39E);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(35, 200, 194, 0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.kd-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(35, 200, 194, 0.55);
  color: #FFFFFF;
  filter: brightness(1.06);
}
.kd-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kd-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.85);
  color: #FFFFFF;
  transform: translateY(-2px);
}
.kd-hero__btn:active { transform: translateY(0); }

/* Stats row */
.kd-hero__stats {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.kd-hero__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  position: relative;
}
.kd-hero__stats li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: -14px;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
}
.kd-hero__stats strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.kd-hero__stats span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
@media (max-width: 480px) {
  .kd-hero__stats { gap: 20px; margin-top: 22px; }
  .kd-hero__stats li + li::before { inset-inline-start: -10px; height: 26px; }
  .kd-hero__stats strong { font-size: 18px; }
  .kd-hero__stats span { font-size: 11px; }
}

/* Scroll hint — a little mouse-scroll indicator at the bottom */
.kd-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  transition: border-color .2s ease;
}
.kd-hero__scroll:hover { border-color: #FFFFFF; }
.kd-hero__scroll span {
  display: block;
  width: 3px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 2px;
  animation: kdHeroScroll 1.6s ease-in-out infinite;
}
@keyframes kdHeroScroll {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
@media (max-width: 560px) {
  .kd-hero__scroll { bottom: 14px; width: 22px; height: 36px; }
}


/* ===============================================================
   Minimal footer — copyright + about + contact only
   =============================================================== */

.kd-footer-min {
  margin-top: 48px;
  padding: 18px 16px;
  background: #FFFFFF;
  border-top: 1px solid var(--kd2-line, #E6EEF6);
  color: var(--kd2-muted, #64748B);
  font-size: 13px;
  position: relative;
}
.kd-footer-min::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #39B7FF, #23C8C2, #FFB32B, #FF6B6B);
}
.kd-footer-min__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.kd-footer-min__copy {
  color: var(--kd2-muted, #64748B);
}
.kd-footer-min__links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kd-footer-min__links a {
  color: var(--kd2-muted, #64748B);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.kd-footer-min__links a:hover {
  color: var(--kd2-teal, #23C8C2);
  background: rgba(35, 200, 194, 0.08);
}
.kd-footer-min__links span {
  color: #CBD5E1;
}

@media (max-width: 520px) {
  .kd-footer-min__inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}