/* ============================================================
   Alosmania Frontend — Checkout + Thank You Page CSS
   File: public/css/frontend/checkout.css
   ============================================================ */

/* ─── Checkout Layout ───────────────────────────────────── */
.checkout-layout{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start}
.checkout-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.checkout-section h2{font-size:18px;font-weight:700;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border2)}

/* ─── Order Items ────────────────────────────────────────── */
.checkout-order-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border2)}
.checkout-order-item:last-child{border-bottom:none}
.checkout-item-img{width:48px;height:48px;border-radius:6px;overflow:hidden;flex-shrink:0;border:1px solid var(--border)}
.checkout-item-img img{width:100%;height:100%;object-fit:cover}
.checkout-item-info{flex:1;font-size:13px}
.checkout-item-info .name{font-weight:500;color:var(--text)}
.checkout-item-info .meta{color:var(--text2);font-size:12px}
.checkout-item-price{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}

/* ─── Totals ─────────────────────────────────────────────── */
.checkout-totals{padding-top:12px;border-top:1px solid var(--border)}
.checkout-totals-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.checkout-totals-row.total{font-size:18px;font-weight:800;border-top:2px solid var(--border);padding-top:12px;margin-top:8px}
.checkout-totals-row.total .amount{color:var(--accent)}

/* ─── Payment Methods ────────────────────────────────────── */
.payment-methods{margin-top:16px}
.payment-method{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.payment-method.active{border-color:var(--accent);background:var(--accent-light)}
.payment-method input[type="radio"]{margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.payment-method-info{flex:1}
.payment-method-info h4{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.payment-method-info h4 img{flex-shrink:0}
.payment-method-info p{font-size:12px;color:var(--text2);margin-top:2px}
.pm-fields-wrap{padding:14px 16px;margin:-4px 0 8px;border:1.5px solid var(--accent);border-radius:var(--radius);background:rgba(245,166,35,0.04)}
.pm-fields-wrap .form-group{margin-bottom:10px}
.pm-fields-wrap .form-group:last-child{margin-bottom:0}
.pm-fields-wrap .form-control{font-size:14px}

/* ─── Coupon Section ─────────────────────────────────────── */
.coupon-section{background:var(--card-bg, #f8f9fc);border:1px solid var(--border, #e0e3ea);border-radius:10px;padding:0;margin-bottom:16px;overflow:hidden}
.coupon-toggle{display:block;width:100%;padding:12px 16px;background:none;border:none;text-align:left;font-size:13px;font-weight:600;color:var(--accent, #f5a623);cursor:pointer;transition:background .2s}
.coupon-toggle:hover{background:rgba(245,166,35,.04)}
.coupon-toggle .arrow{display:inline-block;transition:transform .2s;margin-left:4px;font-size:10px}
.coupon-toggle.open .arrow{transform:rotate(180deg)}
.coupon-body{display:none;padding:0 16px 14px 16px}
.coupon-body.open{display:block}
.coupon-input-wrap{display:flex;gap:8px}
.coupon-input-wrap input{flex:1;padding:10px 14px;border:1px solid var(--border, #e0e3ea);border-radius:8px;font-size:14px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.coupon-input-wrap input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(245,166,35,.12)}
.coupon-input-wrap button{padding:10px 18px;border-radius:8px;font-weight:600;font-size:13px;border:none;cursor:pointer;transition:.2s}
.coupon-apply-btn{background:var(--accent);color:#fff}
.coupon-apply-btn:hover{opacity:.9}
.coupon-remove-btn{background:rgba(255,77,109,.1);color:#ff4d6d}
.coupon-msg{font-size:12px;margin-top:6px;font-weight:500}
.coupon-msg.success{color:#00c49a}
.coupon-msg.error{color:#ff4d6d}
.coupon-applied-badge{display:flex;align-items:center;gap:8px;background:rgba(0,196,154,.08);border:1px solid rgba(0,196,154,.25);border-radius:8px;padding:10px 14px;margin-top:8px}
.coupon-applied-badge .code{font-weight:700;letter-spacing:1px;color:var(--text);font-size:14px}
.coupon-applied-badge .discount{margin-left:auto;font-weight:700;color:#00c49a;font-size:14px}
.coupon-applied-badge .remove-btn{background:none;border:none;color:#ff4d6d;font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.checkout-totals-row.coupon-row{color:#00c49a}
.checkout-totals-row.coupon-row span:last-child{font-weight:600}

/* ─── Searchable District Select ─────────────────────────── */
.district-select-wrapper {
    position: relative;
    width: 100%;
}

/* The trigger button that looks like a normal select */
.district-select-trigger {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: all .2s;
    font-family: var(--font);
    text-align: left;
    min-height: 42px;
}
.district-select-trigger:hover {
    border-color: #c5c9d6;
}
.district-select-trigger.open {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-light);
    border-radius: var(--radius) var(--radius) 0 0;
}
.district-select-trigger .placeholder {
    color: #b0b7c9;
}
.district-select-trigger .arrow-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--text2);
    transition: transform .2s;
}
.district-select-trigger.open .arrow-icon {
    transform: rotate(180deg);
}

/* The dropdown panel */
.district-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(27,35,64,.12);
    z-index: 50;
    max-height: 280px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}
.district-select-dropdown.open {
    display: flex;
}

/* Search input inside dropdown */
.district-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
    background: #f9fafb;
    outline: none;
    font-family: var(--font);
    flex-shrink: 0;
}
.district-search-input:focus {
    background: #fff;
}
.district-search-input::placeholder {
    color: #b0b7c9;
}

/* Search icon inside input */
.district-search-wrap {
    position: relative;
    flex-shrink: 0;
}
.district-search-wrap .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text2);
    pointer-events: none;
}

/* Options list */
.district-options-list {
    overflow-y: auto;
    max-height: 230px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(27,35,64,.15) transparent;
}
.district-options-list::-webkit-scrollbar {
    width: 5px;
}
.district-options-list::-webkit-scrollbar-track {
    background: transparent;
}
.district-options-list::-webkit-scrollbar-thumb {
    background: rgba(27,35,64,.15);
    border-radius: 5px;
}

/* Each option */
.district-option {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: background .12s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.district-option:hover {
    background: var(--accent-light, rgba(193,0,21,.06));
}
.district-option.selected {
    background: var(--accent-light, rgba(193,0,21,.06));
    color: var(--accent);
    font-weight: 600;
}
.district-option.selected::after {
    content: '✓';
    margin-left: auto;
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
}
.district-option.hidden {
    display: none;
}

/* No results message */
.district-no-results {
    padding: 16px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text2);
    display: none;
}
.district-no-results.visible {
    display: block;
}

/* Highlight matching text */
.district-option .match-highlight {
    background: rgba(245,166,35,.2);
    color: var(--text);
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

/* ─── Thank You Page ─────────────────────────────────────── */
.thank-you-page{max-width:640px;margin:40px auto;text-align:center}
.thank-you-icon{width:80px;height:80px;border-radius:50%;background:rgba(0,196,154,.1);color:var(--success);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:36px}
.thank-you-page h1{font-size:24px;font-weight:800;margin-bottom:8px}
.thank-you-page p{font-size:14px;color:var(--text2);margin-bottom:24px}
.order-details-box{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:left;margin-bottom:24px}
.order-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.order-detail-item{font-size:13px}
.order-detail-item .label{color:var(--text2);margin-bottom:2px}
.order-detail-item .value{font-weight:700;font-size:15px}

/* ─── Responsive (match homepage — no horizontal scroll) ─── */
@media(max-width:768px){
    .checkout-layout{
        grid-template-columns:1fr;
        gap:16px;
        width:100%;
        max-width:100%;
        min-width:0;
    }
    .checkout-layout > div{
        min-width:0;
        max-width:100%;
    }
    .checkout-section{
        padding:16px;
        margin-bottom:14px;
        max-width:100%;
    }
    .checkout-order-summary{
        width:100%;
        max-width:100%;
        min-width:0;
    }
    .checkout-order-item{
        flex-wrap:wrap;
        gap:10px;
    }
    .checkout-item-info{
        flex:1 1 calc(100% - 60px);
        min-width:0;
    }
    .checkout-item-info .name{
        word-break:break-word;
    }
    .checkout-item-price{
        flex:1 1 100%;
        text-align:left;
        white-space:normal;
    }
    .coupon-input-wrap{
        flex-direction:column;
    }
    .coupon-input-wrap button{
        width:100%;
    }
    .coupon-applied-badge{
        flex-wrap:wrap;
        gap:8px;
    }
    .payment-method-info h4{
        flex-wrap:wrap;
    }
    .district-select-wrapper,
    .district-select-trigger,
    .district-select-dropdown{
        max-width:100%;
    }
    .order-details-grid{grid-template-columns:1fr}
    .fcc-block-modal{
        max-width:calc(100vw - 32px);
    }
}