/* ==========================================================================
   "Choose Your Package" section — brought into the navbar/hero/services
   design system.

   Markup, package data, prices, feature lists, images, category keys, tab
   logic and CTA routes are untouched; this file only restyles the existing
   elements.

   Everything is scoped to #logodeal. `.logo-slide.animated-package-card`,
   `.tk-more-button`, `.tk-feature-list` and `.home-section-heading` are all
   shared with other pages (package.blade.php, servicedetails.blade.php,
   services/detail-assets/*) and with the Services/Process sections on this
   page — none of those may change in this pass.

   Tokens reused, not reinvented — identical to the Services section:
     accent        var(--primary-color)  #0073FC
     dark surface  linear-gradient(rgb(32,37,42), rgb(25,29,33))
                   + inset 0 1px 0 rgba(255,255,255,.09)
     light ground  #F3F6F8      light ink  #0A0D0F / #626B75
     card border   rgba(255,255,255,.07)  /  rgba(15,23,42,.08)
   ========================================================================== */

/* ---- Section ground ---------------------------------------------------- */
/* Continues the exact near-black the Services section settles on, so there
   is no seam between them. */
#logodeal.home-packages-section {
    position: relative;
    background: #0A0C0D;
}

/* ---- Section header ---------------------------------------------------- */
#logodeal .home-section-kicker {
    margin-bottom: 10px;
    color: var(--primary-color, #0073FC);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

#logodeal .home-section-heading {
    /* was clamp(30px,4vw,48px) of dead space before the tab bar */
    margin-bottom: 26px;
}

#logodeal .home-section-heading h2 {
    color: #F3F5F7;
    font-size: clamp(30px, 3.4vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.06;
}

#logodeal .home-section-heading p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    line-height: 1.62;
}

/* ---- Category tabs ----------------------------------------------------- */
#logodeal .home-package-tabs {
    gap: 6px;
    margin-bottom: 30px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 3px 7px rgba(0, 0, 0, 0.5);
}

#logodeal .home-package-tab {
    min-height: 36px;
    padding: 0 15px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#logodeal .home-package-tab:hover,
#logodeal .home-package-tab:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

/* The orange→blue gradient is replaced by the same blue surface the hero's
   primary CTA uses. */
#logodeal .home-package-tab.is-active {
    border-color: transparent;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.42);
    color: #FFFFFF;
}

/* ---- Package card ------------------------------------------------------ */
#logodeal .logo-slide.animated-package-card {
    max-width: 384px;
    /* `.logo-slide { border: none !important; box-shadow: … !important }` is a
       global rule in the layout used by several other pages, so these two
       properties can only be reclaimed with !important. Scoped to #logodeal,
       nothing outside this section is affected. */
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 6px 16px rgba(0, 0, 0, 0.42) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* The orange radial halo behind the card is gone. */
#logodeal .logo-slide.animated-package-card::before {
    content: none;
}

/* HOVER IS NOT A THEME CHANGE.

   Two legacy rules flip this card's surface on hover:
     .logo-slide.animated-package-card:hover { background: dark gradient }
     .logo-slide:hover { background: #121111 !important }   (global)
   In dark mode that passed unnoticed; in light mode it turned the hovered
   card dark — a theme swap, not an interaction. The second one carries
   !important, so the surface can only be pinned back with !important.
   Hover therefore restates the card's own dark surface (a shade lighter)
   and otherwise only touches transform / border / shadow. */
#logodeal .logo-slide.animated-package-card:hover,
#logodeal .logo-slide.animated-package-card:focus-within {
    transform: translateY(-2px);
    border-color: rgba(0, 115, 252, 0.28) !important;
    background: linear-gradient(rgb(38, 44, 50), rgb(29, 34, 39)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 10px 22px rgba(0, 0, 0, 0.5) !important;
}

#logodeal .logo-slide.animated-package-card .image-wrapper {
    border-radius: 10px;
}

/* The saturate/contrast punch on hover belonged to the old treatment. */
#logodeal .logo-slide.animated-package-card:hover .featured-img,
#logodeal .logo-slide.animated-package-card:focus-within .featured-img {
    transform: scale(1.03);
    filter: none;
}

/* ---- Card type --------------------------------------------------------- */
#logodeal .logo-slide.animated-package-card .tk-title,
#logodeal .logo-slide.animated-package-card .tk-price {
    color: #F3F5F7;
    text-shadow: none;
}

#logodeal .home-package-card .tk-product-info .tk-category {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
}

#logodeal .home-package-delivery {
    color: var(--primary-color, #0073FC);
    font-weight: 700;
}

#logodeal .home-package-card .tk-product-info p.tk-price {
    color: #FFFFFF;
}

#logodeal .logo-slide.animated-package-card .tk-feature-list li {
    color: rgba(255, 255, 255, 0.72);
}

#logodeal .logo-slide.animated-package-card .tk-feature-list li:hover {
    color: #FFFFFF;
}

/* ---- START NOW --------------------------------------------------------- */
/* Same blue CTA language as the hero's primary button. */
#logodeal .logo-slide.animated-package-card a.tk-more-button {
    /* beats the global `.logo-slide a.tk-more-button { padding:5px 20px !important }` */
    padding: 9px 20px !important;
    border-radius: 11px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.45);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#logodeal .logo-slide.animated-package-card a.tk-more-button:hover,
