/* ==========================================================================
   SHARED PACKAGE CARD — the homepage card design, applied everywhere else
   ==========================================================================

   The approved design lives in tbtk-packages-redesign.css, every rule of
   which is scoped to #logodeal. `id="logodeal"` appears on exactly one line
   in the codebase (partials/home/logo_packages.blade.php), which is why the
   approved look was homepage-only.

   This file re-applies the same card treatment to the identical card
   skeleton used elsewhere:

     .logo-slide.animated-package-card
       > .product-card
         > .tk-product-info
             .tk-title / .tk-category / .tk-price / .tk-more-button
             .tk-feature-list

   Rendered by services/detail-assets/packages.blade.php (every service-detail
   and graphic-design page), components/printing/packages-section.blade.php,
   and the legacy printing/sections/* views.

   The homepage is NOT excluded by selector, deliberately. An earlier version
   carried :not(.home-package-card), but that class is also used on
   package.blade.php — which has no #logodeal, so those cards got neither
   sheet and the page rendered nine legacy cards beside four approved ones.
   Every value below is copied verbatim from the approved #logodeal rules, so
   applying them to all package cards leaves the homepage pixel-identical
   (verified by measuring the homepage before and after) while giving
   package.blade.php and the service pages the same one design.

   No markup, package data, prices, feature lists, images or CTA routes are
   changed by this file — it restyles existing elements only. Section
   backgrounds are deliberately NOT touched: those vary per page
   (bgblack / bgplaingrey / bggrey) and changing them would reach far beyond
   the package cards.

   Values are copied from the approved implementation, not re-invented.
   ========================================================================== */

/* ---- Card -------------------------------------------------------------- */
.logo-slide.animated-package-card {
    /* `.logo-slide { border:none !important; box-shadow:… !important }` is a
       global rule in the layout, so these two can only be reclaimed with
       !important — same reason as the approved homepage rule. */
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    /* the legacy `.logo-slide` radius is also !important on these pages, so
       the approved 14px needs it too — verified by injection */
    border-radius: 14px !important;
    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 legacy card */
.logo-slide.animated-package-card::before {
    content: none;
}

/* HOVER IS NOT A THEME CHANGE.
   Two legacy rules flip this card's surface on hover, one of them global and
   !important (`.logo-slide:hover { background:#121111 !important }`). In dark
   mode that passed unnoticed; in light mode it turned the hovered card dark —
   a theme swap, not an interaction. Hover therefore restates the card's own
   surface a shade lighter and otherwise only touches transform/border/shadow. */
.logo-slide.animated-package-card:hover,
.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;
}

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

.logo-slide.animated-package-card:hover .featured-img,
.logo-slide.animated-package-card:focus-within .featured-img {
    transform: scale(1.03);
    filter: none;
}

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

.logo-slide.animated-package-card .tk-product-info .tk-category {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
}

.logo-slide.animated-package-card .tk-feature-list li {
    color: rgba(255, 255, 255, 0.72);
    /* The legacy rule sets `transition: color .2s, transform .2s`. Chromium
       does not re-resolve a TRANSITIONED property when a live theme toggle
       changes which rule matches, so these items kept the previous theme's
       colour until the next reload — dark mode showed the light-mode grey.
       A non-colour transition has to be DECLARED (not merely omitted):
       leaving it off would inherit `all` from the global rule. */
    transition: transform 0.2s ease;
}

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

/* ---- CTA --------------------------------------------------------------- */
.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;
}

.logo-slide.animated-package-card a.tk-more-button:hover,
.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);
}

.logo-slide.animated-package-card a.tk-more-button::after {
    content: none;
}

/* The CTA label must stay readable in every state — this is the exact
   failure that made the review CTAs invisible. */
.logo-slide.animated-package-card a.tk-more-button,
.logo-slide.animated-package-card a.tk-more-button:hover,
.logo-slide.animated-package-card a.tk-more-button:focus,
.logo-slide.animated-package-card a.tk-more-button:active {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* ==========================================================================
   LIGHT THEME — the site's existing data-tk-theme mechanism
   ========================================================================== */
html[data-tk-theme="light"] .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;
}

html[data-tk-theme="light"] .logo-slide.animated-package-card:hover,
html[data-tk-theme="light"] .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"] .logo-slide.animated-package-card .image-wrapper {
    background: #EEF2F5;
}

/* !important on these four colours only.

   servicedetails.blade.php carries per-slug overrides scoped as
   `#primary[data-service-slug="logo-design"] .logo-design-packages-section
   .tk-title` — an id plus an attribute selector, which a class selector
   cannot outrank however it is written. Those rules pin the card text white
   for the dark design, so in light mode the title and price measured 1.01:1
   (white on white) and the feature list 2.52:1. These are the minimum
   declarations needed to make the card readable in light mode; dark mode is
   untouched because this whole block is theme-scoped. */
