/* === Gateway Tiles Grid === */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

/* === Individual Tiles === */
.tile {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 70%);
  background-size: 200% 200%;
  background-position: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-position 0.4s ease;
}

/* Hover tilt + zoom + parallax */
.tile:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  background-position: 40% 40%;
}

/* === Tile Images === */
.tile img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlideIn 0.6s ease forwards;
  transition: transform 0.4s ease;
}

/* Hover zoom */
.tile:hover img { transform: scale(1.08); }

/* Click feedback */
.tile img:active {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}

/* === Tile Titles === */
.tile h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: #333;
}

/* === Tile Links === */
.tile a {
  text-decoration: none;
  color: inherit;
}

/* === Responsive tweak for small screens === */
@media (max-width: 500px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* === Dark mode overrides (prefers-color-scheme) === */
@media (prefers-color-scheme: dark) {
  .tile {
    background: #0f1115;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
    color: #e7eaf0;
  }
  .tile img {
    filter: brightness(0.95) contrast(1.05) saturate(1.05);
  }
  .tile-label,
  .tile h3 {
    color: #e7eaf0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  }
  .tile:hover {
    box-shadow: 0 16px 36px rgba(0,0,0,0.6);
  }
}

/* === Dark mode overrides (Bootstrap theme attribute) === */
:root[data-bs-theme="dark"] .tile {
  background: #0f1115;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  color: #e7eaf0;
}
:root[data-bs-theme="dark"] .tile img {
  filter: brightness(0.95) contrast(1.05) saturate(1.05);
}
:root[data-bs-theme="dark"] .tile-label,
:root[data-bs-theme="dark"] .tile h3 {
  color: #e7eaf0;
}

/* === Header flex container (logo + welcome + divisions) === */
header .header-flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 2rem;
}

/* Logo + Welcome text side by side */
header .logo-welcome {
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}

/* Welcome text styling */
header .welcome-text {
  font-family: 'Dancing Script', cursive;
  font-size: 2.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Main logo */
.main-logo img {
  max-height: 120px;
  opacity: 0;
  animation: logoFade 1s ease-out forwards 0.3s;
}

/* Division group */
.division-group {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}

.division-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  animation: navFade 0.6s ease-out forwards;
}
.division-block:nth-child(1) { animation-delay: 0.5s; }
.division-block:nth-child(2) { animation-delay: 0.7s; }
.division-block:nth-child(3) { animation-delay: 0.9s; }

/* Division logos */
.division-logo img {
  max-height: 100px;
  margin-bottom: 0.5rem;
}

/* Division buttons */
.division-btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff !important;           /* force white by default */
  text-decoration: none;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.2s ease;
}

.division-btn:link,
.division-btn:visited {
  color: #fff !important;           /* keep white on normal/visited */
}

.division-btn:hover,
.division-btn:focus,
.division-btn:focus-visible {
  color: #000 !important;           /* switch to black on hover/focus */
}

.division-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-25deg);
}

.division-btn:hover::after {
  animation: spotlight 0.75s ease-out;
}

