/* =====================================================
   GiroGusto – Stile aree cliente ed esercente
   Ispirato a girogusto.it: beige caldo, tipografia
   pulita, accenti arancio/rosso, stile locale e umano
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap');

:root {
    /* Palette estratta da girogusto.it */
    --gg-bg:        #f5f0ea;       /* sfondo beige caldo */
    --gg-surface:   #ffffff;       /* card bianche */
    --gg-primary:   #c8402a;       /* rosso-arancio logo */
    --gg-primary-h: #a83320;       /* hover più scuro */
    --gg-dark:      #1c1c1c;       /* testo principale */
    --gg-mid:       #5a5a5a;       /* testo secondario */
    --gg-muted:     #9a9a9a;       /* placeholder, hint */
    --gg-border:    #e4dcd4;       /* bordi caldi */
    --gg-success:   #2d7a4f;
    --gg-error:     #c0392b;
    --gg-warning:   #c87a20;
    --gg-radius:    12px;
    --gg-radius-lg: 20px;
    --gg-shadow:    0 2px 16px rgba(28,28,28,.07);
    --gg-shadow-md: 0 4px 28px rgba(28,28,28,.11);
}

/* ── Reset base ── */
.gg-app *,
.gg-app *::before,
.gg-app *::after { box-sizing: border-box; }

.gg-app {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gg-dark);
    background: var(--gg-bg);
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* ══════════════════════════════════════
   LOGO BADGE
══════════════════════════════════════ */
.gg-logo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gg-primary);
    color: #fff;
    padding: 5px 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
}

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.gg-card {
    background: var(--gg-surface);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-lg);
    padding: 24px;
    margin-bottom: 14px;
    box-shadow: var(--gg-shadow);
}

/* ══════════════════════════════════════
   NOTICE BANNER
══════════════════════════════════════ */
.gg-notice {
    background: #fef9f0;
    border-left: 3px solid var(--gg-warning);
    padding: 13px 16px;
    border-radius: 0 var(--gg-radius) var(--gg-radius) 0;
    margin: 14px 0;
    font-size: .88rem;
    color: var(--gg-dark);
}
.gg-notice a { color: var(--gg-primary); font-weight: 600; text-decoration: none; }
.gg-notice-warning { background: #fef9f0; border-color: var(--gg-warning); }
.gg-notice-error   { background: #fdf0ef; border-color: var(--gg-error); }

/* ══════════════════════════════════════
   HERO / BALANCE (area cliente)
══════════════════════════════════════ */
.gg-hero {
    background: var(--gg-dark);
    color: #fff;
    border: none;
    border-radius: var(--gg-radius-lg);
    position: relative;
    overflow: hidden;
}
.gg-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: var(--gg-primary);
    border-radius: 50%;
    opacity: .12;
}
.gg-hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 150px; height: 150px;
    background: var(--gg-primary);
    border-radius: 50%;
    opacity: .08;
}
.gg-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.gg-welcome {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
.gg-balance {
    text-align: center;
    margin: 20px 0 14px;
    position: relative;
    z-index: 1;
}
.gg-balance-number {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.gg-balance-label {
    font-size: .85rem;
    opacity: .65;
    margin-top: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
}

/* ── Barra progresso ── */
.gg-progress-wrap { margin-top: 18px; position: relative; z-index: 1; }
.gg-progress-bar {
    height: 7px;
    background: rgba(255,255,255,.18);
    border-radius: 4px;
    overflow: hidden;
}
.gg-progress-fill {
    height: 100%;
    background: var(--gg-primary);
    border-radius: 4px;
    transition: width .5s ease;
}
.gg-progress-text {
    font-size: .8rem;
    margin-top: 7px;
    opacity: .75;
    text-align: center;
    display: block;
}
.gg-progress-text.gg-ready {
    color: #ffd166;
    font-weight: 600;
    opacity: 1;
}

/* ══════════════════════════════════════
   HEADER ESERCENTE
══════════════════════════════════════ */
.gg-merchant-header {
    background: var(--gg-dark);
    color: #fff;
    border: none;
    border-radius: var(--gg-radius-lg);
    position: relative;
    overflow: hidden;
}
.gg-merchant-header::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 160px; height: 160px;
    background: var(--gg-primary);
    border-radius: 50%;
    opacity: .12;
}
.gg-merchant-meta {
    margin: 6px 0 0;
    font-size: .88rem;
    opacity: .72;
    position: relative;
    z-index: 1;
}
.gg-merchant-meta strong { color: #ffd166; }

/* ══════════════════════════════════════
   TABS
══════════════════════════════════════ */
.gg-tabs {
    display: flex;
    gap: 3px;
    background: var(--gg-border);
    border-radius: 50px;
    padding: 4px;
    margin-bottom: 16px;
}
.gg-tab {
    flex: 1;
    padding: 8px 4px;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--gg-muted);
    transition: all .2s;
    white-space: nowrap;
}
.gg-tab.active {
    background: var(--gg-surface);
    color: var(--gg-primary);
    box-shadow: 0 2px 8px rgba(28,28,28,.1);
}
.gg-tab-content { display: none; }
.gg-tab-content.active { display: block; }

/* ══════════════════════════════════════
   QR CODE
══════════════════════════════════════ */
.gg-qr-card { text-align: center; }
.gg-qr-hint {
    font-size: .85rem;
    color: var(--gg-mid);
    margin-bottom: 14px;
    line-height: 1.5;
}
.gg-qr-image {
    max-width: 196px;
    border: 6px solid var(--gg-bg);
    border-radius: 14px;
    margin: 4px auto 10px;
    display: block;
    box-shadow: var(--gg-shadow-md);
}
.gg-qr-token {
    font-size: .72rem;
    color: var(--gg-muted);
    display: block;
    margin-top: 6px;
    font-family: monospace;
}

/* ══════════════════════════════════════
   TRANSAZIONI
══════════════════════════════════════ */
.gg-tx-list { list-style: none; padding: 0; margin: 0; }
.gg-tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--gg-border);
}
.gg-tx-item:last-child { border-bottom: none; }
.gg-tx-info { display: flex; flex-direction: column; gap: 2px; }
.gg-tx-info strong { font-size: .92rem; font-weight: 600; }
.gg-tx-date   { font-size: .72rem; color: var(--gg-muted); }
.gg-tx-amount { font-size: .78rem; color: var(--gg-mid); }
.gg-tx-points { font-weight: 700; font-size: .95rem; }
.gg-tx-earn   .gg-tx-points { color: var(--gg-success); }
.gg-tx-redeem .gg-tx-points { color: var(--gg-error); }