html[data-tk-theme="light"] .logo-slide.animated-package-card .tk-title,
html[data-tk-theme="light"] .logo-slide.animated-package-card .tk-price {
    color: #0A0D0F !important;
    -webkit-text-fill-color: #0A0D0F !important;
}

html[data-tk-theme="light"] .logo-slide.animated-package-card .tk-product-info .tk-category {
    color: #8A929B !important;
    -webkit-text-fill-color: #8A929B !important;
}

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

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

/* Some non-home cards carry a struck-through sale price with a hardcoded
   inline `color:#fff` (services/detail-assets/packages.blade.php). Inline
   styles win over stylesheets, so the readable light-mode colour is pinned
   here — the only !important on a colour in this file. */
html[data-tk-theme="light"] .logo-slide.animated-package-card .tk-sale-price {
    color: #8A929B !important;
    -webkit-text-fill-color: #8A929B !important;
}

/* ---- Package note ("Domain & hosting not included.") under the features - */
.logo-slide.animated-package-card .package-card-note {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
}

html[data-tk-theme="light"] .logo-slide.animated-package-card .package-card-note {
    color: #6B737C !important;
    -webkit-text-fill-color: #6B737C !important;
}

/* ---- Website packages (config/website_packages.php) ----------------------
   Small additions for the website cards only: tagline, "View full
   specifications" (a native <details>, works without JS on desktop and
   mobile), the optional AI services box and the stronger border on the
   recommended Business Growth card. Colours reuse the card's own values and
   the brand blue #0073FC. */
.logo-slide.animated-package-card.website-package-card--recommended {
    border: 2px solid #0073fc !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 0 3px rgba(0, 115, 252, 0.18),
        0 6px 16px rgba(0, 0, 0, 0.42) !important;
}

.logo-slide.animated-package-card.website-package-card {
    position: relative;
}

.logo-slide.animated-package-card.website-package-card .home-package-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    max-width: calc(100% - 32px);
    padding: 7px 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f26417, #0073fc);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

.logo-slide.animated-package-card .website-package-tagline {
    margin: 4px 0 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}

.logo-slide.animated-package-card .website-package-specs {
    margin-top: 10px;
}

.logo-slide.animated-package-card .website-package-specs > summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
    color: #4d9dff;
    -webkit-text-fill-color: #4d9dff;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
}

.logo-slide.animated-package-card .website-package-specs > summary::-webkit-details-marker {
    display: none;
}

.logo-slide.animated-package-card .website-package-specs > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}

.logo-slide.animated-package-card .website-package-specs[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.logo-slide.animated-package-card .website-package-specs > summary:focus-visible {
    outline: 2px solid #0073fc;
    outline-offset: 3px;
    border-radius: 4px;
}

.logo-slide.animated-package-card .website-package-specs__close,
.logo-slide.animated-package-card .website-package-specs[open] .website-package-specs__open {
    display: none;
}

.logo-slide.animated-package-card .website-package-specs[open] .website-package-specs__close {
    display: inline;
}

.logo-slide.animated-package-card .website-package-ai {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 10px;
}

.logo-slide.animated-package-card .website-package-ai__title {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}

.logo-slide.animated-package-card .website-package-ai ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.logo-slide.animated-package-card .website-package-ai li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
}

html[data-tk-theme="light"] .logo-slide.animated-package-card .website-package-tagline,
html[data-tk-theme="light"] .logo-slide.animated-package-card .website-package-ai__title {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
}

html[data-tk-theme="light"] .logo-slide.animated-package-card .website-package-ai {
    border-color: #cfd8e3;
}

html[data-tk-theme="light"] .logo-slide.animated-package-card .website-package-ai li {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

html[data-tk-theme="light"] .logo-slide.animated-package-card .website-package-specs > summary {
    color: #0063d8;
    -webkit-text-fill-color: #0063d8;
}

/* Desktop: line up the price and the button across the website cards even
   when a title or tagline wraps to another line. */
@media (min-width: 992px) {
    .logo-slide.animated-package-card.website-package-card .tk-product-info {
        display: flex;
        flex-direction: column;
        min-height: 236px;
    }

    .logo-slide.animated-package-card.website-package-card .tk-product-info > .tk-line:not(:first-child) {
        margin-top: auto;
    }
}

html[data-tk-theme="light"] .logo-slide.animated-package-card.website-package-card--recommended,
html[data-tk-theme="light"] #logodeal .logo-slide.animated-package-card.website-package-card--recommended {
    border: 2px solid #0073fc !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.14), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

#logodeal .logo-slide.animated-package-card.website-package-card--recommended {
    border: 2px solid #0073fc !important;
}