/* Division button colors */
.meetmarco-btn { background-color: #c30000; }
.goshopping-btn { background-color: #004c58; }
.bookings-btn  { background-color: #112855; }

/* Unified hover color (text turns black via rules above) */
.meetmarco-btn:hover,
.goshopping-btn:hover,
.bookings-btn:hover,
.meetmarco-btn:focus,
.goshopping-btn:focus,
.bookings-btn:focus {
  background-color: #b7b7b7;
}

/* === Responsive adjustments === */
@media (max-width: 992px) {
  header .header-flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem;
  }
  .division-group {
    justify-content: center;
    flex-wrap: wrap;
  }
  .main-logo img { max-height: 100px; }
  .division-logo img { max-height: 80px; }
  .division-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

/* === Animations === */
@keyframes headerFadeSlide { to { opacity: 1; transform: translateY(0); } }
@keyframes logoFade        { to { opacity: 1; } }
@keyframes navFade         { to { opacity: 1; } }
@keyframes spotlight       { to { left: 125%; } }
@keyframes fadeSlideIn     { to { opacity: 1; transform: translateY(0); } }

/* === Large-screen tweaks === */
@media (min-width: 993px) {
  .division-group {
    position: relative;
    left: -16px;
  }
  header .header-flex {
    justify-content: flex-start !important;
    gap: clamp(2rem, 4vw, 5rem);
  }
}
/* === Gateway Intro Animations === */
.intro-container {
  opacity: 0;
  transform: translateY(20px);
  animation: introFadeSlide 0.8s ease-out forwards;
}
.intro-image {
  opacity: 0;
  transform: translateX(-30px) scale(1.05);
  animation: introImageCurtain 1s ease-out forwards 0.3s;
}
.intro-text {
  opacity: 0;
  transform: translateX(30px);
  animation: introTextCurtain 0.8s ease-out forwards 0.5s;
  color: #000;
}
.intro-buttons .btn {
  opacity: 0;
  transform: translateY(10px);
  animation: buttonFadeUp 0.5s ease-out forwards;
}
.intro-buttons .btn:nth-child(1) { animation-delay: 0.8s; }
.intro-buttons .btn:nth-child(2) { animation-delay: 1s; }
.intro-buttons .btn:nth-child(3) { animation-delay: 1.2s; }

/* Force white, bold labels within this module's grid */
#mod-custom164 .tile-grid a,
#mod-custom164 .tile-grid a:link,
#mod-custom164 .tile-grid a:visited {
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

#mod-custom164 .tile-grid a:hover,
#mod-custom164 .tile-grid a:focus {
  color: #ffeb3b !important; /* optional: high-contrast hover */
}
/* ======= second half of file begins now ======= */
/* =========================================
   Cassiopeia Information Footer Styling
   ========================================= */

/* Footer grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* Footer block headings */
.footer-block h4 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #fff;
  border-bottom: 2px solid #39ff14; /* neon green underline */
  display: inline-block;
  padding-bottom: 0.25rem;
}

/* Footer links */
.footer-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-block ul li {
  margin-bottom: 0.5rem;
}
.footer-block a {
  color: #eee;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-block a:hover {
  color: #39ff14;
}

/* Footer bottom line */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 0.5rem;
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 0.5rem;
}

/* Footer button links */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.footer-btn {
  flex: 1 1 30%;
  text-align: center;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}
.footer-btn:hover {
  background: #39ff14;
  color: #000;
  border-color: #39ff14;
}

