/* ==========================================================================
   MyPetDMV shared components
   Loaded on every page, late in <head> (see inc/mpdmv-frontend.php). Most of
   these rules used to be printed inside <body> by templates and shortcodes.
   ========================================================================== */

/* ==========================================================================
   Header announcement bar (moved from header.php and custom-header.php)
   ========================================================================== */
.announcement-bar {
    background-image: url(https://www.kittykickstix.com/cdn/shop/files/announcement_bar_paw_vector_left.png?v=1647442841),url(https://www.kittykickstix.com/cdn/shop/files/announcement_bar_paw_vector.png?v=1647442841);
    background-position: left,right;
    background-repeat: no-repeat,no-repeat;
    width: 100%;
    max-height: 72px;
    font-size:18px;
}

@media screen and (max-width: 450px) {

  .announcement-bar {
    background-image: none;
    font-size:14px;
  }
}

/* ==========================================================================
   Paw icon: inline SVG (Font Awesome Free 6.7.2 "paw", CC BY 4.0) instead of
   the whole Font Awesome stylesheet and font. Same box as the old <i class="fa
   fa-paw">: 1em square, sitting 0.125em below the text baseline, in the text
   colour. Rules like ".design-btn i" still size and rotate it.
   ========================================================================== */
.mpdmv-fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-style: normal;
    vertical-align: -0.125em;
}
.mpdmv-fa svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: visible;
}

/* ==========================================================================
   "Design" buttons that are links now
   They were <button>s inside <a>, which HTML doesn't allow, so the link itself
   now carries the button classes. Links pick up the theme's link colours
   (a:visited purple, a:hover midnightblue, underline on hover) that buttons
   never got, so these rules give back the old button colours in every state.
   ========================================================================== */
a.mpdmv-btn-link:link,
a.mpdmv-btn-link:visited {
    text-decoration: none;
}
/* Mobile header "Design": white text; dark text on hover, like the old .btn button. */
a.cta-btn.mpdmv-btn-link:link,
a.cta-btn.mpdmv-btn-link:visited {
    color: #fff;
}
a.cta-btn.mpdmv-btn-link:hover,
a.cta-btn.mpdmv-btn-link:focus {
    color: #333;
}
/* Homepage "Design My Pet's ID Card": white text in every state, and the line
   height buttons got from style.css ("body, button, input ... line-height: 1.5"). */
a.cta-button.mpdmv-btn-link {
    line-height: 1.5;
}
a.cta-button.mpdmv-btn-link:link,
a.cta-button.mpdmv-btn-link:visited,
a.cta-button.mpdmv-btn-link:hover,
a.cta-button.mpdmv-btn-link:focus,
a.cta-button.mpdmv-btn-link:active {
    color: #fff;
    text-decoration: none;
}
/* style.css gives focused and pressed buttons this inset look; same weight (0,1,1) as "button:focus". */
a:where(.mpdmv-btn-link):focus,
a:where(.mpdmv-btn-link):active {
    border-color: #aaa #bbb #bbb;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Headings that changed level but must look the same
   ========================================================================== */
/* Sidebar widget titles and archive post titles: <h1> -> <h2>. */
h2.mpdmv-h1-look {
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}
/* Checkout "Billing details": <h3> -> <h2> (it came straight after the page's H1). */
.woocommerce-billing-fields h2.mpdmv-checkout-heading {
    font-size: 24px;
}

/* ==========================================================================
   Customer reviews widget [customer_reviews] (moved from customer-review.php)
   ========================================================================== */
        .mdv-reviews-section{
            padding:40px 20px;
            background:#f7f9fc;
            margin:35px 0;
            border-radius:20px;
            color:#404040;
        }

        .mdv-review-heading{
            text-align:center;
            font-size:28px;
            line-height:1.3;
            margin:0 0 12px;
            color:#173552;
        }

        .mdv-review-summary{
            max-width:760px;
            margin:0 auto 32px;
            text-align:center;
        }

        .mdv-review-score-row{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            margin-bottom:10px;
        }

        .mdv-review-score{
            font-size:24px;
            font-weight:800;
            color:#173552;
        }

        .mdv-review-stars{
            color:#ffb400;
            font-size:22px;
            letter-spacing:1px;
            line-height:1;
        }

        .mdv-review-summary-text{
            font-size:15px;
            line-height:1.7;
            color:#404040;
            margin:0;
        }

        .mdv-review-summary-text strong{
            color:#173552;
            font-weight:700;
        }

        .mdv-reviews-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
            gap:20px;
        }

        .mdv-review-card{
            background:#fff;
            border:1px solid #e5eaf1;
            padding:18px;
            border-radius:14px;
            box-shadow:0 10px 25px rgba(23,53,82,0.06);
        }

        .mdv-review-name{
            font-weight:700;
            margin-bottom:6px;
            color:#173552;
        }

        .mdv-stars{
            color:#ffb400;
            margin-bottom:8px;
            letter-spacing:1px;
        }

        .mdv-review-rating-number{
            font-size:13px;
            color:#606060;
            margin-left:6px;
            letter-spacing:0;
        }

        .mdv-review-text{
            font-size:14px;
            line-height:1.6;
            color:#404040;
            margin:0;
        }

        .mdv-load-more-wrap{
            text-align:center;
            margin-top:30px;
        }

        .mdv-load-more-btn{
            padding:12px 28px;
            background:#00ccff;
            color:#173552;
            border:none;
            cursor:pointer;
            border-radius:999px;
            font-size:14px;
            font-weight:700;
            transition:all .25s ease;
        }

        .mdv-load-more-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 10px 24px rgba(0,204,255,0.28);
        }

        @media(max-width:600px){
            .mdv-reviews-section{
                padding:32px 16px;
                border-radius:16px;
            }

            .mdv-review-heading{
                font-size:24px;
            }

            .mdv-review-score-row{
                flex-direction:column;
                gap:4px;
            }

            .mdv-reviews-grid{
                grid-template-columns:1fr;
            }
        }



