/* ═══════════════════════════════════════════════════════
   Sebago Shop Enhancements — CSS v1.0.0
   Couleurs : #2F4063 (bleu foncé) | #E6AF2E (or)
═══════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --sebago-blue:   #2F4063;
    --sebago-gold:   #E6AF2E;
    --sebago-light:  #f0f7ff;
    --sebago-radius: 10px;
}

/* ── Boutons globaux ────────────────────────────────────── */
.sebago-btn {
    display: inline-block;
    background: var(--sebago-blue);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: var(--sebago-radius);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.sebago-btn:hover {
    background: #1e2d47;
    transform: translateY(-1px);
}
.sebago-btn-outline {
    background: transparent;
    border: 2px solid var(--sebago-blue);
    color: var(--sebago-blue) !important;
}
.sebago-btn-outline:hover {
    background: var(--sebago-blue);
    color: #fff !important;
}
.sebago-btn-link {
    background: none;
    border: none;
    color: var(--sebago-blue);
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    padding: 0;
}
.sebago-btn-checkout {
    background: var(--sebago-gold);
    color: var(--sebago-blue) !important;
    font-size: 16px;
    width: 100%;
    text-align: center;
    display: block;
    padding: 16px;
}
.sebago-btn-checkout:hover {
    background: #d4991a;
}

/* ── Input global ───────────────────────────────────────── */
.sebago-input {
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: var(--sebago-radius);
    font-size: 15px;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.sebago-input:focus {
    border-color: var(--sebago-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 64, 99, 0.08);
}

/* ══════════════════════════════════════════════════════════
   BADGE NOUVEAU
══════════════════════════════════════════════════════════ */
.sebago-badge-new {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--sebago-gold);
    color: var(--sebago-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 9px;
    border-radius: 20px;
    z-index: 10;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Conteneur produit doit être en position relative */
.woocommerce ul.products li.product {
    position: relative;
}

/* ── Zoom hover sur les images produits ─────────────────── */
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--sebago-radius);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.woocommerce ul.products li.product a img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Images galerie produit */
.woocommerce .woocommerce-product-gallery__image img {
    border-radius: var(--sebago-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.5s ease;
}
.woocommerce .woocommerce-product-gallery__image img:hover {
    transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════
   IMAGES PANIER DESKTOP
══════════════════════════════════════════════════════════ */
.sebago-cart-img {
    display: block;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e8e8e8;
    margin-bottom: 6px;
    transition: transform 0.3s;
}
.sebago-cart-img:hover {
    transform: scale(1.05);
}

/* Images checkout */
.sebago-checkout-img {
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e8e8e8;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   PANIER MOBILE
══════════════════════════════════════════════════════════ */
.sebago-mobile-cart {
    display: none; /* Affiché uniquement sur mobile via media query */
    padding-bottom: 180px;
}

.sebago-cart-items {
    padding: 0 4px;
}

/* Item du panier mobile */
.sebago-cart-item {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    gap: 14px;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Bouton supprimer */
.sebago-remove-item {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}
.sebago-remove-item:hover {
    color: #dc3545;
}

/* Image + badge quantité */
.sebago-item-image-wrap {
    position: relative;
    flex-shrink: 0;
}
.sebago-item-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    display: block;
}
.sebago-qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--sebago-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* Infos produit */
.sebago-item-info {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}
.sebago-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #2F4063;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.sebago-item-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--sebago-blue);
    margin-bottom: 10px;
}

/* Contrôle quantité */
.sebago-qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.sebago-qty-btn {
    background: #f8f9fa;
    border: none;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    color: var(--sebago-blue);
    transition: background 0.2s;
    line-height: 1;
}
.sebago-qty-btn:hover {
    background: #e8edf3;
}
.sebago-qty-display {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}

/* Footer fixe panier mobile */
.sebago-cart-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 14px 16px;
    border-top: 2px solid #e0e0e0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    z-index: 1000;
}
.sebago-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
}
.sebago-cart-total strong {
    color: var(--sebago-blue);
    font-size: 18px;
}

/* Panier vide */
.sebago-cart-empty {
    padding: 40px 20px;
}

/* ── Masquage panier WooCommerce classique sur mobile ────── */
@media (max-width: 768px) {
    /* Afficher le panier mobile */
    .sebago-mobile-cart {
        display: block !important;
    }

    /* Masquer le panier classique WC sur mobile */
    .woocommerce-cart .woocommerce table.shop_table.cart,
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cross-sells,
    .woocommerce-cart .coupon,
    .woocommerce-cart .wc-proceed-to-checkout,
    .woocommerce-cart .cart-empty + p,
    .woocommerce-cart .actions {
        display: none !important;
    }

    /* Espacement bas de page panier */
    .woocommerce-cart-form,
    .woocommerce-cart .woocommerce {
        padding-bottom: 100px;
    }
}

/* ══════════════════════════════════════════════════════════
   COMPTE CLIENT
══════════════════════════════════════════════════════════ */
.sebago-account-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 28px;
    max-width: 440px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.sebago-account-box h3 {
    color: var(--sebago-blue);
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════
   SUIVI COMMANDE — Design moderne (classes sbt-*)
══════════════════════════════════════════════════════════ */

/* Wrapper général */
.sbt-wrap {
    max-width: 700px;
    margin: 0 auto;
    font-family: inherit;
}

/* ── Carte de recherche ───────────────────────────────── */
.sbt-search-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(47, 64, 99, 0.12);
    border: 1px solid #e2eaf5;
}

/* En-tête gradient */
.sbt-header {
    background: linear-gradient(135deg, #2F4063 0%, #3d5080 100%);
    padding: 36px 36px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sbt-header::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.sbt-header::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -40px;
    width: 150px; height: 150px;
    background: rgba(230, 175, 46, 0.08);
    border-radius: 50%;
}
.sbt-header-icon {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.sbt-header-title {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.3px;
}
.sbt-header-sub {
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

/* Formulaire */
.sbt-form {
    padding: 30px 36px 36px;
}
.sbt-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
.sbt-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #2F4063;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.sbt-input-wrap {
    position: relative;
}
.sbt-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
    font-style: normal;
}
.sbt-input {
    width: 100%;
    padding: 13px 14px 13px 38px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}
.sbt-input:focus {
    border-color: #2F4063;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(47, 64, 99, 0.09);
}

/* Bouton submit */
.sbt-submit-btn {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #2F4063, #3d5080);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(47, 64, 99, 0.25);
}
.sbt-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(47, 64, 99, 0.32);
}
.sbt-submit-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.sbt-btn-icon { font-size: 17px; }

/* Message d'erreur */
.sbt-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-top: 14px;
    text-align: center;
}

/* ── Résultat ─────────────────────────────────────────── */
@keyframes sbt-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sbt-result {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(47, 64, 99, 0.12);
    border: 1px solid #e2eaf5;
    animation: sbt-fadein 0.4s ease;
}

/* Header résultat */
.sbt-result-header {
    background: linear-gradient(135deg, #2F4063 0%, #3d5080 100%);
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.sbt-order-number {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
}
.sbt-order-date {
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    margin-top: 4px;
}
.sbt-status-badge {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* ── Timeline ─────────────────────────────────────────── */
.sbt-timeline-wrap {
    padding: 30px 28px 22px;
    border-bottom: 1px solid #f0f4f9;
}
.sbt-timeline {
    display: flex;
    align-items: flex-start;
}
.sbt-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.sbt-step-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    border: 2px solid #e2e8f0;
    background: #f1f5f9;
    color: #94a3b8;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.sbt-step--done .sbt-step-dot {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
    font-size: 16px;
}
.sbt-step--active .sbt-step-dot {
    background: #2F4063;
    border-color: #2F4063;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(47, 64, 99, 0.14);
}
/* Ligne de connexion entre étapes */
.sbt-step-line {
    position: absolute;
    top: 21px;
    left: calc(50% + 21px);
    right: calc(-50% + 21px);
    height: 2px;
    background: #e2e8f0;
    z-index: 1;
}
.sbt-step-line--done {
    background: #10b981;
}
.sbt-step-label {
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 4px;
}
.sbt-step--done .sbt-step-label,
.sbt-step--active .sbt-step-label {
    color: #2F4063;
}
.sbt-step--active .sbt-step-label {
    font-weight: 800;
}

/* ── Grille détails ───────────────────────────────────── */
.sbt-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    padding: 24px 28px 12px;
}
.sbt-detail-card {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s, background 0.2s;
}
.sbt-detail-card:hover {
    border-color: #c7d8f8;
    background: #f0f7ff;
}
.sbt-detail-icon {
    font-size: 24px;
    margin-bottom: 7px;
    display: block;
}
.sbt-detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 5px;
}
.sbt-detail-value {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    word-break: break-word;
}

/* ── Articles ─────────────────────────────────────────── */
.sbt-products {
    padding: 20px 28px 24px;
}
.sbt-section-title {
    font-size: 15px;
    font-weight: 800;
    color: #2F4063;
    margin-bottom: 14px;
    letter-spacing: -0.1px;
}
.sbt-products-list {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}
.sbt-prod-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f4f9;
    transition: background 0.15s;
}
.sbt-prod-item:last-child { border-bottom: none; }
.sbt-prod-item:hover { background: #f8fafc; }
.sbt-prod-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    display: block;
}
.sbt-prod-placeholder {
    background: #f0f4f8;
}
.sbt-prod-info {
    flex: 1;
    min-width: 0;
}
.sbt-prod-name {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sbt-prod-qty {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}
.sbt-prod-price {
    font-weight: 800;
    font-size: 14px;
    color: #2F4063;
    white-space: nowrap;
    flex-shrink: 0;
}
.sbt-products-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f0f7ff, #e8f2ff);
    border-radius: 12px;
    font-size: 14px;
    color: #2F4063;
    border: 1px solid #c7d8f8;
}
.sbt-products-total strong {
    font-size: 17px;
    font-weight: 800;
}

