/* ═══════════════════════════════════════════════════════════════════════════
   BeautyInside Enterprise — Master Stylesheet
   File: css/style.css
   Theme: Navy Blue (#0d2137) + Greige (#f8f4f0)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── CSS Variables (change colours here — they update everywhere) ────────── */

:root {

    /* ── Navy Blues ── */
    --navy-darkest : #071524;   /* Deepest navy  — header footer backgrounds */
    --navy-dark    : #0d2137;   /* Main navy     — certificate card body      */
    --navy-mid     : #1a3a5c;   /* Medium navy   — hover states               */
    --navy-border  : rgba(255, 255, 255, 0.12); /* Subtle divider on dark bg  */

    /* ── Greige / Warm Beige ── */
    --greige-page  : #f8f4f0;   /* Page background — warm off-white           */
    --greige-card  : #ffffff;   /* Card / form backgrounds                    */
    --greige-mid   : #f0ebe5;   /* Slightly darker greige — input backgrounds */
    --greige-border: #e0d9d0;   /* Card borders                               */

    /* ── Accent Gold ── */
    --gold-bright  : #facc15;   /* Download button, highlights               */
    --gold-mid     : #f59e0b;   /* Button gradient end                        */
    --gold-dark    : #d97706;   /* Button hover                               */

    /* ── Status — Success ── */
    --green-solid  : #16a34a;   /* Check-mark circle background               */
    --green-text   : #4ade80;   /* "Certificate Verified" label               */
    --green-glow   : rgba(22, 163, 74, 0.4);

    /* ── Status — Error ── */
    --red-page-bg  : #fff5f5;   /* Error card background                      */
    --red-border   : #fecaca;   /* Error card border                          */
    --red-icon     : #dc2626;   /* Error icon stroke                          */
    --red-heading  : #b91c1c;   /* "Certificate Not Found" heading            */
    --red-body     : #ef4444;   /* Error body text                            */

    /* ── Typography ── */
    --text-primary : #1a1a2e;
    --text-body    : #374151;
    --text-muted   : #6b7280;
    --text-faint   : rgba(255, 255, 255, 0.45);   /* muted text on dark backgrounds */

    --font-sans    : 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-serif   : Georgia, 'Times New Roman', serif;
    --font-mono    : 'Courier New', Courier, monospace;

    /* ── Shadows ── */
    --shadow-sm    : 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-card  : 0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-cert  : 0 8px 40px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.18);

    /* ── Spacing ── */
    --radius-sm    : 8px;
    --radius-md    : 12px;
    --radius-lg    : 16px;
}


/* ── Reset ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

html {
    font-size       : 16px;
    scroll-behavior : smooth;
}

body {
    font-family      : var(--font-sans);
    background-color : var(--greige-page);
    color            : var(--text-primary);
    line-height      : 1.65;
    min-height       : 100vh;
    display          : flex;
    flex-direction   : column;
}

img {
    max-width : 100%;
    display   : block;
}

a {
    color           : var(--navy-dark);
    text-decoration : none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE HEADER / NAVIGATION  — white bar matching React app design
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
    background-color : #ffffff;
    border-bottom    : 1px solid #e5e7eb;
    box-shadow       : 0 1px 6px rgba(0,0,0,0.06);
    position         : sticky;
    top              : 0;
    z-index          : 200;
}

.header-inner {
    max-width       : 1180px;
    margin          : 0 auto;
    padding         : 0 28px;
    height          : 64px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 16px;
}

/* Brand */
.header-brand {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    text-decoration: none;
    flex-shrink    : 0;
}

.brand-icon { display:flex; align-items:center; }

.brand-text {
    font-size      : 20px;
    font-weight    : 700;
    color          : #111827;
    letter-spacing : -0.01em;
}