#logodeal .logo-slide.animated-package-card a.tk-more-button:focus-visible {
    transform: translateY(-1px);
    filter: none;
    background: linear-gradient(var(--primary-color-light, #66ACFF), var(--primary-color, #0073FC));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 5px 12px rgba(0, 0, 0, 0.5);
}

/* the sweeping white shimmer belonged to the old button */
#logodeal .logo-slide.animated-package-card a.tk-more-button::after {
    content: none;
}

/* ---- POPULAR badge ----------------------------------------------------- */
#logodeal .home-package-tag {
    top: 16px;
    right: 16px;
    padding: 5px 10px;
    border-radius: 8px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.4);
    font-size: 8.5px;
    font-weight: 800;
}

/* ==========================================================================
   LIGHT THEME — the site's existing data-tk-theme mechanism.
   ========================================================================== */
html[data-tk-theme="light"] #logodeal.home-packages-section {
    background: #F3F6F8;
}

html[data-tk-theme="light"] #logodeal .home-section-heading h2 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #logodeal .home-section-heading p {
    color: #626B75;
}

/* ---- Light tabs -------------------------------------------------------- */
html[data-tk-theme="light"] #logodeal .home-package-tabs {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 18px rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] #logodeal .home-package-tab {
    color: #626B75;
}

html[data-tk-theme="light"] #logodeal .home-package-tab:hover,
html[data-tk-theme="light"] #logodeal .home-package-tab:focus-visible {
    background: rgba(15, 23, 42, 0.05);
    color: #0A0D0F;
}

html[data-tk-theme="light"] #logodeal .home-package-tab.is-active {
    color: #FFFFFF;
}

/* ---- Light cards ------------------------------------------------------- */
html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card {
    border-color: rgba(15, 23, 42, 0.08) !important;
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

/* The light card stays light on hover — same surface, one shade cooler. */
html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card:hover,
html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card:focus-within {
    border-color: rgba(0, 115, 252, 0.3) !important;
    background: linear-gradient(#FFFFFF, #F4F7F9) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 24px rgba(15, 23, 42, 0.11) !important;
}

html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card .image-wrapper {
    background: #EEF2F5;
}

html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card .tk-title,
html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card .tk-price,
html[data-tk-theme="light"] #logodeal .home-package-card .tk-product-info p.tk-price {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #logodeal .home-package-card .tk-product-info .tk-category {
    color: #8A929B;
}

html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card .tk-feature-list li {
    color: #4A535D;
}

html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card .tk-feature-list li:hover {
    color: #0A0D0F;
}

html[data-tk-theme="light"] #logodeal .home-package-delivery {
    color: var(--primary-color, #0073FC);
}

/* The "View package details" control (mobile only — index.blade.php hides it
   from 768px up). Nothing was missing from the card: the toggle was simply
   painted for the dark card, with color rgba(255,255,255,.86) on a
   rgba(255,255,255,.04) fill and a rgba(255,255,255,.08) top border. On the
   light card that is white-on-white, which is the blank strip under the
   price. Same element, same behaviour, light-mode colours only — the feature
   list above it was already #4A535D and needed nothing. */
html[data-tk-theme="light"] #logodeal .package-details-toggle {
    border-top-color: rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.035);
    color: #2F373F;
}

/* the chevron is the affordance — give it the section's blue */
html[data-tk-theme="light"] #logodeal .package-details-toggle i {
    color: var(--primary-color, #0073FC);
}

/* ---- Trust row under the cards ----------------------------------------- */
/* Free Expert Consultation / No Hidden Charges / Satisfaction Guarantee.
   The colour used to come from a hardcoded style="color:#fff" on each link,
   which no stylesheet could theme — that attribute was removed from
   partials/home/logo_packages.blade.php so these rules can take over. */
#logodeal .pricing-benefit-list,
#logodeal .pricing-benefit-list li,
#logodeal .pricing-benefit-list li a {
    color: rgba(255, 255, 255, 0.62);
}

#logodeal .pricing-benefit-list li a:hover {
    color: #FFFFFF;
}

/* The three markers are flat single-hue green PNGs (#3CBE4B), so they cannot
   be recoloured with `color`. These values were solved against the CSS
   filter matrices (clamping between stages, as the real pipeline does) so
   the icons land on exactly rgb(0,115,252) — the same --primary-color the
   navbar icons, hero and package CTAs use. Verified by sampling the painted
   pixels off a canvas. Scoped to this row; no other image is filtered. */
#logodeal .pricing-benefit-list li img {
    filter: hue-rotate(110deg) saturate(4.7);
}

html[data-tk-theme="light"] #logodeal .pricing-benefit-list,
html[data-tk-theme="light"] #logodeal .pricing-benefit-list li,
html[data-tk-theme="light"] #logodeal .pricing-benefit-list li a {
    color: #5F6872;
}

html[data-tk-theme="light"] #logodeal .pricing-benefit-list li a:hover {
    color: #0A0D0F;
}