/* ══════════════════════════════════════
   HOW-TO STEPS
══════════════════════════════════════ */
.gg-step { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.gg-step-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: var(--gg-bg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.gg-step strong { display: block; font-weight: 600; margin-bottom: 3px; font-size: .95rem; }
.gg-step p { font-size: .84rem; color: var(--gg-mid); margin: 0; }

/* ══════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════ */
.gg-field { margin-bottom: 14px; }
.gg-field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--gg-mid);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.gg-field input,
.gg-field select,
.gg-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--gg-border);
    border-radius: var(--gg-radius);
    font-family: 'DM Sans', sans-serif;
    font-size: .95rem;
    color: var(--gg-dark);
    background: var(--gg-surface);
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}
.gg-field input:focus,
.gg-field select:focus {
    outline: none;
    border-color: var(--gg-primary);
    box-shadow: 0 0 0 3px rgba(200,64,42,.1);
}
.gg-field input::placeholder { color: var(--gg-muted); }

.gg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .gg-field-row { grid-template-columns: 1fr; } }

.gg-required { color: var(--gg-primary); margin-left: 2px; }
.gg-optional  { font-size: .75rem; color: var(--gg-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── Amount input ── */
.gg-amount-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--gg-border);
    border-radius: var(--gg-radius);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    background: var(--gg-surface);
}
.gg-amount-wrap:focus-within {
    border-color: var(--gg-primary);
    box-shadow: 0 0 0 3px rgba(200,64,42,.1);
}
.gg-currency {
    padding: 11px 13px;
    background: var(--gg-bg);
    font-weight: 700;
    color: var(--gg-mid);
    font-size: .9rem;
    border-right: 1.5px solid var(--gg-border);
    flex-shrink: 0;
}
.gg-amount-wrap input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1;
    background: transparent;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.gg-btn-primary,