.brand-accent { color: #9B1B30; }

/* Desktop nav links */
.header-nav {
    display    : flex;
    align-items: center;
    gap        : 4px;
}

.hn-link {
    font-size      : 14px;
    font-weight    : 500;
    color          : #4b5563;
    text-decoration: none;
    padding        : 6px 14px;
    border-radius  : 6px;
    transition     : color 0.15s, background 0.15s;
    white-space    : nowrap;
}

.hn-link:hover  { color: #111827; background: #f3f4f6; }
.hn-link.active { color: #9B1B30; font-weight: 700; }

/* Verify Cert button */
.hn-verify {
    font-size      : 13px;
    font-weight    : 600;
    color          : #9B1B30;
    text-decoration: none;
    padding        : 7px 16px;
    border-radius  : 20px;
    border         : 1.5px solid #9B1B30;
    background     : transparent;
    white-space    : nowrap;
    margin-left    : 8px;
    transition     : background 0.15s, color 0.15s;
}

.hn-verify:hover,
.hn-verify.active {
    background : #9B1B30;
    color      : #ffffff;
}

/* Hamburger (mobile only) */
.hdr-burger {
    display         : none;
    flex-direction  : column;
    gap             : 5px;
    background      : none;
    border          : none;
    cursor          : pointer;
    padding         : 8px;
    flex-shrink     : 0;
}

.hdr-burger span {
    display         : block;
    width           : 22px;
    height          : 2px;
    background      : #374151;
    border-radius   : 2px;
    transition      : transform 0.25s, opacity 0.25s;
    transform-origin: center;
}

.hdr-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hdr-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.hdr-drawer {
    display         : none;
    flex-direction  : column;
    background      : #ffffff;
    border-top      : 1px solid #e5e7eb;
    padding         : 8px 0 16px;
}

.hdr-drawer.open { display: flex; }

.hdr-drawer a {
    color          : #374151;
    font-size      : 15px;
    font-weight    : 500;
    text-decoration: none;
    padding        : 13px 24px;
    transition     : background 0.15s, color 0.15s;
}

.hdr-drawer a:hover  { background: #f9fafb; color: #111827; }
.hdr-drawer a.active { color: #9B1B30; font-weight: 700; }

.hdr-drawer .mob-verify {
    color       : #9B1B30;
    font-weight : 600;
    border-top  : 1px solid #f3f4f6;
    margin-top  : 4px;
    padding-top : 16px;
}

/* ── Responsive breakpoint ── */
@media (max-width: 768px) {
    .header-nav  { display: none; }
    .hdr-burger  { display: flex; }
}

/* Keep .gold class for backward compat in page content */
.gold { color: var(--gold-bright); }


/* ═══════════════════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.main-content {
    flex     : 1;
    padding  : 64px 16px 80px;
}

.container {
    max-width : 520px;
    margin    : 0 auto;
    width     : 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER (icon + title + subtitle)
   ═══════════════════════════════════════════════════════════════════════════ */

.page-header {
    text-align    : center;
    margin-bottom : 40px;
}

.page-icon {
    width            : 64px;
    height           : 64px;
    border-radius    : 50%;
    background-color : rgba(13, 33, 55, 0.10);
    color            : var(--navy-dark);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    margin           : 0 auto 20px;
}

.page-title {
    font-family   : var(--font-serif);
    font-size     : 30px;
    font-weight   : 700;
    color         : var(--text-primary);
    margin-bottom : 8px;
}

.page-subtitle {
    color     : var(--text-muted);
    font-size : 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH / VERIFY FORM CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.search-card {
    background    : var(--greige-card);
    border        : 2px solid rgba(13, 33, 55, 0.15);
    border-radius : var(--radius-lg);
    padding       : 20px;
    margin-bottom : 28px;
    box-shadow    : var(--shadow-card);
}

.verify-form {
    display   : flex;
    gap       : 10px;
    flex-wrap : wrap;
}

/* Certificate code input */
.cert-input {
    flex           : 1;
    min-width      : 160px;
    padding        : 13px 16px;
    font-size      : 15px;
    font-family    : var(--font-mono);
    text-align     : center;
    letter-spacing : 0.15em;
    text-transform : uppercase;
    border         : 1.5px solid var(--greige-border);
    border-radius  : var(--radius-sm);
    background     : var(--greige-mid);
    color          : var(--text-primary);
    outline        : none;
    transition     : border-color 0.2s;
}

.cert-input:focus {
    border-color     : var(--navy-dark);
    background-color : #ffffff;
}

.cert-input::placeholder {
    color          : var(--text-muted);
    letter-spacing : 0.05em;
    text-transform : none;
}

/* Verify button */
.verify-btn {
    padding          : 13px 28px;
    font-size        : 15px;
    font-weight      : 600;
    font-family      : var(--font-sans);
    color            : #ffffff;
    background-color : #9b1d47;   /* Deep rose/maroon — the brand button colour */
    border           : none;
    border-radius    : var(--radius-sm);
    cursor           : pointer;
    touch-action     : manipulation;
    transition       : background-color 0.2s, transform 0.1s;
    white-space      : nowrap;
    -webkit-tap-highlight-color: transparent;
}

.verify-btn:hover:not(:disabled) {
    background-color : #7d1439;
}

.verify-btn:active:not(:disabled) {
    transform : scale(0.97);
}

.verify-btn:disabled {
    opacity : 0.65;
    cursor  : not-allowed;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.spinner-wrap {
    text-align    : center;
    padding       : 40px 0;
    color         : var(--text-muted);
    font-size     : 14px;
}

.spinner {
    width         : 36px;
    height        : 36px;
    border        : 4px solid var(--navy-dark);
    border-top    : 4px solid transparent;
    border-radius : 50%;
    margin        : 0 auto 14px;
    animation     : spin 0.7s linear infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESULT AREA — shared wrapper
   ═══════════════════════════════════════════════════════════════════════════ */

.result-area {
    animation : fadeSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SUCCESS CARD — navy blue certificate panel
   ═══════════════════════════════════════════════════════════════════════════ */

.cert-card {
    background    : var(--navy-dark);
    border-radius : var(--radius-lg);
    overflow      : hidden;
    box-shadow    : var(--shadow-cert);
}

/* Top header bar */
.cert-card-header {
    background     : var(--navy-darkest);
    padding        : 18px 24px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    border-bottom  : 1px solid var(--navy-border);
}

.cert-brand {
    font-size   : 17px;
    font-weight : 700;
    color       : #ffffff;
}

.cert-brand .gold { color: var(--gold-bright); }

.cert-iso {
    font-size      : 10px;
    letter-spacing : 0.10em;
    padding        : 3px 8px;
    border-radius  : 4px;
    border         : 1px solid rgba(255, 255, 255, 0.28);
    color          : rgba(255, 255, 255, 0.60);
}

/* Verified badge row */
.cert-badge-row {
    display     : flex;
    align-items : center;
    gap         : 12px;
    padding     : 20px 24px 0;
}

.cert-check-circle {
    width            : 42px;
    height           : 42px;
    border-radius    : 50%;
    background-color : var(--green-solid);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    flex-shrink      : 0;
    box-shadow       : 0 2px 12px var(--green-glow);
}

.cert-verified-label {
    color          : var(--green-text);
    font-weight    : 600;
    font-size      : 12px;
    letter-spacing : 0.10em;
    text-transform : uppercase;
}

/* Cert title */
.cert-title-block {
    padding    : 12px 24px 0;
}

.cert-title {
    color       : #ffffff;
    font-size   : 22px;
    font-weight : 700;
    margin      : 0;
}

.cert-institution {
    color          : var(--text-faint);
    font-size      : 11px;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    margin-top     : 3px;
}

/* Divider */
.cert-divider {
    margin     : 16px 24px;
    border     : none;
    border-top : 1px solid var(--navy-border);
}

/* Details table */
.cert-table {
    width           : 100%;
    border-collapse : collapse;
}

.cert-table tr {
    border-bottom : 1px solid rgba(255, 255, 255, 0.07);
}

.cert-table tr:last-child {
    border-bottom : none;
}

.cert-table td {
    padding        : 10px 8px;
    vertical-align : top;
    font-size      : 13px;
}

.cert-table td:first-child {
    padding-left : 24px;
    width        : 42%;
    color        : var(--text-faint);
}

.cert-table td:last-child {
    padding-right : 24px;
    color         : #ffffff;
    font-weight   : 600;
    font-size     : 14px;
}

/* Special pill styles inside the table */
.cert-code-pill {
    font-family    : var(--font-mono);
    color          : #fde047;
    font-size      : 13px;
}

.cert-grade-pill {
    display       : inline-block;
    background    : var(--gold-bright);
    color         : var(--navy-dark);
    font-size     : 12px;
    font-weight   : 700;
    padding       : 2px 10px;
    border-radius : 4px;
}

.cert-valid-label {
    display     : inline-flex;
    align-items : center;
    gap         : 5px;
    color       : var(--green-text);
    font-weight : 600;
    font-size   : 13px;
}

/* Download button */
.cert-download-wrap {
    padding : 20px 24px 16px;
}

.cert-download-btn {
    width            : 100%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    gap              : 10px;
    padding          : 14px 20px;
    border-radius    : var(--radius-md);
    border           : none;
    background       : linear-gradient(135deg, var(--gold-bright), var(--gold-mid));
    color            : var(--navy-dark);
    font-family      : var(--font-sans);
    font-size        : 14px;
    font-weight      : 700;
    letter-spacing   : 0.02em;
    cursor           : pointer;
    touch-action     : manipulation;
    box-shadow       : 0 4px 16px rgba(250, 204, 21, 0.35);
    transition       : transform 0.1s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.cert-download-btn:hover:not(:disabled) {
    opacity : 0.92;
}

.cert-download-btn:active:not(:disabled) {
    transform : scale(0.97);
}

.cert-download-btn:disabled {
    opacity    : 0.65;
    cursor     : not-allowed;
    box-shadow : none;
}

.cert-ios-hint {
    color      : rgba(255, 255, 255, 0.35);
    font-size  : 11px;
    text-align : center;
    margin-top : 8px;
}

.cert-download-error {
    color      : #f87171;
    font-size  : 12px;
    text-align : center;
    margin-top : 10px;
}

/* Card footer */
.cert-card-footer {
    background     : var(--navy-darkest);
    padding        : 14px 24px;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    border-top     : 1px solid var(--navy-border);
}

.cert-footer-brand {
    font-size   : 14px;
    font-weight : 700;
    color       : #ffffff;
}

.cert-footer-brand .gold { color: var(--gold-bright); }

.cert-footer-meta {
    color       : rgba(255, 255, 255, 0.40);
    font-size   : 10px;
    text-align  : right;
    line-height : 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ERROR CARD — certificate not found
   ═══════════════════════════════════════════════════════════════════════════ */

.error-card {
    background    : var(--red-page-bg);
    border        : 1.5px solid var(--red-border);
    border-radius : var(--radius-lg);
    padding       : 40px 28px;
    text-align    : center;
    box-shadow    : 0 4px 20px rgba(220, 38, 38, 0.08);
}

.error-icon-wrap {
    width            : 64px;
    height           : 64px;
    border-radius    : 50%;
    background-color : #fee2e2;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    margin           : 0 auto 18px;
}

.error-title {
    color         : var(--red-heading);
    font-size     : 20px;
    font-weight   : 700;
    margin-bottom : 10px;
}

.error-body {
    color         : var(--red-body);
    font-size     : 14px;
    line-height   : 1.65;
    margin-bottom : 24px;
}

/* Try Again button */
.try-again-btn {
    display          : inline-flex;
    align-items      : center;
    gap              : 8px;
    padding          : 12px 28px;
    border-radius    : var(--radius-sm);
    border           : 1.5px solid #fca5a5;
    background       : #ffffff;
    color            : var(--red-heading);
    font-family      : var(--font-sans);
    font-size        : 14px;
    font-weight      : 600;
    cursor           : pointer;
    touch-action     : manipulation;
    transition       : background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.try-again-btn:hover {
    background   : #fee2e2;
    border-color : #f87171;
}

.try-again-btn:active {
    transform : scale(0.97);
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HERO  (used on Tailoring, Cakes, Training, Contact, Verify pages)
   ═══════════════════════════════════════════════════════════════════════════ */

.page-hero {
    background : linear-gradient(135deg, var(--navy-darkest) 0%, var(--navy-dark) 60%, var(--navy-mid) 100%);
    color      : #ffffff;
    padding    : 72px 24px 80px;
    position   : relative;
    overflow   : hidden;
}

/* subtle radial glow */
.page-hero::after {
    content          : '';
    position         : absolute;
    top              : -60px;
    right            : -80px;
    width            : 400px;
    height           : 400px;
    border-radius    : 50%;
    background       : radial-gradient(circle, rgba(250,204,21,0.10) 0%, transparent 70%);
    pointer-events   : none;
}

.page-hero-cakes    { background: linear-gradient(135deg, #3b0a1a 0%, #7b1d40 55%, #9b2d50 100%); }
.page-hero-computer { background: linear-gradient(135deg, #052e16 0%, #14532d 55%, #166534 100%); }

.page-hero-inner {
    max-width  : 800px;
    margin     : 0 auto;
    position   : relative;
    z-index    : 1;
}

.page-eyebrow {
    display        : inline-block;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--gold-bright);
    background     : rgba(250,204,21,0.12);
    border         : 1px solid rgba(250,204,21,0.30);
    padding        : 5px 14px;
    border-radius  : 20px;
    margin-bottom  : 18px;
}

.page-hero-title {
    font-family   : var(--font-serif);
    font-size     : clamp(28px, 5vw, 46px);
    font-weight   : 700;
    line-height   : 1.18;
    color         : #ffffff;
    margin-bottom : 16px;
}

.page-hero-sub {
    font-size   : clamp(15px, 2.2vw, 17px);
    line-height : 1.7;
    color       : rgba(255,255,255,0.72);
    max-width   : 580px;
}

/* Button helpers shared across pages */
.btn-gold {
    display          : inline-flex;
    align-items      : center;
    gap              : 8px;
    padding          : 13px 26px;
    background       : linear-gradient(135deg, var(--gold-bright), var(--gold-mid));
    color            : var(--navy-dark);
    font-weight      : 700;
    font-size        : 14px;
    border-radius    : var(--radius-sm);
    text-decoration  : none;
    border           : none;
    cursor           : pointer;
    transition       : opacity 0.15s, transform 0.1s;
    white-space      : nowrap;
}

.btn-gold:hover  { opacity: 0.88; }
.btn-gold:active { transform: scale(0.97); }

.btn-outline-white {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 13px 26px;
    border          : 1.5px solid rgba(255,255,255,0.40);
    color           : rgba(255,255,255,0.85);
    font-weight     : 600;
    font-size       : 14px;
    border-radius   : var(--radius-sm);
    text-decoration : none;
    background      : transparent;
    transition      : border-color 0.15s, color 0.15s;
    white-space     : nowrap;
}

.btn-outline-white:hover { border-color: #fff; color: #fff; }

.btn-navy {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 12px 22px;
    background      : var(--navy-dark);
    color           : #ffffff;
    font-weight     : 600;
    font-size       : 14px;
    border-radius   : var(--radius-sm);
    text-decoration : none;
    border          : none;
    cursor          : pointer;
    transition      : opacity 0.15s;
    white-space     : nowrap;
}

.btn-navy:hover { opacity: 0.85; }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION LAYOUT — used across inner pages
   ═══════════════════════════════════════════════════════════════════════════ */

.section        { padding: 72px 24px; }
.section-alt    { background: var(--greige-page); }
.section-inner  { max-width: 1100px; margin: 0 auto; }

.section-eyebrow {
    display        : block;
    text-align     : center;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--navy-dark);
    margin-bottom  : 12px;
    opacity        : 0.65;
}

.section-title {
    font-family   : var(--font-serif);
    font-size     : clamp(22px, 3.5vw, 34px);
    font-weight   : 700;
    color         : var(--navy-dark);
    text-align    : center;
    margin-bottom : 14px;
    line-height   : 1.22;
}

.section-sub {
    text-align  : center;
    color       : var(--text-muted);
    font-size   : 15px;
    line-height : 1.7;
    max-width   : 620px;
    margin      : 0 auto 48px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COURSE CARDS GRID — used on Tailoring, Cakes, Training pages
   ═══════════════════════════════════════════════════════════════════════════ */

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

.course-card {
    background    : #ffffff;
    border        : 1.5px solid var(--greige-border);
    border-radius : var(--radius-lg);
    padding       : 24px;
    display       : flex;
    flex-direction: column;
    transition    : border-color 0.2s, box-shadow 0.2s;
}

.course-card:hover {
    border-color : var(--navy-dark);
    box-shadow   : var(--shadow-card);
}

.course-icon-wrap {
    width          : 44px;
    height         : 44px;
    border-radius  : 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 14px;
    flex-shrink    : 0;
}

.course-img {
    width         : 100%;
    aspect-ratio  : 16 / 9;
    overflow      : hidden;
    border-radius : var(--radius-md);
    margin-bottom : 14px;
}

.course-img img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.4s;
}

.course-card:hover .course-img img { transform: scale(1.04); }

.course-name {
    font-size     : 15px;
    font-weight   : 700;
    color         : var(--navy-dark);
    margin-bottom : 8px;
    line-height   : 1.35;
    flex: 1;
}

.course-desc {
    font-size     : 13.5px;
    color         : var(--text-muted);
    line-height   : 1.65;
    margin-bottom : auto;
    padding-bottom: 14px;
    flex: 1;
}

.course-meta {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    border-top      : 1px solid var(--greige-border);
    padding-top     : 12px;
    margin-top      : 12px;
    font-size       : 13px;
}

.course-duration { color: var(--text-body); font-weight: 500; }
.course-fee      { color: var(--navy-dark); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
   CERTIFICATE INFO BANNER — bottom of course sections
   ═══════════════════════════════════════════════════════════════════════════ */

.cert-info-banner {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    gap            : 20px;
    background     : rgba(13,33,55,0.05);
    border         : 1.5px solid rgba(13,33,55,0.14);
    border-radius  : var(--radius-lg);
    padding        : 28px 32px;
    max-width      : 800px;
    margin         : 0 auto;
}

.cert-info-icon {
    width          : 56px;
    height         : 56px;
    border-radius  : 50%;
    background     : rgba(13,33,55,0.08);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : var(--navy-dark);
    flex-shrink    : 0;
}

.cert-info-text { flex: 1; min-width: 200px; }

.cert-info-text h3 {
    font-family   : var(--font-serif);
    font-size     : 17px;
    font-weight   : 700;
    color         : var(--navy-dark);
    margin-bottom : 6px;
}

.cert-info-text p {
    font-size   : 13.5px;
    color       : var(--text-muted);
    line-height : 1.65;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES LIST (Tailoring page)
   ═══════════════════════════════════════════════════════════════════════════ */

.services-list-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
    gap                   : 20px;
    margin-bottom         : 16px;
}

.service-list-item {
    display : flex;
    gap     : 14px;
    align-items: flex-start;
}

.service-list-icon {
    width          : 34px;
    height         : 34px;
    border-radius  : 8px;
    background     : rgba(13,33,55,0.08);
    color          : var(--navy-dark);
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
    margin-top     : 2px;
}

.service-list-item h4 {
    font-size     : 14px;
    font-weight   : 700;
    color         : var(--navy-dark);
    margin-bottom : 4px;
}

.service-list-item p {
    font-size   : 13px;
    color       : var(--text-muted);
    line-height : 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CAKE ORDER FORM
   ═══════════════════════════════════════════════════════════════════════════ */

.cake-order-form {
    max-width  : 640px;
    margin     : 0 auto;
    background : #ffffff;
    border     : 1.5px solid var(--greige-border);
    border-radius: var(--radius-lg);
    padding    : 36px;
    box-shadow : var(--shadow-card);
}

.form-row {
    display : grid;
    grid-template-columns: 1fr 1fr;
    gap     : 16px;
}

.form-group {
    display        : flex;
    flex-direction : column;
    gap            : 6px;
    margin-bottom  : 16px;
}

.form-group label {
    font-size   : 13px;
    font-weight : 600;
    color       : var(--navy-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding       : 11px 14px;
    border        : 1.5px solid #d1cdc9;
    border-radius : var(--radius-sm);
    font-family   : var(--font-sans);
    font-size     : 14px;
    color         : var(--text-body);
    background    : #fff;
    transition    : border-color 0.15s, box-shadow 0.15s;
    outline       : none;
    width         : 100%;
    box-sizing    : border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color : var(--navy-dark);
    box-shadow   : 0 0 0 3px rgba(13,33,55,0.10);
}

.form-group textarea { resize: vertical; }

.req { color: #dc2626; }

/* WhatsApp note inside the form */
.wa-note {
    display       : flex;
    align-items   : flex-start;
    gap           : 10px;
    background    : #f0fdf4;
    border        : 1px solid #bbf7d0;
    border-radius : var(--radius-sm);
    padding       : 12px 14px;
    font-size     : 13px;
    color         : #166534;
    margin-bottom : 16px;
    line-height   : 1.55;
}

/* WhatsApp submit button */
.btn-wa-submit {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    width           : 100%;
    padding         : 15px 24px;
    background      : #25D366;
    color           : #ffffff;
    font-family     : var(--font-sans);
    font-size       : 15px;
    font-weight     : 700;
    border          : none;
    border-radius   : var(--radius-sm);
    cursor          : pointer;
    transition      : background 0.15s, transform 0.1s;
    text-decoration : none;
}

.btn-wa-submit:hover  { background: #20bd5a; }
.btn-wa-submit:active { transform: scale(0.98); }


/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.contact-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 40px;
    align-items           : start;
    max-width             : 960px;
    margin                : 0 auto;
}

.contact-card {
    background    : #ffffff;
    border        : 1.5px solid var(--greige-border);
    border-radius : var(--radius-lg);
    padding       : 36px;
    box-shadow    : var(--shadow-card);
}

.contact-card h2 {
    font-family   : var(--font-serif);
    font-size     : 22px;
    font-weight   : 700;
    color         : var(--navy-dark);
    margin-bottom : 28px;
}

.contact-item {
    display        : flex;
    gap            : 16px;
    align-items    : flex-start;
    margin-bottom  : 28px;
}

.contact-icon {
    width          : 42px;
    height         : 42px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
}

.contact-item h4 {
    font-size     : 14px;
    font-weight   : 700;
    color         : var(--navy-dark);
    margin-bottom : 4px;
}

.contact-item p,
.contact-item address {
    font-size   : 14px;
    color       : var(--text-muted);
    line-height : 1.7;
}

.contact-map {
    height        : 100%;
    min-height    : 420px;
    border-radius : var(--radius-lg);
    overflow      : hidden;
    border        : 1.5px solid var(--greige-border);
}

.contact-map iframe {
    display : block;
    width   : 100%;
    height  : 100%;
    border  : none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER  (multi-column)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background-color : var(--navy-darkest);
    color            : rgba(255, 255, 255, 0.55);
}

.site-footer strong { color: #ffffff; }
.site-footer .gold  { color: var(--gold-bright); }

.footer-inner {
    display               : grid;
    grid-template-columns : 2fr 1fr 1fr 1.4fr;
    gap                   : 40px;
    max-width             : 1100px;
    margin                : 0 auto;
    padding               : 56px 24px 40px;
}

.footer-brand {
    font-size     : 20px;
    font-weight   : 700;
    color         : #ffffff;
    margin-bottom : 12px;
}

.footer-tagline {
    font-size     : 13px;
    line-height   : 1.7;
    color         : rgba(255,255,255,0.50);
    margin-bottom : 18px;
}

.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.footer-badge {
    font-size      : 10px;
    letter-spacing : 0.08em;
    font-weight    : 700;
    padding        : 4px 10px;
    border-radius  : 4px;
    border         : 1px solid rgba(255,255,255,0.22);
    color          : rgba(255,255,255,0.60);
}

.footer-heading {
    font-size     : 12px;
    letter-spacing: 0.10em;
    font-weight   : 700;
    text-transform: uppercase;
    color         : rgba(255,255,255,0.45);
    margin-bottom : 14px;
}

.footer-links {
    list-style  : none;
    margin      : 0;
    padding     : 0;
    display     : flex;
    flex-direction: column;
    gap         : 9px;
}

.footer-links a {
    color          : rgba(255,255,255,0.60);
    text-decoration: none;
    font-size      : 14px;
    transition     : color 0.15s;
}

.footer-links a:hover { color: #ffffff; }

.footer-address {
    font-style  : normal;
    color       : rgba(255,255,255,0.55);
    font-size   : 14px;
    line-height : 1.75;
}

.footer-bottom {
    border-top  : 1px solid rgba(255,255,255,0.10);
    text-align  : center;
    padding     : 16px 24px;
    font-size   : 12px;
    color       : rgba(255,255,255,0.35);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile adjustments
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    .footer-inner {
        grid-template-columns : 1fr 1fr;
    }

    .contact-grid {
        grid-template-columns : 1fr;
    }

    .contact-map { min-height: 320px; }
}

@media (max-width: 768px) {

    /* Show hamburger, hide desktop links */
    .hamburger  { display: flex; }
    .nav-links  { display: none; }

    .page-hero  { padding: 56px 20px 64px; }
    .section    { padding: 52px 20px; }

    .form-row   { grid-template-columns: 1fr; }

    .cake-order-form { padding: 24px 18px; }

    .cert-info-banner { padding: 22px 20px; }
}

@media (max-width: 560px) {

    .footer-inner {
        grid-template-columns : 1fr;
        gap                   : 28px;
        padding               : 40px 20px 28px;
    }

    .course-grid {
        grid-template-columns : 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (screens narrower than 480 px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .main-content {
        padding : 40px 12px 60px;
    }

    .verify-form {
        flex-direction : column;
    }

    .cert-input,
    .verify-btn {
        width : 100%;
    }

    .page-title {
        font-size : 24px;
    }

    .cert-title {
        font-size : 19px;
    }

    .cert-table td:first-child {
        width : 44%;
    }
}