/* Special colors for division buttons */
.meetmarco-btn { background-color: #c30000; }
.goshopping-btn { background-color: #004c58; }
.bookings-btn  { background-color: #112855; }
.meetmarco-btn:hover,
.goshopping-btn:hover,
.bookings-btn:hover {
  background-color: #39ff14;
  color: #000;
}

/* Company address */
.company-address {
  font-style: normal;
  color: #ccc;
  margin-top: 0.5rem;
  line-height: 1.4;
  font-size: 0.85rem;
}
/* =========================================
   ORDER PAGES STYLING (scoped to order pages)
   ========================================= */

/* ==== Page wrapper ==== */
.order-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ==== Hero wrapper ==== */
.order-hero {
  text-align: center;
  margin-bottom: 2rem;
}

/* ==== Division-specific hero gradients ==== */
.hero-banner.sunpower {
  background: linear-gradient(135deg, #f9d423, #ff4e50);
}

.hero-banner.partypack {
  background: linear-gradient(135deg, #FF4DA6, #FF2D55, #C10D74);
}

.hero-banner.superpack {
  background: linear-gradient(135deg, #5B86E5, #36D1DC, #0FB9B1);
}

.hero-banner.recyclepack {
  background: linear-gradient(135deg, #6EE7B7, #3CB371, #2E8B57);
}

.hero-banner.tailorpack {
  background: linear-gradient(135deg, #c7ccd3, #9ea5af); /* sleek grey gradient */
}

/* ==== Media block (video + calendar grid) ==== */
.media-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* ==== Responsive video wrapper ==== */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ==== Calendar section ==== */
.order-calendar {
  margin: 2rem 0;
}

/* ==== Order action button ==== */
.order-action {
  text-align: center;
  margin-top: 2rem;
}

.btn-order {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 30px;
  background: #27ae60;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn-order:hover {
  background: #2ecc71;
}

/* =========================================
   PACKAGES PAGE — Tailorpack full-width card
   ========================================= */

/* Stretch Tailorpack across the entire grid */
.packages-grid .package-card.tailorpack {
  grid-column: 1 / -1;              /* span full width */
  background: linear-gradient(180deg, #f0f2f5 0%, #d9dde3 100%); /* light/mid grey */
  color: #111;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 12px;
  border: 1px solid #c9ced6;
}

.packages-grid .package-card.tailorpack h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.packages-grid .package-card.tailorpack p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.packages-grid .package-card.tailorpack .btn-select {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid #555;
  color: #222;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.packages-grid .package-card.tailorpack .btn-select:hover {
  background: #555;
  color: #fff;
  border-color: #333;
}

/* ==== Tailorpack hero ==== */
.hero-banner.tailorpack {
  background: linear-gradient(135deg, #c7ccd3, #9ea5af);
  padding: 2rem;
  text-align: center;
  color: #fff;
}

/* Transparent oval back button */
.options-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.8);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.options-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

/* Provisional item list */
.provisional-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
}
.provisional-items h3 {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
}
.item-card {
  background: #f7f8fa;
  border: 1px solid #e0e4ea;
  border-radius: 10px;
  padding: 0.9rem;
}
.item-card .meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: #5b636e;
}

/* Proceed button */
.btn-order {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: #4A00E0;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease;
}
.btn-order:hover {
  background: #2d007a;
}
/* =========================================
   TAILORPACK ORDER PAGE
   ========================================= */

body.alias-tailorpack-order .hero-banner {
  background: linear-gradient(135deg, #c7ccd3, #9ea5af);
  color: #fff;
}

/* =========================================
   Back-to-options button (all order pages)
   ========================================= */

.order-hero {
  position: relative; /* anchor for absolute button */
}

.back-to-options {
  position: absolute;
  bottom: -3rem;   /* always inside bottom edge */
  left: -2rem;     /* always inside left edge */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;       /* fixed round button */
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ccc;
  color: #333;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
  z-index: 10;
  overflow: hidden;  /* ensures no stray text */
}

.back-to-options:hover {
  background: #f0f0f0;
  border-color: #999;
  color: #000;
}

.back-to-options i {
  font-size: 1.4rem; /* bigger arrow */
  line-height: 1;
}

/* =========================================
   Package Order Page Buttons (softened)
   ========================================= */

/* Sunpower */
body.alias-sunpower-order .book-banner .btn {
  background-color: rgba(255, 179, 71, 0.7); /* Sunpower orange, 70% */
  color: #fff;
}

/* Partypack */
body.alias-partypack-order .book-banner .btn {
  background-color: rgba(255, 95, 109, 0.7); /* Partypack coral, 70% */
  color: #fff;
}

/* Superpack */
body.alias-superpack-order .book-banner .btn {
  background-color: rgba(54, 209, 220, 0.7); /* Superpack aqua, 70% */
  color: #fff;
}

/* Recyclepack */
body.alias-recyclepack-order .book-banner .btn {
  background-color: rgba(86, 171, 47, 0.7); /* Recyclepack green, 70% */
  color: #fff;
}

/* Tailorpack */
body.alias-tailorpack-order .book-banner .btn {
  background-color: rgba(68, 68, 68, 0.7); /* Tailorpack grey, 70% */
  color: #fff;
}

/* Hover: solid + subtle lift */
body[class*="-order"] .book-banner .btn:hover {
  background-color: rgba(20, 169, 0, 1); /* unified green hover */
  transform: translateY(-2px);
}

.hero-banner .package-icon {
  display: block;
  margin: 0 auto 1rem;
  font-size: 2.8rem;   /* for Font Awesome icons */
  width: 2.8rem;       /* for SVGs */
  height: 2.8rem;
  color: #fff;         /* adjust per gradient if needed */
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

:root {
  --road-height: 76px;
  --truck-scale: 1;
}

body.alias-sunpower-order,
body.alias-partypack-order,
body.alias-superpack-order,
body.alias-recyclepack-order,
body.alias-tailorpack-order {
  --road-height: 76.8px;
  --truck-scale: 0.8;
}

.road-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--road-height);
  border-top: 4px solid #222;
  overflow: hidden;
  z-index: 9999;

  background-image:
    /* Layer 1: dashed line */
    repeating-linear-gradient(to right, transparent 0, transparent 30px, #fff 30px, #fff 42px),
    /* Layer 2: asphalt (bottom 65%) */
    linear-gradient(to top, #444 65%, transparent 65%),
    /* Layer 3: verge strip (10px tall, vivid green) */
    linear-gradient(to top, #3a5f2d 0%, #6fa85f 100%),
    /* Layer 4: sky gradient */
    linear-gradient(to top, skyblue 0%, #b3e5ff 60%, #ffffff 100%);
  
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
  background-size:
    45px 4px,       /* dashed line */
    100% 100%,      /* asphalt */
    100% 12px,      /* verge thickness */
    100% 100%;      /* sky */
  
  background-position:
    0 calc(100% - 10px), /* dashed line */
    center bottom,       /* asphalt */
    center calc(100% - var(--road-height) + 65%), /* verge strip */
    center top;          /* sky */
}

/* === Roadstrip Global Styles === */
:root {
  --road-height: 76.8px;
  --truck-scale: 1;
}

body.alias-sunpower-order,
body.alias-partypack-order,
body.alias-superpack-order,
body.alias-recyclepack-order,
body.alias-tailorpack-order {
  --road-height: 76.8px;
  --truck-scale: 0.8;
  padding-bottom: var(--road-height);
}

.road-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--road-height);
  z-index: 9999;
  overflow: hidden;
  border-top: 4px solid #222;

  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 30px, #fff 30px, #fff 42px),
    linear-gradient(to top, #444 65%, transparent 65%),
    linear-gradient(to top, #3a5f2d 0%, #6fa85f 100%),
    linear-gradient(to top, skyblue 0%, #b3e5ff 60%, #ffffff 100%);
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
  background-size: 45px 4px, 100% 100%, 100% 12px, 100% 100%;
  background-position: 0 calc(100% - 10px), center bottom, center calc(100% - var(--road-height) + 65%), center top;

  box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
  animation: roadPulse 6s ease-in-out infinite;
}

@keyframes roadPulse {
  0%, 100% { box-shadow: 0 -4px 12px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 -6px 18px rgba(0,0,0,0.8); }
}

/* === Mobile Adjustments === */
/* Hide only tree1.png on mobile, except on XYZ-order pages */
@media (max-width: 480px) {
  body:not(.alias-partypack-order):not(.alias-recyclepack-order):not(.alias-tailorpack-order):not(.alias-superpack-order):not(.alias-sunpower-order)
    .road-strip img[src*="tree1.png"] {
      display: none !important;
  }
}

/* white-text contract in module advanced>class suffix */
.white-text {
  color: #ffffff;
}
.white-text h1,
.white-text h2,
.white-text h3 {
  color: #ffffff;
}

/* White box for Notebook page (Itemid=109) */
body.itemid-109 #content {
  background-color: #ffffff;   /* white background for text */
  color: #000000;              /* black text for readability/printing */
  padding: 20px;
  border-radius: 8px;          /* optional rounded corners */
  box-shadow: 0 0 10px rgba(0,0,0,0.2); /* subtle shadow */
}