/* =========================================================
   TEKAMAKA ORDER — VISUAL SYSTEM
   Harmonisé avec les pages Entreprises & CSE
========================================================= */

#tk-order{
    --tk-cream:#f2f0e9;
    --tk-cream-soft:#faf9f5;
    --tk-cream-warm:#f7f5ef;
    --tk-olive:#a09f72;
    --tk-olive-dark:#747451;
    --tk-terra:#a25a3c;
    --tk-terra-dark:#87482f;
    --tk-text:#36352f;
    --tk-muted:#747169;
    --tk-border:#dedbd2;
    --tk-border-light:#e9e6de;
    --tk-green:#58704d;
    --tk-red:#a94442;

    width:100%;
    max-width:1080px;
    margin:0 auto;
    color:var(--tk-text);
    font-family:inherit;
    font-size:17px;
    line-height:1.62;
}

#tk-order *{box-sizing:border-box}

/* ---------- TYPOGRAPHIE / RYTHME ---------- */

#tk-order h2{
    margin:46px 0 16px;
    color:var(--tk-olive-dark);
    font-size:30px;
    line-height:1.2;
    font-weight:500;
}

#tk-order h2::after{
    content:"";
    display:block;
    width:48px;
    height:2px;
    margin-top:9px;
    background:var(--tk-terra);
}

#tk-order h3{
    margin:0 0 12px;
    color:var(--tk-text);
    font-size:21px;
    line-height:1.25;
    font-weight:600;
}

.tk-intro{
    max-width:900px;
    margin:0 0 22px;
    font-size:18px;
}

.tk-intro p{margin:0 0 10px}

.tk-section-text{
    max-width:900px;
    margin:0 0 18px;
    color:#5e5b54;
    font-size:16.5px;
}

.tk-notice{
    margin:22px 0 32px;
    padding:17px 20px;
    background:var(--tk-cream);
    border:1px solid #e1ddd2;
    border-left:4px solid var(--tk-terra);
    border-radius:7px;
    color:#4d4a43;
    font-size:16px;
}

.tk-notice strong{color:var(--tk-terra)}

/* ---------- CARTES / BLOCS ---------- */

.tk-box,
.tk-summary{
    margin-bottom:28px;
    padding:24px;
    background:var(--tk-cream-soft);
    border:1px solid var(--tk-border);
    border-radius:8px;
}

/* ---------- COORDONNÉES ---------- */

.tk-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 20px;
}

.tk-field{display:flex;flex-direction:column}
.tk-field-full{grid-column:1/-1}

.tk-field label,
.tk-fragrance-block label,
.tk-coffret-item label{
    display:block;
    margin-bottom:7px;
    color:#514f48;
    font-size:14px;
    font-weight:600;
}

.tk-field input,
.tk-field textarea,
.tk-product-select,
.tk-fragrance-select,
.tk-coffret-select,
.tk-qty{
    width:100%;
    min-height:46px;
    padding:10px 12px;
    background:#fff;
    border:1px solid #cbc7bd;
    border-radius:6px;
    color:var(--tk-text);
    font:inherit;
    font-size:15px;
    transition:border-color .15s ease,box-shadow .15s ease;
}

.tk-field textarea{
    min-height:120px;
    resize:vertical;
}

.tk-field input:focus,
.tk-field textarea:focus,
.tk-product-select:focus,
.tk-fragrance-select:focus,
.tk-coffret-select:focus,
.tk-qty:focus{
    outline:none;
    border-color:var(--tk-olive);
    box-shadow:0 0 0 3px rgba(160,159,114,.13);
}

/* ---------- LIGNES DE COMMANDE ---------- */

#tk-lines{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.tk-order-line{
    padding:19px;
    background:#fff;
    border:1px solid var(--tk-border);
    border-radius:8px;
}

.tk-line-top{
    display:grid;
    grid-template-columns:minmax(240px,1fr) 86px 112px 112px 36px;
    gap:13px;
    align-items:end;
}

.tk-line-field label{
    display:block;
    margin-bottom:6px;
    color:var(--tk-muted);
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.45px;
}

.tk-product-select,
.tk-fragrance-select,
.tk-coffret-select{min-height:46px}

