/* Theme: Diamond & Emerald - Luxury Jewelry Edition
   Colors: Dew Blue, Emerald Blue, Diamond White
*/

:root {
    --diamond-sparkle: #e0f2f7; /* Fondo azzurro molto chiaro */
    --emerald-blue: #006b8f;    /* Blu smeraldo per icone e accenti */
    --platinum: #d1d9e6;        /* Colore metallico per bordi */
    --luxury-text: #1a2e35;     /* Carattere scuro per leggibilità */
    --btn-bg: #b0d4de;          /* Bottone chiaro ma distinto */
    --header-footer: #f0f7f9;   /* Sfondo coordinato header/footer */
    --white: #ffffff;
}

/* 1. Reset e Base */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--diamond-sparkle);
    color: var(--luxury-text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, .luxury-font {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--emerald-blue);
    letter-spacing: 1px;
}

/* 2. Splash Screen */
#splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--diamond-sparkle) url('../../../img/splash_mobile.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Layout Strutturale (Header & Footer) */
header {
    height: 70px;
    background: var(--header-footer);
    /* Bordo lussuoso diamante sottile */
    border-bottom: 1px solid var(--platinum);
    box-shadow: 0 2px 10px rgba(0, 107, 143, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

footer {
    height: 50px;
    background: var(--header-footer);
    color: var(--emerald-blue);
    border-top: 1px solid var(--platinum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    text-transform: uppercase;
}

main {
    padding-top: 90px;
    padding-bottom: 70px;
    min-height: 100vh;
}

/* 4. Pulsanti e Azioni */
.btn-luxury {
    background: var(--btn-bg) !important;
    color: var(--luxury-text) !important;
    /* Bordo sottile che richiama il taglio del diamante */
    border: 1px solid var(--platinum) !important;
    padding: 16px 32px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.btn-luxury:active, .btn-luxury:hover {
    transform: translateY(-2px);
    background: var(--emerald-blue) !important;
    color: var(--white) !important;
    box-shadow: 0 6px 20px rgba(0, 107, 143, 0.2);
}

/* 5. Galleria Fotografica (Visualizzazione Gioielli) */
.gallery-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 20px 0;
    margin: 0 -15px 25px -15px;
}

.gallery-container img {
    flex: 0 0 85%;
    height: 380px;
    object-fit: cover;
    scroll-snap-align: center;
    border-radius: 8px;
    /* Perimetro lussuoso diamante per le foto */
    border: 1px solid var(--platinum);
    box-shadow: 0 10px 30px rgba(0, 107, 143, 0.1);
    margin-left: 15px;
}

/* 6. Campi Informativi */
.info-group {
    margin-bottom: 25px;
    padding: 15px;
    background: var(--white);
    /* Perimetro diamante lussuoso sottile per i div */
    border: 1px solid var(--platinum);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--emerald-blue);
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: 700;
}

.info-value {
    font-size: 1.25rem;
    color: var(--luxury-text);
    font-family: 'Playfair Display', serif;
    border-bottom: 1px solid var(--diamond-sparkle);
    padding-bottom: 4px;
    margin-bottom: 0;
}

/* 7. Form di Inserimento */
.form-control {
    border-radius: 4px;
    border: 1px solid var(--platinum);
    background-color: var(--white);
    padding: 14px;
    font-size: 1rem;
    color: var(--luxury-text);
    margin-bottom: 15px;
    transition: border 0.3s ease;
}

.form-control:focus {
    border-color: var(--emerald-blue);
    box-shadow: 0 0 0 3px rgba(0, 107, 143, 0.1);
    outline: none;
}

/* 8. Card Certificato Gioielleria */
.luxury-cert-card {
    background: var(--white);
    /* Bordo perimetrale diamante */
    border: 1px solid var(--platinum);
    border-radius: 12px;
    padding: 40px 25px;
    margin: 30px 0;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 107, 143, 0.08);
    position: relative;
}

.cert-diamond-icon {
    /* Icona Colore Blu Smeraldo */
    color: var(--emerald-blue);
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
    background: linear-gradient(135deg, var(--emerald-blue) 0%, #00a8cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cert-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--emerald-blue);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cert-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--luxury-text);
    max-width: 85%;
    margin: 0 auto;
}

.cert-frieze {
    margin-top: 20px;
    color: var(--platinum);
    font-size: 1.5rem;
}

/* 9. Animazioni */
.fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}

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

/* 10. Home Hero */
.hero-image {
    height: 45vh;
    width: 100%;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--platinum);
    margin-bottom: 35px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Utility per le icone FontAwesome nel testo */
i {
    color: var(--emerald-blue);
}

/* Nascondo icone header */
body > header > div:nth-child(3) {
    visibility: hidden !important;
}

/* Nasconde la prima colonna (Reference) */
.row > .col-6:first-child {
    display: none;
}

/* Espande la seconda colonna (Purchase Price) a tutta larghezza */
.row > .col-6:last-child {
    flex: 0 0 100%;
    max-width: 100%;
}


#main-content > div > div:nth-child(3) > div:nth-child(1),
#main-content > div > div:nth-child(3) > div:nth-child(2) > div:nth-child(2) > div,
#main-content > div > div:nth-child(3) > div:nth-child(3) > div:nth-child(2) > div,
#main-content > div > div:nth-child(3) > div:nth-child(4),
#main-content > div > div.p-3.text-center {
    /* Ombra multi-strato per profondità realistica */
    box-shadow: 
        0 2px 4px rgba(0, 107, 143, 0.04), 
        0 8px 16px rgba(0, 107, 143, 0.08);
    transition: box-shadow 0.3s ease; /* Transizione fluida */
}