.gg-btn-secondary,
.gg-btn-earn,
.gg-btn-redeem {
    display: block;
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: var(--gg-radius);
    font-family: 'DM Sans', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .2s;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: .01em;
}
.gg-btn-primary {
    background: var(--gg-primary);
    color: #fff;
    box-shadow: 0 3px 12px rgba(200,64,42,.3);
}
.gg-btn-primary:hover {
    background: var(--gg-primary-h);
    box-shadow: 0 4px 16px rgba(200,64,42,.4);
    transform: translateY(-1px);
}
.gg-btn-secondary {
    background: var(--gg-bg);
    color: var(--gg-dark);
    border: 1.5px solid var(--gg-border);
}
.gg-btn-secondary:hover { background: var(--gg-border); }
.gg-btn-earn {
    background: var(--gg-success);
    color: #fff;
    box-shadow: 0 3px 12px rgba(45,122,79,.25);
}
.gg-btn-earn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(45,122,79,.35); }
.gg-btn-redeem {
    background: var(--gg-warning);
    color: #fff;
    box-shadow: 0 3px 12px rgba(200,122,32,.25);
}
.gg-btn-redeem:hover { transform: translateY(-1px); }
.gg-btn-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .82rem;
    font-family: 'DM Sans', sans-serif;
    color: rgba(255,255,255,.65);
    padding: 0;
    transition: color .2s;
}
.gg-btn-link:hover { color: #fff; }

/* ══════════════════════════════════════
   MESSAGES
══════════════════════════════════════ */
.gg-msg {
    font-size: .84rem;
    padding: 10px 14px;
    border-radius: var(--gg-radius);
    margin: 8px 0;
    display: none;
    font-weight: 500;
}
.gg-msg:not(:empty) { display: block; }
.gg-msg.gg-error   { background: #fdf0ef; color: var(--gg-error); display: block; border: 1px solid #f5c6c2; }
.gg-msg.gg-success { background: #edf7f1; color: var(--gg-success); display: block; border: 1px solid #b8dfc8; }

/* ══════════════════════════════════════
   AUTH (login / registrazione)
══════════════════════════════════════ */
.gg-auth-app { max-width: 440px; }
.gg-auth-header { text-align: center; margin-bottom: 24px; padding-top: 8px; }
.gg-auth-header h2 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin: 14px 0 6px;
    color: var(--gg-dark);
}
.gg-auth-header p { color: var(--gg-mid); font-size: .9rem; margin: 0; }

.gg-auth-tabs {
    display: flex;
    gap: 3px;
    background: var(--gg-border);
    border-radius: 50px;
    padding: 4px;
    margin-bottom: 18px;
}
.gg-auth-tab {
    flex: 1; padding: 10px;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    color: var(--gg-muted);
    transition: all .2s;
}
.gg-auth-tab.active {
    background: var(--gg-surface);
    color: var(--gg-primary);
    box-shadow: 0 2px 8px rgba(28,28,28,.1);
}
.gg-auth-form { display: none; }
.gg-auth-form.active { display: block; }

.gg-auth-switch {
    text-align: center;
    font-size: .84rem;
    color: var(--gg-muted);
    margin-top: 16px;
}
.gg-auth-switch a {
    color: var(--gg-primary);
    text-decoration: none;
    font-weight: 600;
}
.gg-reg-intro {
    font-size: .86rem;
    color: var(--gg-mid);
    background: #fef9f5;
    border-left: 3px solid var(--gg-primary);
    padding: 10px 14px;
    border-radius: 0 var(--gg-radius) var(--gg-radius) 0;
    margin: 0 0 18px;
    line-height: 1.5;
}
.gg-form-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gg-muted);
    margin: 22px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--gg-border);
}

