/*
 * TapTapGoose — Custom CSS
 * Complements Tailwind utility classes and handles animations,
 * transitions, and patterns that utility classes can't easily cover.
 * Brand: #ffc700 (brand yellow), #111111 (dark), white.
 */

/* ============================================================
   GLOBAL
   ============================================================ */

/* Smooth scrolling for anchor links (e.g. #how-it-works) */
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   TOUCH TAP FEEDBACK
   ============================================================ */

/* Hide iOS's default gray-rectangle tap highlight; the :active rule
   below provides nicer feedback that respects rounded corners. */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* On touch-only devices, give a brief "expand on press" feedback so taps
   feel acknowledged (since hover styles don't apply here). :active only
   persists while the finger is down, so it avoids iOS sticky-hover.
   Mirrors the lift/grow feel of the category cards on the landing page. */
@media (hover: none) {
  button:active,
  a[href]:active,
  [role="button"]:active,
  input[type="submit"]:active,
  input[type="button"]:active {
    transform: scale(1.05);
    transition: transform 0.15s ease-out;
  }
  /* Personalise's Exit/Done buttons already carry a static scale(1.25)
     on smaller viewports; layer the press feedback on top of that base. */
  @media (max-width: 1279px) {
    #exit-btn:active,
    #basket-btn:active {
      transform: scale(1.31);
    }
  }
}

/* ============================================================
   STICKY NAV — shadow on scroll
   Applied via JS when window.scrollY > 10
   ============================================================ */

#main-nav {
  transition: box-shadow 0.3s ease;
}


/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */

/* Animate the mobile menu sliding in */
#mobile-menu {
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb {
  font-size: 0.875rem;
  line-height: 1.25;
}

.breadcrumb a {
  color: #6b7280;
  transition: color 0.15s ease;
}

.breadcrumb a:hover {
  color: #ffc700;
}

/* ============================================================
   TRUST BAR — top bar below nav
   ============================================================ */

/* Ensure the trust bar items don't wrap awkwardly on small screens */
.trust-bar-item {
  white-space: nowrap;
}

/* ============================================================
   CATEGORY PAGE — card tiles
   ============================================================ */

/* Card tile hover lift: translateY for the physical "lift" feel */
.card-tile {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}


/* ============================================================
   PDF CANVAS — loading state and placeholder
   ============================================================ */

/* Wrapper maintains portrait aspect ratio; canvas + placeholder fill it */
.pdf-canvas-wrapper {
  position: relative;
  overflow: hidden;
}

/* Smooth fade-in when the canvas is rendered */
.pdf-thumb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

/* Placeholder shown while PDF loads — fades out once canvas is ready */
.pdf-placeholder {
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Bouncing loading dots animation */
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-6px); }
}

.pdf-loading-indicator > div {
  animation: bounce-dot 1s infinite;
}

/* ============================================================
   BADGE STYLES — New, Best Value, FREE
   ============================================================ */

/* "New" badge on card tiles and new-in strip */
.new-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

/* "Best Value" badge on storage tier cards */
.best-value-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* "FREE" / "Included Free" badge */
.free-badge {
  font-size: 0.65rem;
  font-weight: 700;
}

/* ============================================================
   NEW DESIGNS STRIP — horizontal scroll
   ============================================================ */

/* Hide scrollbar on the new designs strip (cross-browser) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* New design tiles hover lift */
.new-design-tile {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.new-design-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   LANDING — Category card hover
   ============================================================ */

.category-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   LANDING — Hero card mockup
   ============================================================ */

.card-mockup-hero {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ============================================================
   LANDING — How It Works step connector
   ============================================================ */

/* Dashed connector line between steps on desktop */
.steps-connector {
  border-top: 2px dashed rgba(255, 255, 255, 0.2);
}

/* ============================================================
   PERSONALISE PAGE — Card slider
   ============================================================ */

/* Individual slides — hidden via Tailwind .hidden, shown via JS */
.slide {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.slide.hidden {
  display: none;
}

/* Active dot in the slider indicator */
.slider-dot.active {
  background-color: #ffc700;
  border-color: #ffc700;
  transform: scale(1.3);
}

/* Inactive dots */
.slider-dot:not(.active) {
  background-color: #e5e7eb;
  border-color: #e5e7eb;
}

/* ============================================================
   PERSONALISE PAGE — Live message preview
   ============================================================ */

/* Preview pane inside Slide 2 — mirrors the feel of the real card inside */
#message-preview {
  min-height: 80px;
  transition: font-family 0.2s ease, font-size 0.2s ease, text-align 0.2s ease;
}

/* Placeholder text when nothing has been typed yet */
#message-preview.placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* ============================================================
   PERSONALISE PAGE — Selector pill buttons
   ============================================================ */

/* Font / size / alignment selector pills get a clear selected state */
.font-option,
.size-option,
.align-option {
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

/* ============================================================
   BASKET — Storage tier pricing cards
   ============================================================ */

/* Selected tier gets a brand border (CSS radio trick) */
.tier-card input:checked + .tier-card-inner {
  border-color: #ffc700;
}

/* ============================================================
   CHECKOUT — Progress steps
   ============================================================ */

.checkout-progress {
  /* Ensure step indicators don't get clipped on narrow screens */
  overflow-x: auto;
  white-space: nowrap;
}

/* ============================================================
   CHECKOUT — Form inputs
   ============================================================ */

.checkout-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.2);
}

/* ============================================================
   PRICING CARD STYLES
   ============================================================ */

.tier-card-inner {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* ============================================================
   DELIVERY OPTION CARDS
   ============================================================ */

.delivery-option-inner {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Cursive font used for card message preview when cursive font is selected */
.font-preview-cursive {
  font-family: 'Dancing Script', cursive;
}