/* =========================================
   ASKER GOLF LOUNGE - ULTIMATE DELUXE (Full Pakke + Smale felter)
   ========================================= */

/* --- 1. VARIABLER & GRUNNOPPSETT --- */
:root {
    --neon-green: #39FF14;
    --dark-bg: #050505;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #888888;
}

.agb-wrapper {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--dark-bg);
    background-image: radial-gradient(circle at 50% 0%, #1a2e1a 0%, #000000 80%);
    color: var(--text-main);
    padding: 60px 20px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    min-height: 750px; /* Litt ekstra høyde så ingenting kuttes */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Kraftig grønn glød i TOPPEN */
.agb-glow {
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px;
    background: var(--neon-green); filter: blur(150px); opacity: 0.25; pointer-events: none; z-index: 0;
}
/* Kraftig grønn glød i BUNNEN */
.agb-glow-bottom {
    position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px;
    background: var(--neon-green); filter: blur(150px); opacity: 0.15; pointer-events: none; z-index: 0;
}

/* --- 2. GLASS-KORTET (Hovedboksen) --- */
.agb-glass-card {
    position: relative;
    z-index: 10;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    width: 100%;
    max-width: 480px;
    /* Dyp, lekker skygge */
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

/* Header styling */
.agb-booking-header { text-align: center; margin-bottom: 40px; border-bottom: 1px solid var(--glass-border); padding-bottom: 20px; }
.agb-booking-header h2 { font-size: 24px; font-weight: 300; color: #fff; margin: 0; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 10px 20px rgba(0,0,0,1); }
.agb-booking-header p { color: var(--neon-green); font-size: 12px; letter-spacing: 3px; margin-top: 5px; font-weight: 700; text-transform: uppercase; text-shadow: 0 0 10px rgba(57, 255, 20, 0.4); }

/* --- 3. DEN STORE KNAPPEN (Velg dato) --- */
.agb-fake-button {
    width: 100%; height: 80px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center; gap: 15px;
    color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    transition: 0.3s; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Skygge på knappen */
}
.agb-fake-button:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.agb-fake-button.date-selected {
    background: rgba(57, 255, 20, 0.1); border-color: var(--neon-green); color: #fff;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); height: 60px;
}

/* Puls animasjon */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.4); border-color: rgba(57, 255, 20, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(57, 255, 20, 0); border-color: rgba(57, 255, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); border-color: rgba(57, 255, 20, 0); }
}
.pulse-animation { animation: pulse-green 2s infinite; }
.agb-icon { font-size: 24px; }

/* --- 4. KALENDER MODAL (Rammer er med!) --- */
.agb-calendar-popup {
    position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90vw; max-width: 360px;
    z-index: 99999;
    /* Mørk bakgrunn */
    background: #050505;
    /* TYDELIG RAMME */
    border: 1px solid var(--neon-green);
    border-radius: 20px;
    padding: 30px;
    /* DIMME BAKGRUNNEN (Viktig!) */
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.85), 0 30px 80px rgba(0,0,0,1);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.agb-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; color: #fff; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.agb-cal-nav { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--neon-green); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.agb-cal-nav:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 10px var(--neon-green); }

/* Ukedager */
.agb-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--neon-green); margin-bottom: 15px; }
.agb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

