/* ============================================================
   PHATZ CLOTHING – Main Stylesheet  |  Retro Bold Aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Permanent+Marker&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --gold:    #F5C842;
    --gold-dk: #C89A1A;
    --navy:    #1A2A5E;
    --navy-dk: #0D1733;
    --sky:     #5AB4D6;
    --cream:   #FFF3D4;
    --white:   #FFFFFF;
    --red:     #E8412A;
    --green:   #2ECC71;
    --text:    #1A2A5E;
    --bg:      #FFF8EC;
    --radius:  8px;
    --shadow:  4px 4px 0px var(--navy);
    --font-display: 'Bebas Neue', sans-serif;
    --font-fun:     'Permanent Marker', cursive;
    --font-body:    'Nunito', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; }
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }

/* ---- TICKER ---- */
.ticker-wrap { background: var(--navy); color: var(--gold); overflow: hidden; white-space: nowrap; padding: 6px 0; font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; }
.ticker { display: inline-block; animation: ticker 28s linear infinite; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ---- HEADER ---- */
.site-header { background: var(--navy-dk); border-bottom: 4px solid var(--gold); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: .6rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.logo-img { height: 70px; width: auto; }
.main-nav { display: flex; gap: 1.5rem; flex: 1; justify-content: center; }
.main-nav a { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; color: var(--cream); padding: 4px 0; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--gold); border-bottom-color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: .8rem; }
.cart-btn { position: relative; background: var(--gold); color: var(--navy-dk); font-family: var(--font-display); font-size: 1rem; letter-spacing: .06em; padding: 8px 16px; border-radius: var(--radius); border: 2px solid var(--gold-dk); cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; align-items: center; gap: 6px; }
.cart-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow); }
.cart-badge { background: var(--red); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-family: var(--font-body); font-weight: 800; }
.nav-toggle { display: none; background: none; border: none; color: var(--gold); font-size: 1.8rem; cursor: pointer; }

