/* ============================================================
   imagirlfriday.com — Core Base Styles & Fluid Typography
   ============================================================ */

:root {
    --primary-color: #DD127B;
    --accent-color: #DD127B;
    --secondary-color: #6c757d;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 20px;
    }
}

/* Base Body settings - fallback if classes are missing */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Outfit', sans-serif !important;
}

/* ── Fluid Typography Utilities (clamp-based responsive sizes) ── */
.fluid-h1 {
    font-size: clamp(1.85rem, 4.5vw + 1rem, 3.25rem) !important;
    line-height: 1.2 !important;
}

.fluid-h2 {
    font-size: clamp(1.5rem, 3vw + 0.8rem, 2.5rem) !important;
    line-height: 1.3 !important;
}

.fluid-h3 {
    font-size: clamp(1.25rem, 2.2vw + 0.5rem, 1.85rem) !important;
    line-height: 1.35 !important;
}

.fluid-lead {
    font-size: clamp(0.95rem, 1vw + 0.65rem, 1.25rem) !important;
    line-height: 1.6 !important;
}

.fluid-body-sm {
    font-size: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem) !important;
}

/* Selection highlight matches brand accent */
::selection {
    background-color: rgba(221, 18, 123, 0.2);
    color: #1A1A1A;
}

/* Micro-animations and transitions */
a, button {
    transition: all 0.2s ease;
}

@keyframes soft-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
.animate-soft-bounce {
    display: inline-block;
    animation: soft-bounce 2.5s infinite ease-in-out;
}

/* Slow, premium cross-fade transition for Bootstrap Carousel */
.carousel-fade .carousel-item {
    transition: opacity 1.2s ease-in-out !important;
}

/* ── Redesigned 3D Package Deck Showcase ── */
.deck-container {
    perspective: 1200px;
}
.deck-card {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    transform-origin: center bottom;
}
.deck-card.active {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    z-index: 30;
    opacity: 1;
    pointer-events: auto;
}
.deck-card.prev {
    transform: translate3d(-30%, 8%, -150px) scale(0.82) rotate(-8deg);
    z-index: 10;
    opacity: 0.55;
    pointer-events: auto;
}
.deck-card.next {
    transform: translate3d(30%, 8%, -150px) scale(0.82) rotate(8deg);
    z-index: 10;
    opacity: 0.55;
    pointer-events: auto;
}
.deck-card:hover:not(.active) {
    opacity: 0.85; /* Visual transition without 3D position shift to prevent cursor flickering */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments for 3D deck */
@media (max-width: 640px) {
    .deck-card.prev {
        transform: translate3d(-20%, 4%, -100px) scale(0.85) rotate(-5deg);
    }
    .deck-card.next {
        transform: translate3d(20%, 4%, -100px) scale(0.85) rotate(5deg);
    }
}

/* Scroll margin offset for sticky navbar */
#rotation-tiers,
#package-standard,
#package-premium,
#package-signature {
    scroll-margin-top: 100px;
}

/* ── Special Offer Header Pill ── */
.special-offer-pill {
    border: 1.5px solid rgba(221, 18, 123, 0.45);
    background-color: rgba(253, 240, 247, 0.85);
    color: #DD127B;
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
    box-shadow: 0 2px 6px rgba(221, 18, 123, 0.08);
    max-width: 280px;
    min-width: 40px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
}
.special-offer-pill:hover,
.special-offer-pill:focus {
    background-color: rgba(221, 18, 123, 0.15) !important;
    border-color: rgba(221, 18, 123, 0.65) !important;
    color: #B01560 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(221, 18, 123, 0.12);
}
.special-offer-pill:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(221, 18, 123, 0.05);
}

/* Modal formatting styles */
.special-offer-modal .modal-content {
    border-radius: 24px;
    border: 1px solid rgba(221, 18, 123, 0.15);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.special-offer-modal .modal-header {
    border-bottom: 1px solid rgba(221, 18, 123, 0.08);
    background: linear-gradient(135deg, #FFF9FC 0%, #FAF5F8 100%);
    padding: 1.25rem 1.5rem;
}
.special-offer-modal .modal-body {
    padding: 1.75rem 1.5rem;
}
.special-offer-modal .modal-footer {
    border-top: 1px solid rgba(221, 18, 123, 0.08);
    background-color: #FAF5F8;
    padding: 1rem 1.5rem;
}

/* ── Tier Tab Sliding Pill ── */
.tier-pill-indicator,
.duration-pill-indicator {
    position: absolute;
    border-radius: 0.75rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 5;
}
.tier-pill-indicator {
    background: linear-gradient(135deg, #DD127B 0%, #B01560 100%);
    box-shadow: 0 2px 8px rgba(221, 18, 123, 0.3);
}
.duration-pill-indicator {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(221, 18, 123, 0.12);
}

/* ── Rotation Carousel (mobile horizontal scroll) ── */
.rotation-carousel {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.rotation-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* ── Line clamp utility ── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}