/* ==========================================================================
   [offer_section] shortcode (moved from functions.php)
   ========================================================================== */
        .offer_container{
            /*font-family: 'Roboto', sans-serif; */
            display: grid;
            grid-template-columns: 1fr;
            max-width: 1400px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
            background-color: #f5f7fa;
        }
        .card_container_state{
            display: grid;
            grid-template-columns: 60% 40%;
            gap: 20px;
        }
        .card-header{
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .card-header h2{
            font-size: 2em;
            font-weight: 700;
            margin: 0;
        }
        .card-header h3{
            font-size: 1.3em;
            font-weight: 500;
            margin: 10px 0;
            color: #c96610;
        }
        .card-header p{
            font-size: 1em;
            margin: 10px 0;
            color: #333;
        }
        .cta-buttons{
            margin-top: 20px;
        }
        .open-btn{
            background-color: #f9821a;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .open-btn:hover{
            background-color: #c96610;
        }
        /* "Design now" is a real link now (it was a button with an onclick redirect,
           which search engines can't follow). Same look as the old button in every link state. */
        a.open-btn{
            display: inline-block;
            text-align: center;
        }
        .offer_container a.open-btn:link,
        .offer_container a.open-btn:visited,
        .offer_container a.open-btn:hover,
        .offer_container a.open-btn:focus,
        .offer_container a.open-btn:active{
            color: #fff;
            text-decoration: none;
        }
        .learn-more{
            margin-left: 15px;
            font-size: 1em;
            color: #c96610;
            text-decoration: none;
        }
        .learn-more:hover{
            text-decoration: underline;
        }
        .footnote{
            margin-top: 20px;
            font-size: 0.875em;
            color: #666;
        }
        .card-image {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-image img{
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            max-height: 390px;
            margin-top: 13px;
        }
        .offer_container a{
            color:#2995b0;
        }
        @media(max-width:768px){
            .offer_container{
                margin-top:0;
                padding-top:0;
            }
            .card_container_state{
                grid-template-columns: 1fr;
            }
            .card-header{
                padding-top:10px;
                margin-top:0;
            }
        }



/* ==========================================================================
   Cart pillow recommendation spinner (moved from functions.php)
   ========================================================================== */
@keyframes mpdrecospin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Footer (moved from footer.php). Kept last: it was the last style block on every page.
   ========================================================================== */
/* ==========================================================================
   MyPetDMV footer: standalone styles
   - Every class starts with "mpdf-" and every rule is scoped under
     .mpdf-footer, so it can't collide with (or inherit from) your old CSS.
   - Needs the Poppins font (see the <link> in mpdf-footer.html).
   - Sizes are in px, so the footer looks the same even if your site
     changes the root font-size (e.g. the 62.5% trick).
   ========================================================================== */

.mpdf-footer {
  --mpdf-navy: #0f2a45;
  --mpdf-brand: #00ccff;
  --mpdf-brand-dark: #006dc6;
  --mpdf-accent: #f9821a;
  --mpdf-line: rgba(255, 255, 255, 0.1);

  display: block;
  margin: 40px 0 0 0;
  background: var(--mpdf-navy);
  color: rgba(255, 255, 255, 0.7);
  font: 400 16px/1.5 "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

}

/* Local reset (zero-specificity :where, so the classes below always win) */
.mpdf-footer *,
.mpdf-footer *::before,
.mpdf-footer *::after { box-sizing: border-box; }
.mpdf-footer :where(p, h3, ul, li) { margin: 0; padding: 0; }
.mpdf-footer :where(ul) { list-style: none; }
.mpdf-footer :where(a) { color: inherit; text-decoration: none; }
.mpdf-footer :where(img, svg) { display: block; max-width: 100%; }

/* Layout container */
.mpdf-footer__inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* ---------- Call-to-action strip ---------- */
.mpdf-footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--mpdf-line);
}
.mpdf-footer__cta-info { display: flex; align-items: center; gap: 16px; }
.mpdf-footer__cta-icon {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 16px; background: var(--mpdf-brand);
}
.mpdf-footer__cta-icon svg { width: 24px; height: 24px; color: var(--mpdf-navy); transform: rotate(-12deg); }
.mpdf-footer__cta-title { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.025em; color: #fff; }
.mpdf-footer__cta-text { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.55); }