/* Stile Icona Link Casa Madre - Versione Gioielli */
.btn-landing-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--emerald-blue);
    color: var(--emerald-blue);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Luxury Shimmer Effect */
.btn-landing-link::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: jewel-shimmer 7s infinite; /* Leggermente più lento per i gioielli */
}

@keyframes jewel-shimmer {
    0% { left: -150%; }
    12% { left: 150%; }
    100% { left: 150%; }
}

.btn-landing-link:hover {
    background: var(--emerald-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 107, 143, 0.2);
}

/* -------------------------------------------------------------------------
   INTEGRAZIONI GIOIELLI PRO - CERTIFICAZIONI E NUOVI CAMPI
   Realizzato da Lomazzi Federico
   ------------------------------------------------------------------------- */

/* Box Certificazione Dinamica nel Form */
.border-gold {
    border: 1px solid var(--platinum) !important;
    border-left: 4px solid var(--emerald-blue) !important; /* Richiamo estetico zaffiro */
    background-color: var(--white) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

/* Titoli delle certificazioni nel form */
.text-uppercase.fw-bold.small {
    color: var(--emerald-blue) !important;
    letter-spacing: 1px;
}

/* Stile per i checkbox e switch (conforme al tema) */
.form-check-input:checked {
    background-color: var(--emerald-blue) !important;
    border-color: var(--emerald-blue) !important;
}

/* Contenitore miniature anteprima (Gallery e Certificati) */
.thumb-preview-box {
    width: 55px;
    height: 55px;
    background: var(--diamond-sparkle) !important;
    border: 1px solid var(--platinum) !important;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override per il campo "Estensione Garanzia" nel form */
#ext_text {
    border: none !important;
    border-bottom: 1px solid var(--emerald-blue) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}

#ext_text:disabled {
    border-bottom-color: var(--platinum) !important;
}

/* Visualizzazione Certificati Esterni (lato Utente) */
.info-group[style*="border-left: 3px solid var(--gold)"] {
    border-left-color: var(--emerald-blue) !important; /* Sostituisco oro con blu smeraldo per coerenza */
    background: linear-gradient(to right, var(--header-footer), var(--white)) !important;
}

/* Bottoni documenti certificati */
.btn-outline-secondary {
    border-color: var(--platinum) !important;
    color: var(--emerald-blue) !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
}

.btn-outline-secondary:hover {
    background-color: var(--emerald-blue) !important;
    color: var(--white) !important;
}

/* Card Certificato Identity Record (Jewelry Identity Record) */
.luxury-cert-card .cert-title {
    font-family: 'Playfair Display', serif !important;
    background: linear-gradient(135deg, var(--emerald-blue) 0%, #00a8cc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Badge Kimberley se presente in visualizzazione */
.info-value[style*="font-size:1rem"] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

/* Utility per il pulsante "Aggiungi Certificazione" */
.btn-outline-primary {
    border-color: var(--emerald-blue) !important;
    color: var(--emerald-blue) !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.btn-outline-primary:hover {
    background-color: var(--emerald-blue) !important;
    color: var(--white) !important;
}