.tk-qty{
    width:76px!important;
    min-height:46px;
    text-align:center;
}

.tk-unit-price,
.tk-line-total{
    min-height:46px;
    display:flex;
    align-items:center;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
}

.tk-line-total{color:var(--tk-terra)}

.tk-remove{
    width:33px;
    height:33px;
    margin-bottom:6px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#98958d;
    font-size:21px;
    line-height:33px;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}

.tk-remove:hover{
    background:#f5ece7;
    color:var(--tk-terra);
}

.tk-line-options{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--tk-border-light);
}
.tk-line-options:empty{display:none}

.tk-fragrance-block{max-width:480px}

.tk-decoration{
    display:block;
    margin-top:6px;
    color:var(--tk-muted);
    font-size:13px;
}

/* ---------- COFFRETS ---------- */

.tk-coffret{
    padding:16px;
    background:var(--tk-cream-warm);
    border:1px solid #ebe7dc;
    border-radius:7px;
}

.tk-coffret-title{
    margin-bottom:13px;
    color:#4c4a43;
    font-size:15px;
    font-weight:600;
}

.tk-coffret-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.tk-coffret-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}

.tk-coffret-item label{
    margin-bottom:5px;
    color:#66625b;
    font-size:13px;
}

.tk-coffret-help{
    margin-top:11px;
    color:var(--tk-muted);
    font-size:12.5px;
}

.tk-coffret-help-top{
    margin-top:-4px;
    margin-bottom:14px;
}

.tk-coffret-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.tk-coffret-instance{
    padding:14px;
    background:#fff;
    border:1px solid var(--tk-border);
    border-radius:7px;
}

.tk-coffret-instance-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.tk-coffret-number{
    color:var(--tk-terra);
    font-size:14px;
    font-weight:700;
}

.tk-coffret-duplicate{
    min-height:32px;
    padding:5px 10px;
    border:1px solid #d4d0c6;
    border-radius:5px;
    background:var(--tk-cream-soft);
    color:#5b5851;
    font:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease;
}

.tk-coffret-duplicate:hover{
    background:var(--tk-cream);
    border-color:var(--tk-olive);
}

.tk-coffret-empty{
    padding:12px;
    background:#fff;
    border:1px dashed var(--tk-border);
    border-radius:6px;
    color:var(--tk-muted);
    font-size:13px;
}

/* ---------- BOUTON AJOUT ---------- */

.tk-add{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    margin-top:16px;
    padding:10px 20px;
    border:1px solid var(--tk-olive);
    border-radius:6px;
    background:var(--tk-olive);
    color:#fff;
    font:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.tk-add:hover{
    background:var(--tk-olive-dark);
    border-color:var(--tk-olive-dark);
    transform:translateY(-1px);
}

/* ---------- PERSONNALISATION ---------- */

.tk-free-info{
    margin-bottom:16px;
    padding:13px 15px;
    background:#f0f1e8;
    border-left:3px solid var(--tk-olive);
    border-radius:3px;
    color:#4f4e45;
    font-size:14.5px;
}

.tk-pers-row{
    display:grid;
    grid-template-columns:1fr 82px 105px;
    gap:14px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--tk-border-light);
    font-size:15px;
}
.tk-pers-row:last-of-type{border-bottom:0}

.tk-small{
    margin-top:3px;
    color:var(--tk-muted);
    font-size:13px;
}

.tk-pers-total{
    color:var(--tk-terra);
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
}

.tk-pers-max{
    grid-column:1 / -1;
    margin-top:-6px;
    color:var(--tk-muted);
    font-size:12px;
}

.tk-pers-qty:disabled{
    background:#f2f0eb;
    color:#9a978f;
    cursor:not-allowed;
}

#tk-personalisation-status{
    margin-top:14px;
    color:var(--tk-muted);
    font-size:13.5px;
}

#tk-personalisation-status.ok{
    color:var(--tk-green);
    font-weight:600;
}

/* ---------- RÉCAPITULATIF ---------- */

.tk-summary{
    background:#fff;
    border-top:3px solid var(--tk-olive);
}

