/* Misba Creations — shared brand theme for all customer pages.
   Loaded from includes/topbar.php, so every page that shows the header gets it. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');

:root {
    --m-primary: #4a2c1d;
    --m-primary-light: #b8893f;
    --m-accent: #c9a24b;
    --m-bg: #faf6ef;
    --m-card: #ffffff;
    --m-text: #1f2937;
    --m-muted: #6b7280;
    --m-border: #e7dcc8;
    --m-shadow-sm: 0 4px 20px rgba(74,44,29,.06);
    --m-shadow-lg: 0 18px 44px rgba(74,44,29,.14);
    --m-radius: 14px;
    --m-radius-lg: 24px;
    --m-grad: linear-gradient(135deg, #4a2c1d 0%, #b8893f 100%);
}

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif !important;
    background: radial-gradient(1200px 500px at 90% -10%, #f1e5cf 0%, transparent 60%),
                radial-gradient(900px 500px at -10% 110%, #f5ecdc 0%, transparent 55%),
                var(--m-bg) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    color: var(--m-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -.01em; }

/* ---------- cards ---------- */
body .box, body .container, body .card, body .wrap {
    border-radius: var(--m-radius-lg);
}
body .box {
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-lg) !important;
}

/* ---------- form controls ---------- */
body input[type=text], body input[type=email], body input[type=password], body input[type=tel],
body input[type=number], body input[type=search], body select, body textarea, body .input {
    font-family: inherit;
    border: 1.5px solid var(--m-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    transition: border-color .2s, box-shadow .2s;
}
body input:focus, body select:focus, body textarea:focus, body .input:focus {
    outline: none !important;
    border-color: var(--m-primary-light) !important;
    box-shadow: 0 0 0 4px rgba(201,162,75,.18) !important;
    background: #fff !important;
}

/* ---------- buttons ---------- */
body .btn, body button[type=submit], body .view-btn {
    font-family: inherit;
    background: var(--m-grad) !important;
    color: #fff !important;
    border: none;
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(74,44,29,.28);
    cursor: pointer;
    text-decoration: none;
}
body .btn:hover, body button[type=submit]:hover, body .view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(74,44,29,.36);
    filter: brightness(1.04);
}
body .btn-outline {
    background: transparent !important;
    color: var(--m-primary) !important;
    border: 1.5px solid var(--m-primary-light) !important;
    box-shadow: none !important;
}
body .btn-outline:hover { background: rgba(201,162,75,.1) !important; }

/* ---------- alerts ---------- */
body .error { border-radius: 12px; }

