/* ===================================================================
   MyPickDiary (選物日寄) brand theme overlay
   Loaded LAST (after style.css + inline overrides in css.blade.php)
   so it wins the cascade without needing !important almost anywhere.
   Do not delete zapolo/style.css — this file only re-skins colors,
   type, radius and a handful of components on top of it.
=================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
    /* brand palette */
    --mpd-cream:        #FBF3E7;
    --mpd-cream-deep:   #F4E7D3;
    --mpd-white:        #FFFFFF;
    --mpd-ink:          #3D3229;   /* headings / dark text */
    --mpd-body:         #6B5D52;   /* muted body text */
    --mpd-line:         rgba(61,50,41,.10);

    --mpd-primary:      #C1875A;   /* caramel brown — CTA */
    --mpd-primary-dark: #A66F45;
    --mpd-primary-light:#F2E3D3;

    --mpd-blue:         #4A90C4;   /* logo blue */
    --mpd-gold:         #E8A93E;   /* logo gold */
    --mpd-terracotta:   #D9773F;

    --mpd-footer-bg:    #40301F;
    --mpd-footer-bg-2:  #332617;

    --mpd-radius-lg: 28px;
    --mpd-radius-md: 18px;
    --mpd-radius-sm: 12px;
    --mpd-shadow-sm: 0 10px 24px rgba(61,50,41,.08);
    --mpd-shadow-md: 0 16px 40px rgba(61,50,41,.10);
    --mpd-shadow-lg: 0 26px 60px rgba(61,50,41,.14);

    --mpd-font-latin: 'Baloo 2', 'Quicksand', sans-serif;
    --mpd-font-zh:    'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;

    /* --- re-point the zapolo template's own variables at our palette ---
       most .btn-primary / badges / links / hovers read these already,
       so this alone re-colors a large share of the site safely. */
    --primary: var(--mpd-primary);
    --primary-hover: var(--mpd-primary-dark);
    --primary-dark: var(--mpd-primary-dark);
    --secondary: var(--mpd-blue);
    --rgba-primary-1: rgba(193,135,90,.1);
    --rgba-primary-2: rgba(193,135,90,.2);
    --rgba-primary-3: rgba(193,135,90,.3);
    --rgba-primary-4: rgba(193,135,90,.4);
    --rgba-primary-5: rgba(193,135,90,.5);
    --rgba-primary-6: rgba(193,135,90,.6);
    --rgba-primary-7: rgba(193,135,90,.7);
    --rgba-primary-8: rgba(193,135,90,.8);
    --rgba-primary-9: rgba(193,135,90,.9);
    --gradient: linear-gradient(135deg, #C1875A 0%, #D9A066 100%);
    --gradient-sec: linear-gradient(135deg, #4A90C4 0%, #6BAFD9 100%);
    --title: var(--mpd-ink);
    --font-family-base: var(--mpd-font-zh);
    --font-family-title: var(--mpd-font-latin), var(--mpd-font-zh);
    --border-radius-base: 14px;
}

/* ---------- 2. Base ---------- */
html, body{
    background: var(--mpd-cream);
}
body{
    color: var(--mpd-body);
    font-family: var(--mpd-font-zh);
}
h1,h2,h3,h4,h5,h6,
.title, .widget-title, .footer-title, .modal-title{
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    color: var(--mpd-ink);
    font-weight: 700;
}
a{ color: var(--mpd-primary); }
a:hover{ color: var(--mpd-primary-dark); }

::selection{ background: var(--mpd-primary-light); color: var(--mpd-ink); }

.page-content{ background: var(--mpd-cream) !important; }
.bg-white{ background: var(--mpd-cream) !important; }

/* ---------- 3. Buttons ---------- */
.btn{
    border-radius: 999px;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    font-weight: 700;
    letter-spacing: .01em;
}
.btn-primary, .wp-block-button__link{
    background: var(--mpd-primary) !important;
    border-color: var(--mpd-primary) !important;
    box-shadow: 0 14px 30px rgba(193,135,90,.28);
}
.btn-primary:hover, .wp-block-button__link:hover{
    background: var(--mpd-primary-dark) !important;
    border-color: var(--mpd-primary-dark) !important;
}
.btn-white{
    background: var(--mpd-white) !important;
    color: var(--mpd-ink) !important;
    border-color: var(--mpd-line) !important;
}
.btn-white:hover{
    background: var(--mpd-primary-light) !important;
    color: var(--mpd-primary-dark) !important;
}
.btn-outline-primary{
    color: var(--mpd-primary) !important;
    border-color: var(--mpd-primary) !important;
}
.btn-outline-primary:hover{
    background: var(--mpd-primary) !important;
    color: #fff !important;
}

/* ---------- 4. Cards / panels generic polish ---------- */
.card, .form-control, .form-select, .input-group-text{
    border-radius: var(--mpd-radius-sm) !important;
}
.shadow, .shadow-secondary{
    box-shadow: var(--mpd-shadow-md) !important;
}

/* ---------- 5. Header ---------- */
.site-header.header.style-2{
    background: transparent;
}
.site-header.header.style-2 .main-bar-wraper,
.site-header.header.style-2 .main-bar{
    background: rgba(251,243,231,.92) !important;
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 4px 24px rgba(61,50,41,.06);
}
.site-header.header.style-2 .header-nav .nav.navbar-nav > li > a{
    color: var(--mpd-ink) !important;
    font-weight: 600;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
}
.site-header.header.style-2 .header-nav .nav.navbar-nav > li > a:hover,
.site-header.header.style-2 .header-nav .nav.navbar-nav > li.active > a{
    color: var(--mpd-primary) !important;
}
.site-header.header.style-2 .header-nav .nav .sub-menu,
.site-header.header.style-2 .header-nav .nav .mega-menu{
    background: var(--mpd-white);
    border-radius: var(--mpd-radius-md);
    box-shadow: var(--mpd-shadow-lg);
    border: 1px solid var(--mpd-line);
    overflow: hidden;
}
.site-header.header.style-2 .header-nav .nav .sub-menu li a,
.site-header.header.style-2 .header-nav .nav .mega-menu li a{
    color: var(--mpd-ink) !important;
}
.site-header.header.style-2 .header-nav .nav .sub-menu li a:hover,
.site-header.header.style-2 .header-nav .nav .mega-menu li a:hover{
    color: var(--mpd-primary) !important;
    background: var(--mpd-primary-light);
}
.site-header.header.style-2 .aw-top-tool > a{
    border-radius: 999px;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.site-header .extra-nav .line-btn{
    background: #06C755;
    color: #fff !important;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 14px;
}
.site-header .extra-nav .line-btn i{ color: #fff !important; }
.site-header .navbar-toggler span{ background: var(--mpd-ink) !important; }

/* keep header solid/light in every state (home + inner, scrolled + top) */
body.is-home header.home-mobile-sticky,
#mainHeader, #mainHeader .main-bar-wraper{
    background: rgba(251,243,231,.96) !important;
}
body.is-home .page-content{ padding-top: var(--aw-header-h, 0px); }

/* ---------- 6. Parcel-tracking modal — light card to match brand ---------- */
.tracking-modal .tracking-modal-content{
    background: var(--mpd-white) !important;
    border: 1px solid var(--mpd-line) !important;
    border-radius: var(--mpd-radius-lg) !important;
    box-shadow: var(--mpd-shadow-lg) !important;
}
.tracking-modal .tracking-modal-content:before{ display: none; }
.tracking-modal .tracking-modal-header{
    background: var(--mpd-cream) !important;
    border-bottom: 1px solid var(--mpd-line) !important;
}
.tracking-modal .tracking-modal-icon{
    background: var(--mpd-primary) !important;
    border: none !important;
    color: #fff !important;
}
.tracking-modal .modal-title{ color: var(--mpd-ink) !important; }
.tracking-modal .tracking-modal-subtitle{ color: var(--mpd-body) !important; }
.tracking-modal .tracking-btn-close{ filter: none !important; }
.tracking-modal .tracking-label{ color: var(--mpd-ink) !important; }
.tracking-modal .tracking-input-prefix{
    background: var(--mpd-cream) !important;
    border: 1px solid var(--mpd-line) !important;
    color: var(--mpd-primary-dark) !important;
}
.tracking-modal .tracking-input{
    background: var(--mpd-white) !important;
    border: 1px solid var(--mpd-line) !important;
    color: var(--mpd-ink) !important;
}
.tracking-modal .tracking-input::placeholder{ color: rgba(61,50,41,.4) !important; }
.tracking-modal .tracking-input:focus{
    background: var(--mpd-white) !important;
    border-color: var(--mpd-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(193,135,90,.15) !important;
    color: var(--mpd-ink) !important;
}
.tracking-modal .tracking-btn-outline{
    border-color: var(--mpd-line) !important;
    color: var(--mpd-body) !important;
}
.tracking-modal .tracking-btn-outline:hover{
    background: var(--mpd-cream) !important;
}
.tracking-modal .tracking-modal-hint{ color: var(--mpd-body) !important; }

/* ---------- 7. Footer ---------- */
.site-footer.style-2{
    background: var(--mpd-footer-bg) !important;
}
.site-footer .footer-title{ color: #fff !important; }
.site-footer .footer-title:after{ background: var(--mpd-gold) !important; }
.site-footer .widget_getintuch li,
.site-footer .widget_services ul li a,
.site-footer .copyright-text,
.site-footer p{
    color: rgba(255,255,255,.72) !important;
}
.site-footer .widget_services ul li a:hover,
.site-footer .footer-link li a:hover{
    color: var(--mpd-gold) !important;
}
.site-footer .widget_getintuch li i{ color: var(--mpd-gold) !important; }
.site-footer .footer-bottom{
    background: var(--mpd-footer-bg-2) !important;
    border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .footer-box{
    background: var(--mpd-primary);
    border-radius: var(--mpd-radius-lg);
    padding: 40px;
}
.site-footer .footer-box .title{ color: #fff !important; }

/* mpd logo lockup helper classes (used by inc/logo.blade.php) */
.mpd-logo{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mpd-logo-text{ display: flex; flex-direction: column; line-height: 1.15; }
.mpd-logo-cn{ font-family: var(--mpd-font-zh); font-weight: 900; font-size: 19px; color: var(--mpd-ink); }
.mpd-logo-en{ font-family: var(--mpd-font-latin); font-weight: 700; font-size: 10px; letter-spacing: .12em; color: var(--mpd-primary-dark); text-transform: uppercase; }
.mpd-logo-tag{ font-family: var(--mpd-font-zh); font-size: 10px; letter-spacing: .05em; color: var(--mpd-body); margin-top: 2px; }
.mpd-logo.mpd-logo-light .mpd-logo-cn{ color: #fff; }
.mpd-logo.mpd-logo-light .mpd-logo-en{ color: rgba(255,255,255,.85); }
.mpd-logo.mpd-logo-light .mpd-logo-tag{ color: rgba(255,255,255,.6); }

/* ---------- 8. Generic section rhythm helpers for reskinned pages ---------- */
.mpd-section{ padding: 90px 0; }
.mpd-section-alt{ background: var(--mpd-cream-deep); }
.mpd-kicker{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 18px; border-radius: 999px;
    background: var(--mpd-primary-light); color: var(--mpd-primary-dark);
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 16px;
}
.mpd-card{
    background: var(--mpd-white);
    border: 1px solid var(--mpd-line);
    border-radius: var(--mpd-radius-lg);
    box-shadow: var(--mpd-shadow-sm);
}

@media (max-width: 767.98px){
    .mpd-section{ padding: 56px 0; }
}