/* ---- HERO ---- */
.hero { background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 60%, #2a4070 100%); color: var(--white); padding: 4rem 1.5rem 3rem; text-align: center; position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(0deg,transparent,transparent 18px,rgba(90,180,214,.07) 18px,rgba(90,180,214,.07) 19px); pointer-events:none; }
.hero-logo { width: 200px; margin: 0 auto 1.5rem; }
.hero h1 { font-family: var(--font-display); font-size: clamp(3rem,10vw,7rem); letter-spacing: .06em; line-height: 1; color: var(--gold); text-shadow: 4px 4px 0 var(--navy-dk), 0 0 30px rgba(245,200,66,.4); }
.hero-tagline { font-family: var(--font-fun); font-size: clamp(1.2rem,4vw,2rem); color: var(--sky); margin: .5rem 0 1.5rem; }
.hero-sub { font-size: 1rem; color: var(--cream); max-width: 500px; margin: 0 auto 2rem; line-height: 1.6; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- BUTTONS ---- */
.btn { display: inline-block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; padding: 12px 28px; border-radius: var(--radius); border: 3px solid; cursor: pointer; transition: transform .15s, box-shadow .15s; text-align: center; }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(0,0,0,.25); }
.btn-primary   { background: var(--gold); color: var(--navy-dk); border-color: var(--gold-dk); }
.btn-secondary { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-navy      { background: var(--navy); color: var(--white); border-color: var(--navy-dk); }
.btn-red       { background: var(--red); color: var(--white); border-color: #b52d1d; }
.btn-sm        { font-size: .9rem; padding: 8px 18px; }
.btn-full      { width: 100%; display: block; }

/* ---- SIZE STRIP ---- */
.size-strip { background: var(--gold); padding: .8rem 1rem; text-align: center; border-top: 3px solid var(--gold-dk); border-bottom: 3px solid var(--gold-dk); }
.size-strip-inner { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 900px; margin: 0 auto; }
.size-pill { font-family: var(--font-display); font-size: .85rem; letter-spacing: .06em; padding: 4px 10px; border-radius: 20px; border: 2px solid var(--navy); background: var(--navy); color: var(--cream); }
.size-pill.plus { background: var(--red); border-color: #8B0000; color: #fff; }

/* ---- SECTIONS ---- */
.section { padding: 3rem 1.5rem; }
.section-title { font-family: var(--font-display); font-size: clamp(2rem,5vw,3.2rem); letter-spacing: .06em; color: var(--navy); text-align: center; margin-bottom: .4rem; }
.section-sub { text-align: center; color: #555; margin-bottom: 2rem; font-size: 1rem; }
.section-divider { width: 60px; height: 5px; background: var(--gold); margin: .5rem auto 2rem; border-radius: 3px; }

/* ---- PRODUCT CARDS ---- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.product-card { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; position: relative; cursor: pointer; }
.product-card:hover { transform: translate(-4px,-4px); box-shadow: 6px 6px 0 var(--navy); }
.product-badge { position: absolute; top: 10px; left: 10px; background: var(--red); color: #fff; font-family: var(--font-display); font-size: .8rem; letter-spacing: .06em; padding: 3px 10px; border-radius: 4px; z-index: 2; }
.product-badge.plus-badge { background: var(--sky); color: var(--navy-dk); }
.product-img-wrap { background: linear-gradient(135deg,var(--navy) 0%,#2a4070 100%); height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-img-placeholder { font-size: 4rem; opacity: .6; }
.product-body { padding: 1rem; }
.product-name { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--navy); margin-bottom: 4px; }
.product-desc { font-size: .82rem; color: #666; margin-bottom: .8rem; line-height: 1.5; }
.product-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--red); margin-bottom: .8rem; }
.product-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .8rem; }
.sz { font-size: .7rem; font-weight: 700; padding: 2px 6px; border: 2px solid var(--navy); border-radius: 4px; color: var(--navy); background: var(--cream); }
.sz.plus-sz { border-color: var(--navy); color: var(--navy); }

/* ---- FEATURES STRIP ---- */
.features-strip { background: var(--navy); color: var(--cream); padding: 2rem 1.5rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto; text-align: center; }
.feature-icon { font-size: 2.2rem; margin-bottom: .5rem; }
.feature-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em; color: var(--gold); margin-bottom: 4px; }
.feature-desc { font-size: .85rem; color: var(--sky); line-height: 1.5; }

/* ---- RETRO BANNER ---- */
.retro-banner { background: var(--gold); border-top: 4px solid var(--gold-dk); border-bottom: 4px solid var(--gold-dk); text-align: center; padding: 2rem 1rem; }
.retro-banner h2 { font-family: var(--font-fun); font-size: clamp(1.5rem,5vw,2.8rem); color: var(--navy-dk); margin-bottom: .5rem; }
.retro-banner p { color: var(--navy); font-weight: 700; }

/* ---- FORMS ---- */
.form-group { margin-bottom: 1.2rem; }
.form-label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; color: var(--navy); font-family: var(--font-display); letter-spacing: .04em; }
.form-control { width: 100%; padding: 10px 14px; border: 2px solid var(--navy); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; background: var(--white); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.form-control:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,200,66,.3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---- CART ---- */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.cart-table th { background: var(--navy); color: var(--gold); font-family: var(--font-display); letter-spacing: .06em; padding: 10px 14px; text-align: left; }
.cart-table td { padding: 10px 14px; border-bottom: 2px solid #e5dfc7; vertical-align: middle; }
.cart-summary { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius); padding: 1.5rem; }
.cart-summary-row { display: flex; justify-content: space-between; margin-bottom: .5rem; font-weight: 700; }
.cart-summary-total { font-family: var(--font-display); font-size: 1.6rem; color: var(--red); }

/* ---- PAYMENT OPTIONS ---- */
.payment-options { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.payment-option { border: 3px solid var(--navy); border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer; display: flex; align-items: flex-start; gap: 1rem; transition: border-color .2s, background .2s; }
.payment-option.selected { border-color: var(--gold); background: #fffbee; }
.payment-option input[type="radio"] { margin-top: 4px; accent-color: var(--gold); width: 18px; height: 18px; flex-shrink: 0; }
.payment-label { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .04em; color: var(--navy); }
.payment-desc  { font-size: .85rem; color: #555; margin-top: 2px; }
.payment-icon  { font-size: 1.8rem; }

/* ---- ALERTS ---- */
.alert { padding: 1rem 1.4rem; border-radius: var(--radius); border: 2px solid; margin-bottom: 1.2rem; font-weight: 700; }
.alert-success { background: #d4edda; border-color: var(--green); color: #155724; }
.alert-error   { background: #f8d7da; border-color: var(--red); color: #721c24; }
.alert-info    { background: #cce5ff; border-color: #004085; color: #004085; }

/* ---- CONFIRM BOX ---- */
.order-confirm-box { background: var(--white); border: 4px solid var(--gold); border-radius: var(--radius); padding: 2rem; text-align: center; max-width: 600px; margin: 0 auto; box-shadow: 6px 6px 0 var(--navy); }
.order-confirm-box h2 { font-family: var(--font-fun); font-size: 2rem; color: var(--navy); margin-bottom: .5rem; }
.order-number { font-family: var(--font-display); font-size: 2rem; color: var(--red); letter-spacing: .1em; }

/* ---- ADMIN ---- */
.admin-wrap { min-height: 100vh; background: #f0f2f8; display: flex; }
.admin-sidebar { width: 240px; background: var(--navy-dk); color: var(--cream); padding: 1.5rem 1rem; flex-shrink: 0; }
.admin-logo { text-align: center; margin-bottom: 2rem; }
.admin-logo img { width: 80px; margin: 0 auto .5rem; }
.admin-logo h2 { font-family: var(--font-display); color: var(--gold); letter-spacing: .1em; font-size: 1.2rem; }
.admin-nav a { display: block; color: var(--cream); padding: 10px 14px; border-radius: 6px; font-weight: 700; font-size: .95rem; margin-bottom: 4px; transition: background .2s; }
.admin-nav a:hover, .admin-nav a.active { background: rgba(245,200,66,.2); color: var(--gold); }
.admin-main { flex: 1; padding: 2rem; }
.admin-header-bar { background: var(--white); border-bottom: 3px solid var(--gold); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; margin: -2rem -2rem 2rem; }
.admin-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); letter-spacing: .06em; }
.admin-card { background: var(--white); border: 2px solid #ddd; border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { background: var(--navy); color: var(--gold); font-family: var(--font-display); letter-spacing: .06em; padding: 10px 12px; text-align: left; font-size: .9rem; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid #eee; font-size: .9rem; vertical-align: middle; }
.admin-table tr:hover td { background: #f9f9f9; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius); padding: 1.2rem; text-align: center; box-shadow: 4px 4px 0 var(--navy); }
.stat-card .stat-num { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold); }
.stat-card .stat-lbl { font-size: .82rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }

/* ---- BADGES ---- */
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
.badge-green  { background: #d4edda; color: #155724; }
.badge-yellow { background: #fff3cd; color: #856404; }
.badge-red    { background: #f8d7da; color: #721c24; }
.badge-blue   { background: #cce5ff; color: #004085; }
.badge-grey   { background: #e2e3e5; color: #383d41; }

/* ---- PAGE HERO ---- */
.page-hero { background: linear-gradient(135deg,var(--navy-dk),var(--navy)); color: var(--white); padding: 2.5rem 1.5rem; text-align: center; border-bottom: 4px solid var(--gold); }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem,6vw,3.5rem); color: var(--gold); letter-spacing: .06em; }
.page-hero p  { color: var(--sky); margin-top: .5rem; }

/* ---- MODAL ---- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:500; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--white); border:4px solid var(--gold); border-radius:var(--radius); padding:2rem; max-width:600px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow: 8px 8px 0 var(--navy); }
.modal-close { position:absolute; top:12px; right:16px; font-size:1.8rem; cursor:pointer; color:#888; border:none; background:none; }

/* ---- LOADER ---- */
.loader { display:inline-block; width:22px; height:22px; border:3px solid rgba(255,255,255,.3); border-radius:50%; border-top-color:#fff; animation:spin .8s linear infinite; vertical-align:middle; margin-right:8px; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ---- UTILS ---- */
.container    { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.container-sm { max-width:760px;  margin:0 auto; padding:0 1.5rem; }
.two-col   { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.text-center { text-align:center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.hidden { display:none!important; }

/* ---- QTY CONTROL ---- */
.qty-wrap { display:flex; align-items:center; gap:6px; }
.qty-btn  { width:32px; height:32px; border:2px solid var(--navy); background:var(--navy); color:var(--gold); font-size:1.1rem; border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; transition:.15s; }
.qty-btn:hover { background:var(--gold); color:var(--navy-dk); border-color:var(--gold-dk); }
.qty-input { width:48px; text-align:center; border:2px solid var(--navy); border-radius:4px; padding:4px; font-size:1rem; font-weight:700; }

/* ---- STRIPE ELEMENT ---- */
#stripe-card-element { padding:12px 14px; border:2px solid var(--navy); border-radius:var(--radius); background:var(--white); margin-bottom:1rem; }
#stripe-errors { color:var(--red); font-weight:700; font-size:.9rem; margin-bottom:1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
    .main-nav { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--navy-dk); padding:1rem 1.5rem; border-bottom:3px solid var(--gold); z-index:99; }
    .main-nav.open { display:flex; }
    .nav-toggle { display:block; }
    .site-header { position:relative; }
    .form-row  { grid-template-columns:1fr; }
    .two-col   { grid-template-columns:1fr; }
    .three-col { grid-template-columns:1fr; }
    .admin-wrap { flex-direction:column; }
    .admin-sidebar { width:100%; }
    .hero-logo { width:140px; }
    .product-grid { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
    .checkout-grid { grid-template-columns:1fr!important; }
}
@media (max-width:480px) {
    .cart-table thead { display:none; }
    .cart-table td { display:block; padding:6px 10px; }
    .cart-table td::before { content:attr(data-label)': '; font-weight:700; }
}