.tk-summary-item{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:10px 0;
    border-bottom:1px solid var(--tk-border-light);
    font-size:15px;
}
.tk-summary-item:last-child{border-bottom:0}

.tk-summary-empty{
    color:var(--tk-muted);
    font-size:14px;
    font-style:italic;
}

.tk-summary-label{flex:1}

.tk-summary-detail{
    display:block;
    margin-top:3px;
    color:var(--tk-muted);
    font-size:13px;
}

.tk-summary-price{
    font-weight:600;
    white-space:nowrap;
}

.tk-separator{
    height:1px;
    margin:20px 0;
    background:#d4d0c7;
}

.tk-total-row{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:6px 0;
    font-size:15.5px;
}

.tk-discount{color:var(--tk-terra)}
.tk-free{color:var(--tk-green);font-weight:600}

.tk-grand-total{
    margin-top:10px;
    padding-top:15px;
    border-top:1px solid #c8c3b8;
    font-size:22px;
    font-weight:700;
}
.tk-grand-total strong{color:var(--tk-terra)}

/* ---------- FINALISATION ---------- */

.tk-final{
    margin-top:26px;
    padding:20px;
    background:var(--tk-cream-soft);
    border:1px solid var(--tk-border);
    border-radius:8px;
}

.tk-final p{
    margin:0 0 9px;
    color:#514f48;
    font-size:14.5px;
}

.tk-final-info{color:var(--tk-muted)!important}

.tk-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.tk-btn{
    min-height:46px;
    padding:10px 18px;
    border:1px solid transparent;
    border-radius:6px;
    font:inherit;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.tk-btn:hover{transform:translateY(-1px)}
.tk-btn:disabled{opacity:.68;cursor:wait;transform:none}

.tk-btn-main{
    background:var(--tk-terra);
    border-color:var(--tk-terra);
    color:#fff;
}
.tk-btn-main:hover{background:var(--tk-terra-dark);border-color:var(--tk-terra-dark)}

.tk-btn-secondary{
    background:var(--tk-olive);
    border-color:var(--tk-olive);
    color:#fff;
}
.tk-btn-secondary:hover{background:var(--tk-olive-dark);border-color:var(--tk-olive-dark)}

.tk-btn-light{
    background:#fff;
    border-color:#c9c5bb;
    color:#4b4943;
}
.tk-btn-light:hover{background:var(--tk-cream);border-color:#bbb6ab}

#tk-copy-success{
    display:none;
    margin-top:12px;
    color:var(--tk-green);
    font-size:13.5px;
    font-weight:600;
}

#tk-send-error{
    display:none;
    margin-top:15px;
    padding:13px 15px;
    background:#f8ecea;
    border-left:4px solid var(--tk-red);
    border-radius:4px;
    color:#7a3230;
    font-size:13.5px;
}

#tk-order-confirmation{
    display:none;
    margin-top:17px;
    padding:15px 17px;
    background:#edf3e9;
    border-left:4px solid var(--tk-green);
    border-radius:4px;
    color:#394b32;
    font-size:14px;
    line-height:1.6;
}
#tk-order-confirmation strong{color:#33492c}

/* ---------- PAIEMENT RAPIDE ---------- */

.tk-quick-payment{
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid var(--tk-border);
}

.tk-quick-payment-title{
    margin-bottom:10px;
    color:#55524c;
    font-size:14px;
    font-weight:600;
}

.tk-quick-payment-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tk-quick-pay{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 18px;
    border-radius:6px;
    text-decoration:none!important;
    font-size:14px;
    font-weight:700;
    transition:transform .15s ease,filter .15s ease;
}
.tk-quick-pay:hover{transform:translateY(-1px);filter:brightness(.97)}

