/* COMTRANS order UI — isolated styles for order details and checkout selectors */
:root {
    --af-order-blue: #14326e;
    --af-order-blue-2: #47639a;
    --af-order-light-blue: #96afd7;
    --af-order-graphite: #262523;
    --af-order-gray: #515151;
    --af-order-muted: #909091;
    --af-order-border: #e1e7ef;
    --af-order-soft: #f5f8fc;
    --af-order-white: #fefefe;
}

/* Order detail cards */
.af-order-detail-card,
.af-order-status-history,
.af-order-form-section {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--af-order-border);
    border-radius: 14px;
    background: var(--af-order-white);
    box-shadow: 0 5px 18px rgba(20, 50, 110, .045);
    box-sizing: border-box;
}

.af-order-detail-card__header,
.af-order-status-history__header,
.af-order-form-section__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.af-order-detail-card__icon,
.af-order-status-history__icon,
.af-order-form-section__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf3fb;
    color: var(--af-order-blue);
    font-size: 14px;
}

.af-order-detail-card__title,
.af-order-status-history__title,
.af-order-form-section__title {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--af-order-graphite) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.af-order-detail-card__body { padding-left: 44px; }
.af-order-detail-card__value { display: grid; gap: 5px; color: var(--af-order-gray); font-size: 13px; line-height: 1.55; }
.af-order-detail-card__value strong { color: var(--af-order-blue); font-size: 14px; font-weight: 800; }
.af-order-detail-card__value span { display: block; }