.mpdf-footer__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 8px; background: var(--mpdf-brand); color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 204, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mpdf-footer__btn:hover { background: var(--mpdf-brand-dark); transform: translateY(-2px); }
.mpdf-footer__btn svg { width: 16px; height: 16px; transform: rotate(-12deg); }

/* ---------- Main grid: brand + 3 link columns ---------- */
.mpdf-footer__main { display: grid; gap: 40px; padding: 48px 0; }

.mpdf-footer__logo-box { display: inline-block; padding: 8px; border-radius: 8px; background: #fff; }
.mpdf-footer__logo { height: 40px; width: auto; }
.mpdf-footer__about { max-width: 320px; margin-top: 16px; font-size: 14px; line-height: 1.625; color: rgba(255, 255, 255, 0.55); }
.mpdf-footer__follow { margin-top: 20px; }
.mpdf-footer__follow .mpdf-footer__label { margin-bottom: 12px; }

/* small uppercase labels ("Follow Us", column titles, "As Seen On") */
.mpdf-footer__label,
.mpdf-footer__col-title {
  font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
}
.mpdf-footer__col-title { margin-bottom: 16px; }

.mpdf-footer__social { display: flex; gap: 10px; }
.mpdf-footer__social-link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--mpdf-line); border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05); color: var(--mpdf-brand);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mpdf-footer__social-link:hover { transform: translateY(-2px); border-color: var(--mpdf-accent); color: var(--mpdf-accent); }
.mpdf-footer__social-link svg { width: 20px; height: 20px; }

.mpdf-footer__list > li + li { margin-top: 10px; }
.mpdf-footer__link {
  font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mpdf-footer__link:hover { color: var(--mpdf-brand); }

/* ---------- "As seen on" + guarantees ---------- */
.mpdf-footer__media {
  display: grid; align-items: center; gap: 24px;
  padding: 32px 0; border-top: 1px solid var(--mpdf-line);
}
.mpdf-footer__seen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.mpdf-footer__seen-box { padding: 8px 12px; border-radius: 8px; background: #fff; }
.mpdf-footer__seen-img { height: 28px; width: auto; }
.mpdf-footer__badges { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.mpdf-footer__badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.55);
}
.mpdf-footer__badge svg { flex: none; width: 16px; height: 16px; color: var(--mpdf-brand); }

/* ---------- Copyright row ---------- */
.mpdf-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 24px 0; border-top: 1px solid var(--mpdf-line);
  font-size: 11px; color: rgba(255, 255, 255, 0.4);
}
.mpdf-footer__disclaimer { max-width: 576px; text-align: center; }

/* ---------- Keyboard focus + reduced motion ---------- */
.mpdf-footer a:focus-visible { outline: 2px solid var(--mpdf-brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .mpdf-footer * { transition: none !important; }
  .mpdf-footer a:hover { transform: none !important; }
}

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  .mpdf-footer__inner { padding: 0 32px; }
  .mpdf-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpdf-footer__disclaimer { text-align: right; }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 1024px) {
  .mpdf-footer__main { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .mpdf-footer__media { grid-template-columns: auto 1fr; }
  .mpdf-footer__badges { justify-content: flex-end; }
}

/* ==========================================================================
   Footer link-state fix
   The theme's global rules (a:visited { color: purple } and
   a:hover / a:focus / a:active { color: midnightblue }) out-ranked the
   single-class footer rules, so visited links and the button text turned dark
   purple on the navy background. These selectors are more specific, so the
   footer colours win in every link state. Plain hex colours are used on
   purpose: browsers restrict :visited rules (no transparency changes).
   ========================================================================== */

/* Text links: normal + visited look the same; hover / press / keyboard focus go cyan */
.mpdf-footer a.mpdf-footer__link:link,
.mpdf-footer a.mpdf-footer__link:visited { color: #9faab5; }
.mpdf-footer a.mpdf-footer__link:hover,
.mpdf-footer a.mpdf-footer__link:active,
.mpdf-footer a.mpdf-footer__link:focus-visible { color: #00ccff; }

/* "Create Your Pet ID" button: always white text */
.mpdf-footer a.mpdf-footer__btn:link,
.mpdf-footer a.mpdf-footer__btn:visited { color: #ffffff; }

/* Social icons: cyan, orange on hover / press */
.mpdf-footer a.mpdf-footer__social-link:link,
.mpdf-footer a.mpdf-footer__social-link:visited { color: #00ccff; }
.mpdf-footer a.mpdf-footer__social-link:hover,
.mpdf-footer a.mpdf-footer__social-link:active { color: #f9821a; }

/* Never let the theme underline footer links in any state */
.mpdf-footer a:link,
.mpdf-footer a:visited,
.mpdf-footer a:hover,
.mpdf-footer a:focus,
.mpdf-footer a:active { text-decoration: none; }