/* ── Actions footer ───────────────────────────────────── */
.sbt-footer {
    display: flex;
    gap: 12px;
    padding: 0 28px 28px;
    flex-wrap: wrap;
}
.sbt-link-btn {
    flex: 1;
    min-width: 160px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border: 2px solid #2F4063;
    color: #fff !important;
    background: #2F4063;
    transition: all 0.2s;
    display: block;
}
.sbt-link-btn:hover {
    background: #1e2d47;
    border-color: #1e2d47;
    transform: translateY(-1px);
}
.sbt-link-btn--outline {
    background: #fff;
    color: #2F4063 !important;
}
.sbt-link-btn--outline:hover {
    background: #f0f7ff;
    border-color: #2F4063;
    color: #2F4063 !important;
    transform: translateY(-1px);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    .sbt-header           { padding: 26px 20px 22px; }
    .sbt-header-icon      { font-size: 36px; }
    .sbt-header-title     { font-size: 19px; }
    .sbt-form             { padding: 22px 20px 24px; }
    .sbt-fields-row       { grid-template-columns: 1fr; gap: 14px; }

    .sbt-result-header    { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
    .sbt-status-badge     { align-self: flex-start; }

    .sbt-timeline-wrap    { padding: 22px 16px 18px; }
    .sbt-step-dot         { width: 34px; height: 34px; font-size: 12px; }
    .sbt-step-line        { top: 17px; left: calc(50% + 17px); right: calc(-50% + 17px); }
    .sbt-step-label       { font-size: 9.5px; }

    .sbt-details-grid     { padding: 16px 16px 8px; grid-template-columns: 1fr 1fr; }
    .sbt-products         { padding: 16px 16px 20px; }
    .sbt-footer           { padding: 0 16px 20px; flex-direction: column; }
    .sbt-link-btn         { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   RÉDUCTION / NOTICES
══════════════════════════════════════════════════════════ */
.sebago-discount-notice,
.sebago-discount-promo,
.sebago-geoloc-notice,
.sebago-simplified-notice {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT — Images produits
══════════════════════════════════════════════════════════ */
.woocommerce-checkout-review-order .product-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE GÉNÉRAL
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sebago-account-box {
        padding: 20px 16px;
    }

    .sebago-cart-item {
        padding: 12px;
        gap: 10px;
    }

    .sebago-item-img {
        width: 70px;
        height: 70px;
    }

    /* Images panier desktop cachées sur mobile (remplacées par le panier mobile) */
    .woocommerce-cart table.cart .sebago-cart-img {
        display: none;
    }
}