/*
 * Photobooth034 — Styles front-end
 * Les variables --pb034-* héritent des couleurs du thème WordPress actif.
 * Si le thème ne définit pas de variables, les valeurs de secours sont neutres.
 * Pour personnaliser : modifier les valeurs dans :root ci-dessous.
 */

:root {
    /* Couleur principale : hérite du thème si disponible, sinon gris foncé neutre */
    --pb034-primary:        var(--wp--preset--color--primary,        var(--wp--preset--color--vivid-cyan-blue, #444444));
    --pb034-primary-hover:  var(--wp--preset--color--primary-hover,  #222222);
    --pb034-secondary:      var(--wp--preset--color--secondary,      var(--wp--preset--color--luminous-vivid-amber, #666666));

    /* Arrière-plans */
    --pb034-bg:             var(--wp--preset--color--base,           var(--wp--preset--color--white, #ffffff));
    --pb034-bg-alt:         var(--wp--preset--color--base-2,         #f5f5f5);
    --pb034-bg-input:       var(--wp--preset--color--base,           #ffffff);

    /* Textes */
    --pb034-text:           var(--wp--preset--color--contrast,       var(--wp--preset--color--black, #1a1a1a));
    --pb034-text-muted:     var(--wp--preset--color--contrast-2,     #666666);
    --pb034-text-on-primary: #ffffff;

    /* Bordures */
    --pb034-border:         var(--wp--preset--color--contrast-3,     #cccccc);
    --pb034-border-focus:   var(--pb034-primary);

    /* Typographie */
    --pb034-font:           var(--wp--preset--font-family--body,     inherit);
    --pb034-font-size:      var(--wp--preset--font-size--medium,     1rem);

    /* Rayons */
    --pb034-radius:         8px;
    --pb034-radius-btn:     6px;

    /* États */
    --pb034-success:        #2e7d32;
    --pb034-success-bg:     #e8f5e9;
    --pb034-error:          #c62828;
    --pb034-error-bg:       #ffebee;
}

/* ─── Conteneur général des shortcodes ─────────────────────────────────────── */
.pb034-wrap {
    font-family: var(--pb034-font);
    font-size:   var(--pb034-font-size);
    color:       var(--pb034-text);
    line-height: 1.6;
    width: 100%;
}

/* ─── Formulaires ───────────────────────────────────────────────────────────── */
.pb034-form {
    background:    var(--pb034-bg);
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    padding:       2em;
    max-width:     680px;
    margin:        0 auto;
}

.pb034-form h2 {
    color:         var(--pb034-primary);
    margin-bottom: 0.5em;
    font-size:     1.4em;
}

.pb034-form .pb034-desc {
    color:         var(--pb034-text-muted);
    margin-bottom: 1.5em;
    font-size:     0.95em;
}

.pb034-form label {
    display:       block;
    font-weight:   600;
    margin-bottom: 0.3em;
    color:         var(--pb034-text);
    font-size:     0.9em;
}

.pb034-form input,
.pb034-form textarea,
.pb034-form select {
    width:            100%;
    padding:          10px 12px;
    background:       var(--pb034-bg-input);
    border:           1px solid var(--pb034-border);
    border-radius:    var(--pb034-radius);
    color:            var(--pb034-text);
    font-family:      var(--pb034-font);
    font-size:        1em;
    box-sizing:       border-box;
    transition:       border-color .2s;
}

.pb034-form input:focus,
.pb034-form textarea:focus,
.pb034-form select:focus {
    border-color: var(--pb034-border-focus);
    outline:      none;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--pb034-primary) 15%, transparent);
}

.pb034-form .pb034-field {
    margin-bottom: 1.2em;
}

/* ─── Bouton principal ──────────────────────────────────────────────────────── */
.pb034-btn {
    display:       inline-block;
    width:         100%;
    padding:       13px 20px;
    background:    var(--pb034-primary);
    color:         var(--pb034-text-on-primary);
    font-family:   var(--pb034-font);
    font-size:     1em;
    font-weight:   700;
    border:        none;
    border-radius: var(--pb034-radius-btn);
    cursor:        pointer;
    text-align:    center;
    text-decoration: none;
    transition:    background .2s, transform .1s;
    margin-top:    1em;
    box-sizing:    border-box;
}

.pb034-btn:hover {
    background:  var(--pb034-primary-hover);
    transform:   translateY(-1px);
    color:       var(--pb034-text-on-primary);
}

.pb034-btn:disabled {
    background: var(--pb034-border);
    cursor:     not-allowed;
    transform:  none;
}

/* ─── Messages succès / erreur ──────────────────────────────────────────────── */
.pb034-msg-success {
    color:         var(--pb034-success);
    background:    var(--pb034-success-bg);
    border:        1px solid var(--pb034-success);
    border-radius: var(--pb034-radius);
    padding:       14px 18px;
    margin-top:    1.2em;
    font-weight:   600;
}

.pb034-msg-error {
    color:         var(--pb034-error);
    background:    var(--pb034-error-bg);
    border:        1px solid var(--pb034-error);
    border-radius: var(--pb034-radius);
    padding:       14px 18px;
    margin-top:    1.2em;
    font-weight:   600;
}

/* ─── Slider participants ───────────────────────────────────────────────────── */
.pb034-slider-wrap,
.slider-container {
    position:      relative;
    padding-top:   2em;
    margin-bottom: 1.2em;
}

.pb034-slider-wrap input[type=range],
.slider-container input[type=range] {
    width:             100%;
    height:            8px;
    background:        var(--pb034-bg-alt);
    border-radius:     4px;
    outline:           none;
    -webkit-appearance: none;
    border:            none;
    padding:           0;
}

.pb034-slider-wrap input[type=range]::-webkit-slider-thumb,
.slider-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:          24px;
    height:         24px;
    background:     var(--pb034-primary);
    border-radius:  50%;
    cursor:         pointer;
}

.pb034-slider-wrap input[type=range]::-moz-range-thumb,
.slider-container input[type=range]::-moz-range-thumb {
    width:          24px;
    height:         24px;
    background:     var(--pb034-primary);
    border-radius:  50%;
    cursor:         pointer;
    border:         none;
}

.pb034-slider-value {
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    color:      var(--pb034-primary);
    font-weight: 700;
    font-size:  1em;
}

/* ─── Galerie ───────────────────────────────────────────────────────────────── */
.galerie-cadre {
    background:    var(--pb034-bg-alt);
    border:        1px solid var(--pb034-border);
    padding:       20px;
    border-radius: var(--pb034-radius);
    margin:        20px auto;
    text-align:    center;
    box-shadow:    0 0 10px rgba(0,0,0,.08);
    width:         100%;
    box-sizing:    border-box;
}

.galerie-cadre > img {
    max-width:     100%;
    border-radius: var(--pb034-radius);
    box-shadow:    0 0 10px rgba(0,0,0,.15);
    display:       block;
    margin:        0 auto 10px;
}

.galerie-grille {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:                   15px;
}

.galerie-grille img {
    width:         100%;
    height:        300px;
    object-fit:    cover;
    object-position: center;
    border-radius: var(--pb034-radius);
    border:        1px solid var(--pb034-border);
}

.image-actions {
    display:         flex;
    justify-content: center;
    gap:             10px;
    margin-top:      6px;
}

.image-actions a,
.image-actions button {
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  20px;
    padding:    4px;
    color:      var(--pb034-text);
}

.galerie-actions-top {
    text-align:    center;
    margin-bottom: 16px;
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    justify-content: center;
}

.btn-zip {
    display:         inline-block;
    padding:         10px 18px;
    background:      var(--pb034-primary);
    color:           var(--pb034-text-on-primary) !important;
    border-radius:   var(--pb034-radius-btn);
    text-decoration: none;
    font-weight:     700;
    font-size:       14px;
    border:          none;
    cursor:          pointer;
    transition:      background .2s;
}

.btn-zip:hover { background: var(--pb034-primary-hover); color: var(--pb034-text-on-primary) !important; }

.btn-share-all {
    display:         inline-block;
    padding:         10px 18px;
    background:      var(--pb034-secondary);
    color:           var(--pb034-text-on-primary) !important;
    border-radius:   var(--pb034-radius-btn);
    font-weight:     700;
    font-size:       14px;
    border:          none;
    cursor:          pointer;
    transition:      background .2s;
}

.btn-share-all:hover { background: var(--pb034-primary-hover); }

/* Formulaire mot de passe galerie */
.galerie-cadre input[type=password] {
    padding:       8px 12px;
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    background:    var(--pb034-bg-input);
    color:         var(--pb034-text);
    font-size:     1em;
}

.galerie-cadre button[type=submit] {
    padding:       8px 16px;
    background:    var(--pb034-primary);
    color:         var(--pb034-text-on-primary);
    border:        none;
    border-radius: var(--pb034-radius-btn);
    cursor:        pointer;
    font-weight:   600;
}

/* ─── Empreinte CB ──────────────────────────────────────────────────────────── */
.stripe-empreinte-container {
    max-width:     480px;
    width:         100%;
    margin:        1.5em auto;
    padding:       1.8em;
    background:    var(--pb034-bg-alt);
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    font-family:   var(--pb034-font);
    color:         var(--pb034-text);
}

.stripe-empreinte-container h2 {
    font-size:     1.3em;
    margin-bottom: 0.5em;
    color:         var(--pb034-primary);
}

.stripe-empreinte-container p {
    color:       var(--pb034-text-muted);
    line-height: 1.5;
    font-size:   0.95em;
}

.card-input {
    padding:       10px 12px;
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    background:    var(--pb034-bg-input);
    min-height:    42px;
    width:         100%;
    box-sizing:    border-box;
}

#submit-btn {
    display:       block;
    width:         100%;
    padding:       13px 20px;
    background:    var(--pb034-primary);
    color:         var(--pb034-text-on-primary);
    border:        none;
    border-radius: var(--pb034-radius-btn);
    cursor:        pointer;
    font-size:     1em;
    font-weight:   700;
    margin-top:    0.5em;
    transition:    background .2s;
}

#submit-btn:hover    { background: var(--pb034-primary-hover); }
#submit-btn:disabled { background: var(--pb034-border); cursor: not-allowed; }

#card-errors {
    color:         var(--pb034-error);
    background:    var(--pb034-error-bg);
    border-radius: var(--pb034-radius);
    padding:       8px 12px;
    font-size:     0.88em;
    display:       none;
    margin-top:    6px;
}

#card-errors:not(:empty) { display: block; }

.empreinte-securite {
    display:         flex;
    align-items:     center;
    gap:             6px;
    font-size:       0.78em;
    color:           var(--pb034-text-muted);
    margin-top:      0.8em;
    justify-content: center;
}

/* ─── Responsive global ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pb034-form {
        padding: 1.2em;
    }

    .form-row.two-columns {
        flex-direction: column;
        gap: 0.8em;
    }

    .stripe-empreinte-container {
        margin:  0.5em;
        padding: 1.2em;
    }

    .galerie-grille {
        grid-template-columns: 1fr 1fr;
    }

    .galerie-grille img {
        height: 180px;
    }

    .galerie-actions-top {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-zip, .btn-share-all {
        width: 100%;
        text-align: center;
    }
}

/* ─── Pages résultat (success / echec / erreur) ─────────────────────────────── */
.pb034-result {
    max-width:     560px;
    margin:        2em auto;
    padding:       2em;
    border-radius: var(--pb034-radius);
    text-align:    center;
    border:        1px solid var(--pb034-border);
    background:    var(--pb034-bg-alt);
}

.pb034-result--success {
    border-color:  var(--pb034-success);
    background:    var(--pb034-success-bg);
}

.pb034-result--warning {
    border-color:  #e65100;
    background:    #fff8e1;
}

.pb034-result--error {
    border-color:  var(--pb034-error);
    background:    var(--pb034-error-bg);
}

.pb034-result__icon {
    font-size:     3.5em;
    margin-bottom: 0.3em;
}

.pb034-result__title {
    font-size:     1.6em;
    margin-bottom: 0.5em;
    color:         var(--pb034-text);
}

.pb034-result--success .pb034-result__title { color: var(--pb034-success); }
.pb034-result--warning .pb034-result__title { color: #e65100; }
.pb034-result--error   .pb034-result__title { color: var(--pb034-error); }

.pb034-result__text {
    font-size:   1em;
    color:       var(--pb034-text-muted);
    line-height: 1.6;
    margin:      0.8em 0;
}

.pb034-result__actions {
    margin: 1.2em 0 0.5em;
}

.pb034-btn--outline {
    background:  transparent;
    border:      2px solid var(--pb034-primary);
    color:       var(--pb034-primary) !important;
}

.pb034-btn--outline:hover {
    background: var(--pb034-primary);
    color:      var(--pb034-text-on-primary) !important;
}

.pb034-link {
    color:           var(--pb034-primary);
    text-decoration: underline;
}

.pb034-field-hint {
    font-size:  0.85em;
    color:      var(--pb034-text-muted);
    margin-top: 3px;
}

@media (max-width: 600px) {
    .pb034-result {
        margin:  0.5em;
        padding: 1.2em;
    }

    .pb034-result__title { font-size: 1.3em; }
    .pb034-result__icon  { font-size: 2.8em; }
}

/* ─── Récapitulatif commande ─────────────────────────────────────────────────── */
.pb034-recap-wrap {
    max-width:   700px;
    margin:      auto;
    padding:     2em;
    font-family: var(--pb034-font);
    color:       var(--pb034-text);
}

.pb034-recap-title {
    text-align:    center;
    color:         var(--pb034-primary);
    margin-bottom: 0.5em;
}

.pb034-recap-box {
    background:    var(--pb034-bg-alt);
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    padding:       1em;
    margin-bottom: 1.2em;
}

.pb034-recap-table {
    width:           100%;
    border-collapse: collapse;
    margin-top:      1em;
    background:      var(--pb034-bg);
    border:          1px solid var(--pb034-border);
}

.pb034-td {
    padding:       8px 12px;
    border-bottom: 1px solid var(--pb034-border);
    color:         var(--pb034-text);
}

.pb034-td--center { text-align: center; }
.pb034-td--right  { text-align: right; }

/* ─── Formulaire client paiement ─────────────────────────────────────────────── */
.pb034-order-summary {
    margin-top:    1.2em;
    padding:       1em;
    background:    var(--pb034-bg-alt);
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    color:         var(--pb034-text);
}

.pb034-section-label {
    font-weight: 600;
    font-size:   1em;
    color:       var(--pb034-primary);
    margin-top:  0.8em;
}

.pb034-info-box {
    font-size:   0.9em;
    color:       var(--pb034-text-muted);
    margin-top:  0.4em;
}

.pb034-form-title {
    text-align:    center;
    margin-top:    0;
    margin-bottom: 0.8em;
    color:         var(--pb034-primary) !important;
    font-size:     1.3em;
    font-weight:   700;
    line-height:   1.3;
    display:       block;
}

/* ─── Boutons préférence de contact ──────────────────────────────────────────── */
.contact034-options {
    display:        flex;
    gap:            10px;
    flex-wrap:      wrap;
    margin:         8px 0 14px;
}

.contact034-option {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        9px 18px;
    border:         2px solid var(--pb034-border);
    border-radius:  var(--pb034-radius-btn);
    cursor:         pointer;
    font-size:      0.9em;
    font-family:    var(--pb034-font);
    color:          var(--pb034-text-muted);
    background:     var(--pb034-bg);
    transition:     border-color .15s, background .15s, color .15s;
    user-select:    none;
}

.contact034-option:hover {
    border-color:   var(--pb034-primary);
    color:          var(--pb034-primary);
}

.contact034-option.active {
    border-color:   var(--pb034-primary);
    background:     var(--pb034-primary);
    color:          var(--pb034-text-on-primary);
}

/* ─── Formulaire remplissage réservation client ───────────────────────────────── */

/* Champs readonly (préremplis, non modifiables) */
.pb034-form input[readonly],
.pb034-form input[disabled] {
    background:  var(--pb034-bg-alt);
    color:       var(--pb034-text-muted);
    cursor:      not-allowed;
    opacity:     0.85;
}

/* Checkbox matériel désactivée */
.pb034-form input[type=checkbox][disabled] {
    cursor:      not-allowed;
    opacity:     0.7;
}
.pb034-form label[style*="not-allowed"] {
    cursor:      not-allowed;
    opacity:     0.85;
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Select livraison */
.pb034-form select {
    width:         100%;
    padding:       10px 12px;
    background:    var(--pb034-bg-input);
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    color:         var(--pb034-text);
    font-family:   var(--pb034-font);
    font-size:     1em;
    box-sizing:    border-box;
}
.pb034-form select:focus {
    outline:        none;
    border-color:   var(--pb034-border-focus);
    box-shadow:     0 0 0 3px color-mix(in srgb, var(--pb034-primary) 15%, transparent);
}

/* Récapitulatif commande dans le formulaire remplissage */
#pp-order-summary {
    font-size:   0.95em;
    line-height: 1.7;
}
#pp-order-summary strong {
    color: var(--pb034-primary);
}
#pp-items div {
    padding:       3px 0;
    border-bottom: 1px solid var(--pb034-border);
    color:         var(--pb034-text);
}
#pp-items div:last-child {
    border-bottom: none;
}
#pp-rental-info {
    color:       var(--pb034-text-muted);
    font-size:   0.9em;
    margin-bottom: 6px;
}

/* Distance estimée (info-box dans la grille livraison) */
#distance-info {
    display:       flex;
    align-items:   center;
    padding:       8px 14px;
    background:    var(--pb034-bg-alt);
    border:        1px solid var(--pb034-border);
    border-radius: var(--pb034-radius);
    font-size:     0.88em;
    color:         var(--pb034-text);
    white-space:   nowrap;
    align-self:    flex-end;
}
#distance-info strong {
    color:       var(--pb034-primary);
    margin:      0 4px;
}

/* Dropdown Google Maps autocomplete — hérite du thème */
.pac-container {
    background:    var(--pb034-bg, #fff) !important;
    border:        1px solid var(--pb034-border, #ccc) !important;
    border-radius: var(--pb034-radius, 8px) !important;
    box-shadow:    0 4px 16px rgba(0,0,0,0.12) !important;
    font-family:   var(--pb034-font, inherit) !important;
    margin-top:    2px;
    z-index:       9999;
}
.pac-item {
    padding:     8px 14px !important;
    color:       var(--pb034-text, #1a1a1a) !important;
    font-size:   0.9em !important;
    cursor:      pointer;
    border-top:  1px solid var(--pb034-border, #ccc) !important;
}
.pac-item:hover,
.pac-item-selected {
    background:  var(--pb034-bg-alt, #f5f5f5) !important;
}
.pac-item-query {
    color:       var(--pb034-primary, #444) !important;
    font-weight: 600;
}
.pac-icon {
    display: none; /* masque l'icône Google si elle ne s'intègre pas bien */
}

/* ─── Grille de formulaire (lignes flex) ─────────────────────────────────────── */
.pb034-row {
    display:   flex;
    gap:       12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pb034-col {
    flex: 1;
    min-width: 140px;
}

.pb034-row > div > label,
.pb034-col > label {
    display:     block;
    font-weight: 600;
    margin-bottom: 4px;
    color:       var(--pb034-text);
}

.pb034-row > div > input,
.pb034-row > div > select,
.pb034-col > input,
.pb034-col > select {
    width:      100%;
    box-sizing: border-box;
}

/* ─── Liste de cases à cocher matériel ──────────────────────────────────────── */
.pb034-checklist {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     8px;
    padding:        10px 14px;
    background:     var(--pb034-bg-alt);
    border:         1px solid var(--pb034-border);
    border-radius:  var(--pb034-radius);
}

.pb034-check-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    font-size:   0.95em;
    color:       var(--pb034-text);
    padding:     4px 0;
}

.pb034-check-item input[type=checkbox] {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    accent-color: var(--pb034-primary);
    cursor:      pointer;
}

/* ─── Badge distance estimée ────────────────────────────────────────────────── */
.pb034-distance-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    margin-top:    10px;
    padding:       8px 16px;
    background:    var(--pb034-bg-alt);
    border:        2px solid var(--pb034-primary);
    border-radius: var(--pb034-radius-btn);
    font-size:     0.9em;
    color:         var(--pb034-text);
}

.pb034-distance-badge strong {
    color: var(--pb034-primary);
}