/* ---------- tables ---------- */
body table { border-radius: var(--m-radius); }
body th { background: var(--m-grad) !important; color: #fff !important; }

/* ---------- links ---------- */
body .link a { color: var(--m-primary) !important; }

/* ================= header ================= */
.mz-announce {
    background: var(--m-grad);
    color: #fff;
    text-align: center;
    font: 600 12.5px/1 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .08em;
    padding: 9px 12px;
    text-transform: uppercase;
}
.mz-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--m-border);
}
.mz-header-inner {
    max-width: 1240px; margin: auto; padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.mz-logo { display: flex; align-items: center; text-decoration: none; }
.mz-logo img {
    height: 48px; width: auto; object-fit: contain; border-radius: 12px;
    background: #fff; border: 1px solid var(--m-border); padding: 4px;
}
.mz-nav { display: flex; align-items: center; gap: 6px; }
.mz-nav a {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 999px;
    font: 600 14px 'Plus Jakarta Sans', sans-serif;
    color: var(--m-text); text-decoration: none;
}
.mz-nav a:hover { background: rgba(201,162,75,.14); color: var(--m-primary); }
.mz-nav a.mz-cta { background: var(--m-grad); color: #fff; box-shadow: 0 8px 20px rgba(74,44,29,.25); }
.mz-nav a.mz-cta:hover { filter: brightness(1.06); color: #fff; }
.mz-nav .mz-hi { font: 600 14px 'Plus Jakarta Sans', sans-serif; color: var(--m-primary); padding: 0 8px; white-space: nowrap; }
.mz-badge {
    background: var(--m-primary); color: #fff; border-radius: 999px;
    font-size: 11px; line-height: 1; padding: 3px 7px; font-weight: 700;
}
@media (max-width: 640px) {
    .mz-header-inner { padding: 8px 12px; gap: 8px; }
    .mz-logo img { height: 38px; }
    .mz-nav { gap: 2px; }
    .mz-nav a { padding: 8px 10px; font-size: 13px; }
    .mz-nav .mz-hi, .mz-nav .mz-label { display: none; }
}

/* ================= premium icons, header v2 ================= */
.mz-i{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mz-announce{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; background:linear-gradient(90deg,#2b1810,#4a2c1d 45%,#b8893f); font-size:11.5px; letter-spacing:.1em; }
.mz-announce span{ display:inline-flex; align-items:center; gap:7px; }
.mz-announce .mz-i{ width:15px; height:15px; stroke:#e7c987; }
.mz-announce .mz-sep{ color:#e7c987; font-size:8px; }
.mz-nav a{ color:#3a2116; }
.mz-nav a .mz-i{ color:#4a2c1d; }
.mz-nav a:hover, .mz-nav a.is-active{ background:#f3eadb; color:#4a2c1d; }
.mz-nav a.is-active .mz-i{ color:#b8893f; }
.mz-nav a.mz-cta{ background:linear-gradient(135deg,#3a2116,#8a5a2b 70%,#b8893f); color:#fff; }
.mz-nav a.mz-cta .mz-i{ color:#fff; }
.mz-nav a.mz-user{ background:#f3eadb; }
.mz-nav a.mz-out:hover{ background:#fbe9e6; color:#9b1c1c; }
.mz-nav a.mz-out:hover .mz-i{ color:#9b1c1c; }
.mz-badge{ background:#b8893f; position:relative; top:-6px; margin-left:-4px; }

/* ================= footer ================= */
.mz-footer{ margin-top:60px; background:#2b1810; color:#e9dcc6; font-family:'Plus Jakarta Sans',sans-serif; }
.mz-trust{ max-width:1240px; margin:0 auto; padding:26px 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; border-bottom:1px solid rgba(231,201,135,.18); }
.mz-trust div{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; }
.mz-trust svg{ grid-row:span 2; width:34px; height:34px; fill:none; stroke:#d9b45f; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.mz-trust b{ font-size:13.5px; color:#fff; font-weight:700; }
.mz-trust span{ font-size:12px; color:#bfae93; }
.mz-footer-main{ max-width:1240px; margin:0 auto; padding:38px 20px 24px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:34px; }
.mz-fcol h4{ font:700 15px 'Playfair Display',serif; color:#e7c987; margin:0 0 14px; letter-spacing:.04em; }
.mz-fcol a{ display:block; color:#e9dcc6; text-decoration:none; font-size:13.5px; padding:5px 0; }
.mz-fcol a:hover{ color:#e7c987; padding-left:4px; }
.mz-fcol p{ font-size:13.5px; line-height:1.7; color:#cdbda3; margin:0 0 10px; }
.mz-fbrand img{ height:54px; width:auto; background:#fff; border-radius:12px; padding:5px; margin-bottom:14px; }
.mz-fcol a.mz-fwa{ display:inline-block; margin-top:6px; background:linear-gradient(135deg,#b8893f,#d9b45f); color:#2b1810; font-weight:700; padding:9px 18px; border-radius:999px; }
.mz-fcol a.mz-fwa:hover{ padding-left:18px; filter:brightness(1.05); color:#2b1810; }
.mz-footer-bottom{ max-width:1240px; margin:0 auto; padding:16px 20px 22px; border-top:1px solid rgba(231,201,135,.18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#a99a82; }
@media(max-width:860px){ .mz-trust{ grid-template-columns:1fr 1fr; } .mz-footer-main{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .mz-trust{ grid-template-columns:1fr; } .mz-footer-main{ grid-template-columns:1fr; } .mz-footer-bottom{ flex-direction:column; } .mz-announce{ font-size:10.5px; gap:6px; } }

/* ================= wholesale notices & steps ================= */
.mz-steps{ display:flex; align-items:center; justify-content:center; gap:10px; margin:22px auto 6px; max-width:560px; font:600 13px 'Plus Jakarta Sans',sans-serif; color:#8c7a66; }
.mz-steps .st{ display:flex; align-items:center; gap:8px; }
.mz-steps .st i{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; border:1.5px solid #d9c9ad; background:#fff; }
.mz-steps .st.done i{ background:#b8893f; border-color:#b8893f; color:#fff; }
.mz-steps .st.now{ color:#4a2c1d; } .mz-steps .st.now i{ background:#4a2c1d; border-color:#4a2c1d; color:#fff; }
.mz-steps .ln{ flex:1; height:2px; background:#e7dcc8; max-width:70px; }
.mz-min-note{ display:flex; gap:12px; align-items:flex-start; background:#fbf1dc; border:1.5px solid #e6cf9a; color:#5a3d12; border-radius:14px; padding:12px 16px; font-size:13.5px; }
.mz-min-note.ok{ background:#eef6ea; border-color:#bcd9b0; color:#2f5a22; }
.mz-min-note b{ font-weight:800; }
.mz-bar{ height:8px; background:#efe5d3; border-radius:99px; overflow:hidden; margin-top:8px; }
.mz-bar i{ display:block; height:100%; background:linear-gradient(90deg,#4a2c1d,#b8893f); border-radius:99px; }

/* developer credit */
.mz-dev{ display:inline-flex; align-items:center; gap:7px; color:#cdbda3; }
.mz-dev img{ border-radius:5px; background:#fff; padding:1px; }
.mz-dev b{ color:#e7c987; font-weight:700; }

/* ================= brands strip (above the footer) ================= */
.mz-brands{ margin-top:60px; padding:40px 20px 6px; }
.mz-brands-inner{ max-width:1000px; margin:0 auto; text-align:center; }
.mz-brands-title{ display:flex; align-items:center; justify-content:center; gap:16px; font:700 22px 'Playfair Display',serif; color:#4a2c1d; margin-bottom:22px; }
.mz-brands-title span{ width:70px; height:1.5px; background:linear-gradient(90deg,transparent,#b8893f); }
.mz-brands-title span:last-child{ background:linear-gradient(270deg,transparent,#b8893f); }
.mz-brands-row{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; }
.mz-brand{ position:relative; overflow:hidden; flex:1 1 280px; max-width:440px; min-height:150px; display:grid; place-items:center; padding:26px 30px;
    background:linear-gradient(145deg,#fff,#fbf6ea); border:1px solid #e7dcc8; border-radius:22px; box-shadow:0 10px 30px rgba(74,44,29,.07); transition:transform .3s, box-shadow .3s, border-color .3s; }
.mz-brand::before{ content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,rgba(184,137,63,.22),transparent 70%); }
.mz-brand:hover{ transform:translateY(-5px); border-color:#b8893f; box-shadow:0 20px 44px rgba(74,44,29,.15); }
.mz-brand img{ position:relative; max-width:100%; max-height:84px; width:auto; height:auto; object-fit:contain; transition:transform .3s; }
.mz-brand:hover img{ transform:scale(1.06); }
.mz-brands + .mz-footer{ margin-top:34px; }