/* css/style.css */

/* --- 1. Importazione dei Font da Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Lato:wght@400;700&display=swap');

/* --- 2. Variabili CSS per una facile personalizzazione --- */
:root {
    --primary-color: #0A2540;
    --accent-color: #00D09C;
    --bg-light-color: #F9FAFB;
    --text-color: #333740;
    --border-color: #E5E7EB;
    --card-bg-color: #FFFFFF;
    
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* Sovrascriviamo le variabili di Bootstrap con le nostre */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 10, 37, 64;
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--bg-light-color);
    --bs-body-color: var(--text-color);
    --bs-border-radius: 0.5rem; /* Bordi leggermente pi첫 arrotondati */
}


/* --- 3. Stili Globali e Reset --- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}


/* --- 4. Stile dei Componenti Personalizzati --- */

/* Barra di Navigazione (Header) */
.navbar {
    background-color: var(--primary-color) !important;
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
}
.navbar .nav-link {
    font-weight: 500;
    transition: color 0.2s;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--accent-color) !important;
}
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Bottoni */
.btn {
    font-family: var(--font-heading);
    font-weight: 500;
    border-radius: 8px;
    padding: 12px 24px;
    border: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background-color: #061a2b;
    color: white;
}
.btn-accent {
    background-color: var(--accent-color);
    color: white;
}
.btn-accent:hover {
    background-color: #00b88a;
    color: white;
}

/* Card Generiche */
.card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
    background-color: var(--card-bg-color);
}

/* ---- NUOVI STILI PER LA GIFT CARD ---- */
/* Stile per la forma e l'aspetto della card */
.gift-card-shape {
    aspect-ratio: 85.6 / 53.98; /* Aspect ratio ufficiale delle carte di credito */
    width: 100%;
    max-width: 400px; /* Limite massimo per non farla diventare enorme su schermi grandi */
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(10, 37, 64, 0.2), 0 6px 6px rgba(10, 37, 64, 0.23);
    background: linear-gradient(135deg, #0A2540 0%, #1c456f 100%);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Spinge il contenuto sopra e sotto */
    position: relative;
    overflow: hidden; /* Nasconde elementi che potrebbero sbordare */
}

/* Stili per il contenuto della card */
.gift-card-shape .card-type {
    font-weight: 500;
    font-size: 0.9rem;
    color: white;
    opacity: 0.7;
}

.gift-card-shape .card-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-align: center;
    color: #ffffff;
    margin-top: auto;
}

.gift-card-shape .card-balance-wrapper {
    text-align: right;
    margin-top: auto;
}

.gift-card-shape .card-balance-label {
    font-size: 0.8rem;
    opacity: 0.7;
    text-transform: uppercase;
}

.gift-card-shape .card-balance-amount {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}
/* ---- FINE NUOVI STILI ---- */
/* --- STILI DI FIX PER STRIPE ELEMENTS --- */

/* Assicura che il contenitore dell'elemento della carta abbia uno spazio minimo
   e un aspetto pulito, sovrascrivendo eventuali stili di default di Bootstrap. */
#card-element {
    padding: 1rem !important; /* Forza il padding */
    border: 1px solid var(--border-color) !important; /* Forza il bordo */
    border-radius: var(--bs-border-radius) !important; /* Forza il bordo arrotondato */
    background-color: white !important; /* Forza lo sfondo bianco */
    min-height: 56px !important; /* Forza un'altezza minima esplicita per l'iframe */
    line-height: 24px !important; /* Assicurati che il testo si veda */
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important; /* Nascondi overflow, per sicurezza */
    position: relative !important; /* Aggiungi posizione relativa */
    z-index: 100 !important; /* Forza un alto z-index per essere sopra altri elementi */
}
/* Regole per forzare l'iframe di Stripe ad essere visibile e a grandezza piena */
#card-element iframe {
    height: 100% !important;
    width: 100% !important;
    min-height: 56px !important;
    display: block !important;
    position: absolute !important; /* Per occupare tutto lo spazio */
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    border: none !important; /* Rimuovi il bordo interno dell'iframe */
    background-color: transparent !important; /* Assicurati che sia trasparente */
    box-sizing: border-box !important; /* Assicurati che il box-sizing sia standard */
}


/* Stile per l'elemento di Stripe quando è in focus (l'utente ci sta scrivendo dentro) */
#card-element.StripeElement--focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1) !important;
}

/* Mostra un placeholder se il campo è vuoto */
#card-element.StripeElement--empty::before {
    content: "Numero carta"; /* Ripristina il placeholder */
    color: #6c757d !important;
    position: absolute !important;
    top: 50% !important;
    left: 1rem !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important; /* Non bloccare il click sotto */
}
/* Rimuovi l'indicatore di testo HTML della label for, se c'è */
label[for="card-element"]::before {
    display: none !important;
}
/* Rimuovi ogni potenziale elemento di test che sia ancora nel div */
#card-element > span {
    display: none !important;
}
/* Nascondi il campo input normale per test, se ne avessi aggiunto */
input[type="text"][name="card-number"],
input[type="text"][name="card-expiry"],
input[type="text"][name="card-cvc"] {
    display: none !important;
}

/* Stile per card con bordo tratteggiato (es. 'Nessuna card') */
.border-dashed {
    border: 2px dashed var(--border-color);
}


/* Campi dei Form */
.form-control, .form-select {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1);
    outline: none;
}

/* Footer */
footer {
    background-color: var(--card-bg-color); /* Sfondo bianco come le card */
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 1.5rem 0;
}

/* --- STILI PER I TEMPLATE DELLE GIFT CARD --- */

/* Stile di base (ereditato da .gift-card-shape) */
.gift-card-shape {
    /* ... stili esistenti ... */
    transition: background 0.5s ease;
}

/* Template 1: Blu Classico (è lo stile che già usiamo) */
.card-template-classic-blue {
    background: linear-gradient(135deg, #0A2540 0%, #1c456f 100%);
    color: white;
}
.card-template-classic-blue .card-code { color: white; }
.card-template-classic-blue .card-type,
.card-template-classic-blue .card-balance-label { color: white; opacity: 0.7; }

/* Template 2: Festa di Compleanno */
.card-template-birthday {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    color: #333;
}
.card-template-birthday .card-code { color: #1a2a4a; font-weight: bold; }
.card-template-birthday .card-type,
.card-template-birthday .card-balance-label { color: #333; opacity: 0.8; }

/* Template 3: Eleganza Dorata */
.card-template-gold-elegance {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    color: #f2e2b4;
    border: 2px solid #d4af37;
}
.card-template-gold-elegance .card-code { color: #f2e2b4; }
.card-template-gold-elegance .card-type,
.card-template-gold-elegance .card-balance-label { color: #f2e2b4; opacity: 0.8; }
.card-template-gold-elegance .card-balance-amount { color: #f2e2b4; }


/* Template 4: Magia Natalizia */
.card-template-christmas {
    background: linear-gradient(135deg, #d32f2f 0%, #8a0000 100%);
    color: white;
    /* Potremmo aggiungere un'immagine di sfondo qui */
    /* background-image: url('/images/snowflake-pattern.svg'); */
}
.card-template-christmas .card-code { font-family: 'Georgia', serif; color: #fff; }
.card-template-christmas .card-type,
.card-template-christmas .card-balance-label { color: white; opacity: 0.9; }
.card-template-christmas .card-balance-amount { color: #ffeb3b; }