/* ══════════════════════════════════════
   CLIENT FOUND CARD (pannello esercente)
══════════════════════════════════════ */
.gg-client-found-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gg-bg);
    border-radius: var(--gg-radius);
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1.5px solid var(--gg-border);
}
.gg-cf-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--gg-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'DM Serif Display', serif;
}
.gg-cf-details { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gg-cf-details strong { font-size: .95rem; font-weight: 600; }
.gg-cf-balance { font-size: .82rem; color: var(--gg-mid); }
.gg-cf-reset {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; color: var(--gg-muted); padding: 4px;
    transition: color .2s; line-height: 1;
}
.gg-cf-reset:hover { color: var(--gg-error); }

/* ── Redeem banner ── */
.gg-redeem-banner {
    background: #fef9ec;
    border: 1.5px solid #f5d88a;
    border-radius: var(--gg-radius);
    padding: 12px 16px;
    font-size: .88rem;
    font-weight: 600;
    color: #7a5c0a;
    margin-bottom: 14px;
}

/* ══════════════════════════════════════
   FOTOCAMERA QR
══════════════════════════════════════ */
.gg-camera-intro { text-align: center; padding: 10px 0 12px; }
.gg-camera-icon  { font-size: 2.8rem; display: block; margin-bottom: 8px; }
.gg-camera-intro p { font-size: .88rem; color: var(--gg-mid); margin: 0 0 16px; }

.gg-video-wrap {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    background: #000;
}
#gg-qr-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gg-scan-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none;
}
.gg-scan-frame { position: relative; width: 60%; aspect-ratio: 1/1; }
.gg-scan-corner { position: absolute; width: 20px; height: 20px; border-color: #fff; border-style: solid; border-width: 0; }
.gg-scan-corner.tl { top:0; left:0;  border-top-width:3px; border-left-width:3px;  border-top-left-radius:3px; }
.gg-scan-corner.tr { top:0; right:0; border-top-width:3px; border-right-width:3px; border-top-right-radius:3px; }
.gg-scan-corner.bl { bottom:0; left:0;  border-bottom-width:3px; border-left-width:3px;  border-bottom-left-radius:3px; }
.gg-scan-corner.br { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; border-bottom-right-radius:3px; }
.gg-scan-line {
    position: absolute; left: 5%; right: 5%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gg-primary), transparent);
    animation: gg-scan-sweep 2s ease-in-out infinite; top: 0;
}
@keyframes gg-scan-sweep {
    0%  { top: 6%;  opacity: 1; }
    50% { top: 90%; opacity: 1; }
    51% { opacity: 0; } 52% { top: 6%; opacity: 0; } 53% { opacity: 1; }
    100%{ top: 6%;  opacity: 1; }
}
.gg-scan-hint {
    color: rgba(255,255,255,.82);
    font-size: .78rem; margin-top: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════
   VOUCHER OTP – area cliente
══════════════════════════════════════ */
.gg-voucher-card { text-align: center; }
.gg-voucher-header {
    display: flex; align-items: center;
    gap: 14px; text-align: left; margin-bottom: 16px;
}
.gg-voucher-icon { font-size: 2rem; flex-shrink: 0; }
.gg-voucher-header strong { display: block; font-size: .95rem; font-weight: 600; }
.gg-voucher-header p { margin: 3px 0 0; font-size: .83rem; color: var(--gg-mid); }

.gg-otp-display {
    background: var(--gg-dark);
    border-radius: var(--gg-radius-lg);
    padding: 26px 16px;
    margin: 12px 0;
}
#gg-otp-code {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}
.gg-otp-timer-wrap { margin: 12px 0 8px; }
.gg-otp-timer-bar {
    height: 5px; background: var(--gg-border);
    border-radius: 3px; overflow: hidden; margin-bottom: 6px;
}
.gg-otp-timer-fill {
    height: 100%; width: 100%;
    background: var(--gg-primary);
    border-radius: 3px; transition: width 1s linear;
}
.gg-otp-timer-label { font-size: .8rem; color: var(--gg-mid); }
.gg-otp-hint { font-size: .8rem; color: var(--gg-muted); margin: 8px 0 14px; }
.gg-otp-expired { color: var(--gg-error); font-weight: 600; margin-bottom: 12px; font-size: .9rem; }

/* ══════════════════════════════════════
   VOUCHER OTP – area esercente
══════════════════════════════════════ */
.gg-voucher-redeem-box {
    margin-top: 18px;
    background: var(--gg-bg);
    border: 1.5px dashed var(--gg-border);
    border-radius: var(--gg-radius-lg);
    padding: 18px;
}
.gg-voucher-redeem-header {
    display: flex; align-items: center;
    gap: 10px; margin-bottom: 5px;
}
.gg-voucher-redeem-header span { font-size: 1.4rem; }
.gg-voucher-redeem-header strong { font-size: .92rem; font-weight: 600; }
.gg-voucher-redeem-box > p { font-size: .84rem; color: var(--gg-mid); margin: 0 0 14px; }

.gg-otp-input-wrap { display: flex; gap: 10px; align-items: center; }
.gg-otp-input-wrap input {
    flex: 1; font-size: 1.6rem; font-weight: 700;
    letter-spacing: .22em; text-align: center;
    padding: 10px; border: 2px solid var(--gg-border);
    border-radius: var(--gg-radius);
    font-family: 'Courier New', monospace;
    max-width: 160px; background: var(--gg-surface);
    color: var(--gg-dark);
}
.gg-otp-input-wrap input:focus {
    border-color: var(--gg-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200,64,42,.1);
}
.gg-otp-input-wrap .gg-btn-primary { margin: 0; width: auto; padding: 12px 20px; flex-shrink: 0; }

/* ══════════════════════════════════════
   ACCOUNT TAB
══════════════════════════════════════ */
.gg-account-info { margin-bottom: 16px; }
.gg-account-row {
    display: flex; justify-content: space-between;
    align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--gg-border);
    font-size: .9rem;
}
.gg-account-row:last-child { border-bottom: none; }
.gg-account-row span { color: var(--gg-mid); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.gg-account-row strong { text-align: right; max-width: 60%; word-break: break-word; }
.gg-divider { border: none; border-top: 1px solid var(--gg-border); margin: 20px 0; }

/* ══════════════════════════════════════
   MISC
══════════════════════════════════════ */
.gg-empty {
    text-align: center;
    color: var(--gg-muted);
    padding: 28px 0;
    font-size: .9rem;
}

/* ══════════════════════════════════════
   ADMIN STYLES
══════════════════════════════════════ */
.gg-admin-wrap h1 { margin-bottom: 20px; }
.gg-admin-section {
    background: #fff; border: 1px solid #ddd;
    border-radius: 8px; padding: 20px 24px; margin: 20px 0;
}
.gg-admin-section h2 { margin-top: 0; font-size: 1.1rem; }

.gg-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
    gap: 14px; margin: 0 0 24px;
}
.gg-stat-card {
    background: #fff; border: 1px solid #ddd;
    border-radius: 10px; padding: 18px;
    display: flex; gap: 12px; align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.gg-stat-card.gg-stat-warning   { border-color: #ffc107; background: #fffbf0; }
.gg-stat-card.gg-stat-highlight { border-color: #c8402a; background: #fff8f5; }
.gg-stat-icon { font-size: 1.8rem; }
.gg-stat-card strong { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.gg-stat-card span   { font-size: .78rem; color: #888; }

.gg-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .8rem; font-weight: 600; }
.gg-badge-active    { background: #eafaf1; color: #27ae60; }
.gg-badge-pending   { background: #fff8e1; color: #f39c12; }
.gg-badge-suspended { background: #fdecea; color: #c0392b; }
.gg-badge-earn      { background: #eafaf1; color: #27ae60; }
.gg-badge-redeem    { background: #fdecea; color: #c0392b; }

.gg-action-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.gg-admin-msg { display: inline-block; margin-left: 10px; font-size: .85rem; font-weight: 600; }
.gg-row-msg   { display: block; margin-top: 4px; }
.gg-msg-ok    { color: #27ae60; }
.gg-msg-err   { color: #c0392b; }

/* ══════════════════════════════════════
   HIDE featured image on GiroGusto pages
   + fix tema Astra/Twenty* su mobile
══════════════════════════════════════ */

/* Nasconde immagine in evidenza */
.single-page .wp-post-image,
.page .post-thumbnail,
.page .wp-post-image,
.ast-featured-img,
.post-thumbnail,
.entry-featured-image-url,
.site-featured-img { display: none !important; }

/* Rimuove padding/margin del tema attorno al contenuto */
.entry-content .gg-app,
.page-content  .gg-app { margin-top: 0; }

.ast-container,
.entry-content { padding-left: 0 !important; padding-right: 0 !important; }

@media (max-width: 600px) {
    /* Nessun padding laterale su mobile */
    .gg-app { padding: 12px 10px 36px; }

    /* Hero più compatto */
    .gg-balance-number { font-size: 3rem; }
    .gg-welcome { font-size: 1.25rem; }

    /* Tabs scrollabili orizzontalmente se troppo strette */
    .gg-tabs { overflow-x: auto; flex-wrap: nowrap; border-radius: 14px; -webkit-overflow-scrolling: touch; }
    .gg-tabs::-webkit-scrollbar { display: none; }
    .gg-tab { min-width: 70px; font-size: .7rem; padding: 8px 6px; }

    /* Cards più compatte */
    .gg-card { padding: 18px 16px; border-radius: 16px; }

    /* Bottoni più alti per touch */
    .gg-btn-primary,
    .gg-btn-secondary,
    .gg-btn-earn,
    .gg-btn-redeem { padding: 15px 20px; font-size: 1rem; border-radius: 12px; }

    /* OTP input */
    #gg-otp-code { font-size: 2.6rem; letter-spacing: .18em; }
    .gg-otp-input-wrap { flex-wrap: wrap; }
    .gg-otp-input-wrap input { max-width: 100%; width: 100%; font-size: 2rem; }
    .gg-otp-input-wrap .gg-btn-primary { width: 100%; }

    /* Field row a colonna singola */
    .gg-field-row { grid-template-columns: 1fr; }

    /* Auth */
    .gg-auth-header h2 { font-size: 1.5rem; }

    /* Video QR scanner full width */
    .gg-video-wrap { max-height: 300px; border-radius: 14px; }

    /* Client found card */
    .gg-client-found-card { flex-wrap: wrap; gap: 10px; }

    /* Voucher redeem box */
    .gg-voucher-redeem-box { padding: 14px; }
}

/* ── Titoli interni alle card ── */
.gg-section-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    margin: 0 0 16px;
    color: var(--gg-dark);
}
.gg-section-subtitle {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--gg-dark);
}


/* ══════════════════════════════════════
   Gift / Regala punti
══════════════════════════════════════ */
.gg-gift-preview {
    text-align: center;
    background: var(--gg-bg);
    border-radius: var(--gg-radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    border: 2px dashed var(--gg-border);
}
.gg-gift-amount {
    display: block;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 3.5rem;
    color: var(--gg-primary);
    line-height: 1;
}
.gg-gift-label {
    display: block;
    font-size: .82rem;
    color: var(--gg-mid);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-top: 4px;
}

/* QR regalo con badge */
.gg-gift-qr-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}
.gg-gift-qr-wrap img {
    max-width: 200px;
    border: 6px solid var(--gg-bg);
    border-radius: 14px;
    display: block;
    box-shadow: var(--gg-shadow-md);
}
.gg-gift-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gg-primary);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(200,64,42,.35);
}

/* Badge X2 nell'hero cliente */
.gg-x2-badge {
    display: inline-block;
    background: #ffd166;
    color: #7a4f00;
    font-size: .72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .05em;
    margin-left: 8px;
    vertical-align: middle;
    animation: gg-pulse 1.5s ease-in-out infinite;
}
@keyframes gg-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}

/* ══════════════════════════════════════
   Mappa locali aderenti
══════════════════════════════════════ */
.gg-map-card { padding-bottom: 18px; }

.gg-merchants-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gg-merchant-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--gg-border);
}
.gg-merchant-item:last-child { border-bottom: none; }
.gg-merchant-icon {
    width: 38px; height: 38px;
    background: var(--gg-brand-light, #FEF0EE);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.gg-merchant-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gg-merchant-info strong {
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gg-merchant-cat {
    font-size: .75rem;
    color: var(--gg-primary);
    font-weight: 600;
}
.gg-merchant-addr {
    font-size: .75rem;
    color: var(--gg-muted);
}

/* Fix z-index Leaflet dentro app */
#gg-map .leaflet-pane { z-index: 1; }
#gg-map .leaflet-control { z-index: 2; }

/* ══════════════════════════════════════
   Consenso Privacy GDPR
══════════════════════════════════════ */
.gg-consent-wrap {
    margin-bottom: 12px;
}
.gg-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .82rem;
    color: var(--gg-mid, #5a5a5a);
    line-height: 1.5;
}
.gg-consent-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    accent-color: var(--gg-primary, #C8402A);
    cursor: pointer;
    border: none;
    padding: 0;
}
.gg-consent-label a {
    color: var(--gg-primary, #C8402A);
    text-decoration: underline;
    font-weight: 600;
}
.gg-consent-label a:hover { opacity: .8; }

/* ── Link recupera password ── */
.gg-forgot-link {
    color: var(--gg-muted, #9A9A9A);
    font-size: .82rem;
    text-decoration: none;
}
.gg-forgot-link:hover {
    color: var(--gg-primary, #C8402A);
    text-decoration: underline;
}

/* ── Link recupera password ── */
.gg-forgot-link {
    color: var(--gg-mid, #5a5a5a) !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 2px 0 6px;
    transition: color .2s;
}
.gg-forgot-link:hover {
    color: var(--gg-primary, #C8402A) !important;
}

/* ══════════════════════════════════════
   Statistiche esercente
══════════════════════════════════════ */
.gg-stats-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.gg-stat-box {
    background: var(--gg-light, #F5F0EA);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    border: 1px solid var(--gg-border, #E4DCD4);
}
.gg-stat-box strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gg-primary, #C8402A);
    line-height: 1;
    margin-bottom: 4px;
}
.gg-stat-box span {
    font-size: .72rem;
    color: var(--gg-mid, #5a5a5a);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.gg-month-stats {
    background: var(--gg-surface, #fff);
    border: 1px solid var(--gg-border, #E4DCD4);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.gg-month-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--gg-mid, #5a5a5a);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}
.gg-month-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--gg-border, #E4DCD4);
    font-size: .88rem;
}
.gg-month-row:last-child { border: none; }
.gg-month-row strong { font-weight: 700; color: var(--gg-dark, #1c1c1c); }

/* ══════════════════════════════════════
   Onboarding primo accesso
══════════════════════════════════════ */
.gg-onboarding {
    position: relative;
    border: 2px solid var(--gg-primary, #C8402A) !important;
    background: linear-gradient(135deg, #fff 0%, #FEF0EE 100%) !important;
}
.gg-onboarding h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.05rem;
}
.gg-onboarding p {
    font-size: .85rem;
    color: var(--gg-mid, #5a5a5a);
    margin-bottom: 16px;
}
.gg-onboarding-close {
    position: absolute;
    top: 14px; right: 14px;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--gg-mid, #5a5a5a);
    cursor: pointer;
    width: auto;
    padding: 0;
    line-height: 1;
}
.gg-onboarding-steps { display: flex; flex-direction: column; gap: 12px; }
.gg-ob-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.gg-ob-num {
    width: 28px; height: 28px;
    background: var(--gg-primary, #C8402A);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
}
.gg-ob-step strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.gg-ob-step p { font-size: .8rem; color: var(--gg-mid, #5a5a5a); margin: 0; }

/* ══════════════════════════════════════
   Banner Promozioni
══════════════════════════════════════ */
.gg-promo-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 10px;
    position: relative;
    animation: gg-slide-in .3s ease;
}
@keyframes gg-slide-in {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:none; }
}
.gg-promo-banner.gg-promo-banner    { background:#FEF0EE; border:1.5px solid #f5c6bc; }
.gg-promo-banner.gg-promo-x2        { background:#fffbea; border:1.5px solid #f5d88a; }
.gg-promo-banner.gg-promo-discount_extra { background:#ecfdf5; border:1.5px solid #86efac; }
.gg-promo-banner.gg-promo-event     { background:#eff6ff; border:1.5px solid #93c5fd; }
.gg-promo-icon { font-size:1.4rem; flex-shrink:0; margin-top:2px; }
.gg-promo-banner strong { display:block; font-size:.9rem; margin-bottom:3px; color:var(--gg-dark,#1c1c1c); }
.gg-promo-banner p { font-size:.8rem; color:var(--gg-mid,#5a5a5a); margin:0; line-height:1.4; }
.gg-promo-close {
    position:absolute; top:10px; right:12px;
    background:none; border:none; cursor:pointer;
    color:var(--gg-muted,#9a9a9a); font-size:.9rem;
    width:auto; padding:0; line-height:1;
}
.gg-promo-close:hover { color:var(--gg-dark,#1c1c1c); }

/* ══════════════════════════════════════
   Tab Scopri — Dove mangio oggi
══════════════════════════════════════ */
.gg-time-slot-label {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gg-dark, #1c1c1c);
    margin-bottom: 2px;
}
.gg-time-slot-sub {
    font-size: .85rem;
    color: var(--gg-mid, #5a5a5a);
}
.gg-discover-card {
    background: var(--gg-surface, #fff);
    border-radius: 16px;
    margin-bottom: 12px;
    border: 1.5px solid var(--gg-border, #E4DCD4);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.gg-discover-card:active { transform: scale(.98); }
.gg-discover-featured {
    border-color: #B8860B;
    box-shadow: 0 4px 16px rgba(184,134,11,.15);
}
.gg-featured-badge {
    background: linear-gradient(135deg, #B8860B, #DAA520);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    letter-spacing: .05em;
}
.gg-discover-photo img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
.gg-discover-body {
    padding: 14px;
}
.gg-discover-name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--gg-dark, #1c1c1c);
    margin-bottom: 2px;
}
.gg-discover-cat {
    font-size: .75rem;
    color: var(--gg-primary, #C8402A);
    font-weight: 600;
    margin-bottom: 6px;
}
.gg-discover-desc {
    font-size: .82rem;
    color: var(--gg-mid, #5a5a5a);
    line-height: 1.4;
    margin-bottom: 8px;
}
.gg-discover-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .76rem;
    color: var(--gg-muted, #9a9a9a);
}

/* ══════════════════════════════════════
   Sistema Livelli
══════════════════════════════════════ */
.gg-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.gg-level-card { margin-top: 0; }
.gg-level-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.gg-level-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    color: #fff;
}
.gg-level-header strong { display: block; font-size: 1rem; }
.gg-level-sub { font-size: .78rem; color: var(--gg-mid, #5a5a5a); }
.gg-level-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--gg-mid, #5a5a5a);
}
.gg-level-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .75rem;
    color: var(--gg-mid, #5a5a5a);
}
.gg-level-bar-row > span:first-child { min-width: 60px; }
.gg-level-bar-row > span:last-child  { min-width: 80px; text-align: right; }
.gg-level-bar {
    flex: 1;
    height: 6px;
    background: var(--gg-border, #E4DCD4);
    border-radius: 3px;
    overflow: hidden;
}
.gg-level-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .6s ease;
}
.gg-level-benefits {
    margin-top: 12px;
    background: var(--gg-light, #F5F0EA);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .8rem;
}
.gg-level-benefits strong { display: block; margin-bottom: 6px; color: var(--gg-dark, #1c1c1c); }
.gg-level-benefits span {
    display: block;
    color: var(--gg-mid, #5a5a5a);
    padding: 2px 0;
}
.gg-level-max {
    text-align: center;
    padding: 16px;
    font-weight: 600;
    color: #B8860B;
    font-size: .9rem;
}

/* Indicatore forza password */
.gg-pw-strength { height: 4px; background: #eee; border-radius: 2px; margin: 6px 0 4px; overflow: hidden; }
.gg-pw-bar { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }

/* Distanza locali */
.gg-merchant-dist {
    display: inline-block;
    font-size: .72rem;
    color: var(--gg-primary, #C8402A);
    font-weight: 600;
    margin-top: 3px;
}

/* ══════════════════════════════
   DISCOVER — Cards locali
══════════════════════════════ */
.gg-disc-section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gg-mid);
    padding: 4px 0 8px;
    margin-top: 4px;
}

.gg-disc-card {
    background: var(--gg-white);
    border: 1.5px solid var(--gg-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow .2s;
    position: relative;
}
.gg-disc-card:active { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.gg-disc-featured {
    border-color: #C9A84C;
    box-shadow: 0 0 0 1px rgba(201,168,76,.3);
}

.gg-disc-feat-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: #C9A84C;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    z-index: 1;
}

.gg-disc-photo {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--gg-light);
}
.gg-disc-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.gg-disc-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--gg-light) 0%, var(--gg-border) 100%);
}

.gg-disc-body { padding: 14px 16px; }

.gg-disc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.gg-disc-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gg-dark);
    line-height: 1.2;
}
.gg-disc-cat {
    font-size: .75rem;
    color: var(--gg-primary);
    font-weight: 600;
    margin-top: 2px;
}
.gg-disc-dist {
    font-size: .72rem;
    color: var(--gg-mid);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 8px;
    margin-top: 2px;
    flex-shrink: 0;
}
.gg-disc-desc {
    font-size: .82rem;
    color: var(--gg-mid);
    line-height: 1.5;
    margin-bottom: 10px;
}
.gg-disc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--gg-border);
}
.gg-disc-reward {
    font-size: .78rem;
    font-weight: 700;
    color: var(--gg-dark);
}