/* Dato sirklene */
.agb-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; font-weight: 500; color: #fff; cursor: pointer; border: 1px solid transparent; transition: 0.2s; }
.agb-cal-day:hover:not(.disabled) { background: rgba(57, 255, 20, 0.2); border-color: var(--neon-green); color: #fff; transform: scale(1.1); box-shadow: 0 0 10px rgba(57, 255, 20, 0.2); }
.agb-cal-day.disabled { color: #333; cursor: default; text-decoration: line-through; }

/* --- 5. TIDS-SLOTS --- */
.agb-time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 30px 0 20px 0; }
.agb-time-slot:not(.booked) { background: linear-gradient(180deg, #1b4d2e 0%, #0d2617 100%); border: 1px solid #2e7d32; color: #fff; padding: 12px; border-radius: 50px; text-align: center; cursor: pointer; font-size: 14px; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
.agb-time-slot:not(.booked):hover { background: linear-gradient(180deg, #2e7d32 0%, #1b4d2e 100%); border-color: #39FF14; transform: translateY(-2px); box-shadow: 0 0 20px rgba(57, 255, 20, 0.3); }
.agb-time-slot.selected { background: var(--neon-green) !important; color: #000 !important; border-color: var(--neon-green); transform: scale(1.05); box-shadow: 0 0 25px rgba(57, 255, 20, 0.6); }
.agb-time-slot.booked { background: linear-gradient(180deg, #2a0a0a 0%, #000000 100%); border: 1px solid #5c1818; color: #ff5555; text-decoration: line-through; border-radius: 50px; text-align: center; padding: 12px; opacity: 0.9; cursor: not-allowed; }

/* Angre-knappen */
.agb-change-date-btn { cursor: pointer; color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 2px; transition: 0.2s; }
.agb-change-date-btn:hover { color: var(--neon-green); border-color: var(--neon-green); }

/* --- 6. SKJEMA ELEMENTER (SMALERE & SENTRERT) --- */
/* Dette er delen som er endret for å gjøre feltene smalere */

.agb-form-group {
    margin-bottom: 25px;
    width: 100%;
    text-align: center; /* Sentrerer teksten over feltet */
}
.agb-form-group label {
    display: block; font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 10px;
}
.agb-input {
    width: 100%;
    max-width: 300px; /* Her styrer vi bredden! (Smalere enn før) */
    display: block;
    margin: 0 auto;   /* Dette sentrerer feltet */
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border);
    color: #fff;
    padding: 15px;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}
.agb-input:focus { border-color: var(--neon-green); box-shadow: 0 0 15px rgba(57, 255, 20, 0.2); }

/* Bekreft-knapp (Smalere) */
.agb-button {
    width: 100%;
    max-width: 300px; /* Samme bredde som feltene */
    display: block;
    margin: 20px auto 0 auto; /* Sentrert */
    padding: 18px; background: #fff; color: #000; border: none; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
}
.agb-button:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(255,255,255,0.3); }

/* --- 7. BEKREFTELSES POPUP (Full styling) --- */
.agb-confirmation-popup {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 20px; animation: fadeIn 0.5s ease;
    background: rgba(0,0,0,0.5); border-radius: 20px;
}
.agb-conf-icon { font-size: 60px; margin-bottom: 20px; text-shadow: 0 0 30px var(--neon-green); filter: drop-shadow(0 0 10px var(--neon-green)); }
.agb-confirmation-popup h3 { font-size: 28px; color: #fff; margin: 0 0 10px 0; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }
.agb-confirmation-popup p { color: var(--neon-green); font-size: 16px; margin: 0 0 20px 0; letter-spacing: 1px; }
.agb-conf-small { font-size: 12px !important; color: #888 !important; letter-spacing: 0 !important; }
.small-btn { width: auto; padding: 12px 40px; font-size: 14px; margin-top: 20px; border: 1px solid #333; background: #000; color: #fff; }
.small-btn:hover { background: var(--neon-green); color: #000; border-color: var(--neon-green); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- 8. FOOTER --- */
.agb-footer-info { margin-top: 30px; padding-top: 10px; text-align: center; }
.agb-footer-info p { color: var(--neon-green); font-size: 10px; letter-spacing: 2px; margin: 0; opacity: 0.8; text-transform: uppercase; text-shadow: 0 0 5px rgba(57, 255, 20, 0.2); }

/* --- 9. MOBIL-TILPASNING --- */
@media (max-width: 600px) {
    .agb-time-slots { grid-template-columns: repeat(2, 1fr); }
    .agb-glass-card { padding: 25px; }
    /* Sikrer at popupen ikke blir for bred på mobil */
    .agb-calendar-popup { width: 85vw; padding: 20px; }
}