.tk-quick-sumup{background:#3069e8;color:#fff!important}
.tk-quick-paypal{background:#ffc439;color:#242424!important}

.tk-quick-payment-note{
    margin-top:7px;
    color:var(--tk-muted);
    font-size:11.5px;
}

/* ---------- PAIEMENT DÉTAILLÉ ---------- */

.tk-payment-zone{
    display:none;
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid var(--tk-border);
}
.tk-payment-zone.ready{display:block}
.tk-payment-zone>h3{margin-bottom:16px!important;font-size:22px!important}

.tk-payment-highlight{
    padding:19px;
    margin-bottom:15px;
    background:#f4f6fb;
    border:1px solid #cfd8ef;
    border-left:4px solid #3069e8;
    border-radius:7px;
}

.tk-payment-highlight-title{
    margin-bottom:8px;
    color:#315daa;
    font-size:17px;
    font-weight:700;
}

.tk-payment-highlight p{
    margin:0 0 8px;
    color:#45433e;
    font-size:14.5px;
}

.tk-payment-methods{font-size:15px!important}
.tk-payment-methods strong{color:#315daa}

.tk-payment-mail-note{
    margin-top:12px;
    padding:11px 13px;
    background:#fff;
    border:1px solid #e2e6f0;
    border-radius:5px;
    color:#4c4a45;
    font-size:13px;
    font-weight:600;
}

.tk-bank-payment{
    padding:19px;
    background:var(--tk-cream-soft);
    border:1px solid var(--tk-border);
    border-left:4px solid var(--tk-olive);
    border-radius:7px;
}

.tk-bank-payment-title{
    margin-bottom:8px;
    color:var(--tk-olive-dark);
    font-size:17px;
    font-weight:700;
}

.tk-bank-payment p{
    margin:0 0 13px;
    color:#4e4b45;
    font-size:14px;
}

.tk-bank-details{
    overflow:hidden;
    margin:13px 0;
    background:#fff;
    border:1px solid var(--tk-border);
    border-radius:6px;
}

.tk-bank-details>div{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:14px;
    padding:11px 13px;
    border-bottom:1px solid var(--tk-border-light);
}
.tk-bank-details>div:last-child{border-bottom:0}

.tk-bank-details span{
    color:var(--tk-muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.tk-bank-details strong{
    font-size:14px;
    word-break:break-word;
}

.tk-bank-reference{
    margin-top:12px!important;
    margin-bottom:0!important;
    color:var(--tk-muted)!important;
    font-size:13px!important;
}

/* ---------- CONDITIONS ---------- */

.tk-conditions{
    color:#55524c;
    font-size:15px;
}

.tk-conditions ul{padding-left:21px}
.tk-conditions li{margin-bottom:7px}

.tk-bank{
    margin-top:20px;
    padding:16px 18px;
    background:var(--tk-cream);
    border-left:3px solid var(--tk-olive);
    border-radius:4px;
    color:#4e4c46;
    font-size:13.5px;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){
    #tk-order{font-size:16px}
    #tk-order h2{font-size:27px}
    .tk-line-top{
        grid-template-columns:minmax(190px,1fr) 78px 96px 100px 34px;
        gap:9px;
    }
    .tk-coffret-grid,.tk-coffret-grid.two{grid-template-columns:1fr}
}

@media(max-width:650px){
    .tk-coffret-instance-head{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .tk-coffret-duplicate{
        width:100%;
    }
    #tk-order{font-size:16px;line-height:1.55}
    #tk-order h2{margin-top:36px;font-size:25px}
    .tk-intro{font-size:16.5px}
    .tk-notice{padding:14px 15px;font-size:15px}

    .tk-box,.tk-summary{padding:16px}
    .tk-fields{grid-template-columns:1fr;gap:14px}
    .tk-field-full{grid-column:auto}

    .tk-order-line{position:relative;padding:15px}
    .tk-line-top{grid-template-columns:1fr 82px;gap:11px}
    .tk-product-column{grid-column:1/-1}
    .tk-price-column{grid-column:1}
    .tk-total-column{grid-column:2}
    .tk-remove-column{position:absolute;top:9px;right:9px}

    .tk-pers-row{grid-template-columns:1fr 72px;gap:10px}
    .tk-pers-total{grid-column:1/-1}

    .tk-summary-item{font-size:14px}
    .tk-total-row{font-size:14.5px}
    .tk-grand-total{font-size:20px}

    .tk-actions{display:grid;grid-template-columns:1fr}
    .tk-btn{width:100%}

    .tk-quick-payment-buttons{display:grid;grid-template-columns:1fr}
    .tk-quick-pay{width:100%}

    .tk-bank-details>div{grid-template-columns:1fr;gap:3px}
}