/* Status history */
.af-order-status-history__timeline { position: relative; display: grid; gap: 0; margin-left: 16px; }
.af-order-status-history__item { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 12px; padding: 0 0 18px; }
.af-order-status-history__item:last-child { padding-bottom: 0; }
.af-order-status-history__item:not(:last-child)::before { content:""; position:absolute; left:6px; top:13px; bottom:-1px; width:2px; background:#dfe6f0; }
.af-order-status-history__marker { position:relative; z-index:2; width:14px; height:14px; margin-top:3px; border:3px solid #fff; border-radius:50%; background:var(--af-order-history-color, var(--af-order-blue-2)); box-shadow:0 0 0 2px var(--af-order-history-color, var(--af-order-blue-2)); }
.af-order-status-history__content { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 2px; }
.af-order-status-history__date { display:inline-flex; align-items:center; gap:7px; color:var(--af-order-muted); font-size:12px; white-space:nowrap; }
.af-order-status-history__date i { color:var(--af-order-light-blue); }
.af-order-status-history__status { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; min-width:0; }
.af-order-status-history__label { color:var(--af-order-muted); font-size:11px; }
.af-order-status-history__badge { display:inline-flex; align-items:center; min-height:26px; padding:4px 10px; border-radius:999px; background:#f4f6fa; color:var(--af-order-history-color, #47639a); border:1px solid #e1e7ef; font-size:11px; font-weight:800; }
.af-order-status-history__empty { min-height:90px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--af-order-muted); font-size:13px; }

/* Ordered products */
.af-order-products-list { display:grid; gap:12px; width:100%; }
.af-order-product-card { display:grid !important; grid-template-columns:110px minmax(0,1fr) !important; gap:16px !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:15px !important; border:1px solid var(--af-order-border) !important; border-radius:14px !important; background:#fff !important; box-sizing:border-box !important; box-shadow:0 4px 14px rgba(38,37,35,.025); }
.af-order-product-card__media { min-width:0; }
.af-order-product-card__image-link,
.af-order-product-card__image-placeholder { width:110px; height:100px; border-radius:11px; background:#f6f8fb; border:1px solid #edf0f4; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.af-order-product-card__image { display:block !important; width:100% !important; height:100% !important; max-width:100% !important; object-fit:contain !important; padding:7px; box-sizing:border-box; }
.af-order-product-card__image-placeholder { color:var(--af-order-light-blue); font-size:24px; }
.af-order-product-card__content { min-width:0; display:grid; gap:10px; }
.af-order-product-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; min-width:0; }
.af-order-product-card__identity { min-width:0; }
.af-order-product-card__name { display:block; color:var(--af-order-graphite) !important; font-size:14px; line-height:1.4; font-weight:800; text-decoration:none !important; }
.af-order-product-card__name:hover { color:var(--af-order-blue) !important; }
.af-order-product-card__sku { display:flex; align-items:center; gap:6px; margin-top:6px; color:var(--af-order-muted); font-size:11px; }
.af-order-product-card__sku strong { color:var(--af-order-gray); font-weight:800; }
.af-order-product-card__price-block { flex:0 0 auto; display:grid; justify-items:end; gap:2px; text-align:right; }
.af-order-product-card__old-price { color:var(--af-order-muted); font-size:11px; }
.af-order-product-card__price { color:var(--af-order-blue); font-size:16px; font-weight:900; white-space:nowrap; }
.af-order-product-card__unit { color:var(--af-order-muted); font-size:10px; }
.af-order-product-card__filters { display:flex; flex-wrap:wrap; gap:6px; }
.af-order-product-card__filter { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:999px; background:#f2f5f9; color:var(--af-order-gray); font-size:10px; font-weight:700; }
.af-order-product-card__footer { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding-top:10px; border-top:1px solid #edf0f4; }
.af-order-product-card__quantity { display:flex; align-items:center; gap:7px; color:var(--af-order-muted); font-size:12px; }
.af-order-product-card__quantity i { color:var(--af-order-light-blue); }
.af-order-product-card__quantity strong { color:var(--af-order-graphite); }
.af-order-product-card__total { display:grid; justify-items:end; gap:1px; color:var(--af-order-muted); font-size:10px; text-align:right; }
.af-order-product-card__total del { color:var(--af-order-muted); font-size:10px; }
.af-order-product-card__total strong { color:var(--af-order-blue); font-size:17px; font-weight:900; }
.af-order-products-empty { min-height:150px; display:grid; place-items:center; align-content:center; gap:10px; color:var(--af-order-muted); font-size:13px; text-align:center; }
.af-order-products-empty__icon { width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:#edf3fb; color:var(--af-order-blue); font-size:20px; }

/* Delivery / payment choice forms */
.af-order-form-section { margin-bottom:18px; }
.af-order-choice-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px !important; margin:0 !important; padding:0 !important; }
.af-order-choice-grid--delivery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.af-order-choice { position:relative !important; display:flex !important; align-items:center !important; gap:10px !important; min-height:48px !important; margin:0 !important; padding:10px 12px !important; border:1px solid #dfe5ee !important; border-radius:11px !important; background:#fff !important; color:var(--af-order-gray) !important; cursor:pointer !important; box-sizing:border-box !important; transition:.2s ease !important; }
.af-order-choice:hover { border-color:#bfcce0 !important; background:#f8faff !important; }
.af-order-choice input { position:absolute !important; opacity:0 !important; pointer-events:none !important; width:1px !important; height:1px !important; }
.af-order-choice__radio { position:relative !important; display:inline-block !important; flex:0 0 18px !important; width:18px !important; height:18px !important; margin:0 !important; padding:0 !important; border:2px solid #b7c3d4 !important; border-radius:50% !important; background:#fff !important; box-sizing:border-box !important; }
.af-order-choice__content { min-width:0; display:block; }
.af-order-choice__name { display:block; color:inherit; font-size:12px; line-height:1.35; font-weight:750; }
.af-order-choice:has(input:checked) { border-color:var(--af-order-blue-2) !important; background:#f1f5fb !important; box-shadow:0 0 0 2px rgba(71,99,154,.06) !important; color:var(--af-order-blue) !important; }
.af-order-choice:has(input:checked) .af-order-choice__radio { border-color:var(--af-order-blue) !important; }
.af-order-choice:has(input:checked) .af-order-choice__radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--af-order-blue); }
.af-order-choice--compact { min-height:42px !important; }

.af-order-delivery-form__data { margin-top:14px; }
.af-order-toggle-row { position:relative; display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; margin:0 0 12px; color:var(--af-order-gray); cursor:pointer; font-size:12px; font-weight:700; }
.af-order-toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.af-order-toggle-row__check { width:18px; height:18px; flex:0 0 18px; margin:0 !important; border:1.5px solid #b7c3d4 !important; border-radius:5px !important; background:#fff !important; box-sizing:border-box; }
.af-order-toggle-row:has(input:checked) .af-order-toggle-row__check { border-color:var(--af-order-blue) !important; background:var(--af-order-blue) !important; box-shadow:inset 0 0 0 3px #fff; }
.af-order-delivery-form__subchoices { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.af-order-delivery-form__subchoices .af-order-choice { flex:0 1 230px; }
.af-order-field { width:100% !important; min-height:44px !important; margin:0 0 10px !important; padding:10px 12px !important; border:1px solid #dce3ec !important; border-radius:10px !important; background:#fff !important; color:var(--af-order-graphite) !important; box-shadow:none !important; outline:none !important; font-size:12px !important; box-sizing:border-box !important; }
.af-order-field:focus { border-color:var(--af-order-blue-2) !important; box-shadow:0 0 0 3px rgba(71,99,154,.09) !important; }
.af-order-field--textarea { min-height:76px !important; resize:vertical; }
.af-order-delivery-form__dynamic { position:static !important; width:100%; margin-top:10px; }
.af-order-delivery-form__dynamic select,
.af-order-delivery-form__dynamic input[type="text"],
.af-order-delivery-form__dynamic input[type="search"] { max-width:100% !important; min-height:42px; border-radius:9px !important; border:1px solid #dce3ec !important; }
.af-order-custom-delivery-form { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px !important; margin:0 !important; padding:0 !important; }
.af-order-custom-delivery-form .af-order-field { margin:0 !important; }

.af-order-payment-extra { margin-top:12px; display:grid; gap:10px; }
.af-order-payment-extra__requisites { width:100% !important; min-height:110px; padding:10px 12px !important; border:1px solid #dce3ec !important; border-radius:10px !important; background:#f8fafc !important; color:var(--af-order-gray) !important; font-size:12px !important; box-sizing:border-box !important; }
.af-order-payment-extra__copy { width:max-content !important; min-height:38px !important; display:inline-flex !important; align-items:center !important; gap:7px !important; margin:0 !important; padding:8px 12px !important; border:0 !important; border-radius:9px !important; background:var(--af-order-blue) !important; color:#fff !important; font-size:11px !important; font-weight:800 !important; }
.af-order-payment-extra__policy { margin:0 !important; padding:0 !important; }
.af-order-payment-extra__policy a { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 11px; border-radius:9px; background:#f3f6fa; color:var(--af-order-blue-2) !important; text-decoration:none !important; font-size:11px; font-weight:750; }
.af-order-payment-extra__policy a:hover { background:#eaf0f8; color:var(--af-order-blue) !important; }

@media (max-width: 991px) {
    .af-order-choice-grid--delivery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767px) {
    .af-order-detail-card,
    .af-order-status-history,
    .af-order-form-section { padding:14px; border-radius:12px; }
    .af-order-detail-card__body { padding-left:0; }
    .af-order-status-history__content { display:grid; justify-content:stretch; gap:6px; }
    .af-order-status-history__status { justify-content:flex-start; }
    .af-order-product-card { grid-template-columns:82px minmax(0,1fr) !important; gap:11px !important; padding:12px !important; }
    .af-order-product-card__image-link,
    .af-order-product-card__image-placeholder { width:82px; height:82px; }
    .af-order-product-card__top { display:grid; gap:8px; }
    .af-order-product-card__price-block { justify-items:start; text-align:left; }
    .af-order-product-card__footer { align-items:center; }
    .af-order-choice-grid,
    .af-order-choice-grid--delivery { grid-template-columns:1fr; }
    .af-order-custom-delivery-form { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
    .af-order-product-card { grid-template-columns:1fr !important; }
    .af-order-product-card__media { display:flex; justify-content:center; }
    .af-order-product-card__image-link,
    .af-order-product-card__image-placeholder { width:110px; height:100px; }
    .af-order-product-card__footer { align-items:flex-end; }
    .af-order-product-card__total strong { font-size:15px; }
}
