/* Modal Wrapper */
.az-qb-modal {
    position: fixed; left: 0; top: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.az-qb-overlay {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1; /* Overlay ở dưới */
    pointer-events: auto; /* Cho phép click */
}

/* Dialog Box */
.az-qb-dialog {
    position: relative; background: #fff; border-radius: 8px;
    max-width: 900px; width: 95%; 
    z-index: 10; /* Dialog ở trên overlay */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    pointer-events: auto; /* Cho phép click vào dialog */
}

/* Chế độ 1 cột (khi tắt form) */
.az-qb-single-column-mode {
    max-width: 450px;
}
.az-qb-single-column-mode .az-qb-right {
    display: none;
}
.az-qb-single-column-mode .az-qb-left {
    flex: 1 1 100%; border-right: 0;
    overflow-y: auto; max-height: 90vh;
    border-radius: 8px;
}
.az-qb-dialog:not(.az-qb-single-column-mode) .az-qb-right {
    display: block;
}

/* Close Button */
.az-qb-close {
    position: absolute; right: 8px; top: 8px; border: 0;
    background: transparent; cursor: pointer; z-index: 10;
    padding: 8px; line-height: 1; color: #777; border-radius: 50%;
}
.az-qb-close:hover { color: #000; background-color: #f0f0f0; }
.az-qb-close svg { display: block; }

/* Inner Layout (Chế độ 2 cột mặc định) */
.az-qb-inner {
    display: flex;
    flex-wrap: wrap;
    max-height: 90vh;
    position: relative; /* Để có context cho absolute positioning */
}

/* Cột trái */
.az-qb-left {
    flex: 1 1 45%; background: #f9f9f9; padding: 20px;
    box-sizing: border-box; overflow-y: auto;
    border-right: 1px solid #eee;
    border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
.az-qb-product-image-wrapper { text-align: center; margin-bottom: 12px; }
.az-qb-image { max-width: 100%; max-height: 200px; height: auto; border-radius: 6px; border: 1px solid #eee; object-fit: contain; }
.az-qb-product-info { }

/* Main Title */
.az-qb-main-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}
.az-qb-main-title .az-qb-title {
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    display: inline;
}

/* Product Name & Price */
.az-qb-product-name-price {
    margin-bottom: 12px;
}

/* Cột phải */
.az-qb-right {
    flex: 1 1 55%; 
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90vh;
}
.az-qb-form-title { 
    font-size: 17px; 
    font-weight: 700; 
    margin-top: 0; 
    margin-bottom: 16px; 
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 8px;
    color: #333;
    letter-spacing: -0.3px;
}

.az-qb-title { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 600; color: #333; }
.az-qb-price { margin: 0; font-size: 17px; color: #d54e21; font-weight: 600; }

/* Thuộc tính SP (Labels) */
.az-qb-attributes .az-qb-attr { margin-bottom: 15px; }
.az-qb-attributes .az-qb-attr label.az-qb-attr-label {
    display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px;
}
.az-qb-attr-options { display: flex; flex-wrap: wrap; gap: 8px; }
.az-qb-attr-option { display: inline-block; cursor: pointer; }
.az-qb-attr-option input[type="radio"] { opacity: 0; position: fixed; width: 0; }
.az-qb-attr-option span {
    display: inline-block; padding: 6px 12px; border: 1px solid #ccc;
    border-radius: 4px; font-size: 14px; background-color: #fff;
    transition: all 0.2s ease-in-out;
}
.az-qb-attr-option input[type="radio"]:checked + span {
    border-color: #2b8aef; background-color: #eaf4ff; color: #2b8aef;
    font-weight: 600; box-shadow: 0 0 0 1px #2b8aef;
}
.az-qb-attr-option:hover span { border-color: #aaa; }

/* Số lượng */
.az-qb-quantity { margin-top: 14px; margin-bottom: 12px; }
.az-qb-quantity label { 
    display: block;
    font-weight: 600; 
    margin-bottom: 8px; 
    font-size: 14px; 
    color: #333;
}
.az-qb-quantity-controls {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
}
.az-qb-qty-btn {
    width: 36px !important;
    height: 36px !important;
    margin: 0;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    user-select: none;
}
.az-qb-qty-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}
.az-qb-qty-btn:active {
    background: #e0e0e0;
}
.az-qb-qty-minus {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 0;
}
.az-qb-qty-plus {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 0;
}
.az-qb-quantity input.az-qb-qty { 
    width: 60px !important; 
    height: 45px !important;
    text-align: center; 
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-weight: 600;
    background: #fff;
}
.az-qb-instruction-text {
    margin: 14px 0 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    font-style: italic;
    padding: 10px;
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: 3px;
}

/* Form group */
.az-qb-form-group { margin-bottom: 12px; position: relative; }
.az-qb-form .az-qb-input {
    width: 100%; padding: 0 12px; box-sizing: border-box;
    border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
    height: 42px; line-height: 1.5; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    transition: border-color 0.2s ease;
}
.az-qb-input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.2);
}
.az-qb-input::placeholder {
    color: #999;
    font-size: 13px;
}
select.az-qb-input {
    line-height: 1.5; padding: 0 12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
    padding-right: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
textarea.az-qb-input, 
textarea.az-qb-textarea {
    height: auto; 
    min-height: 70px; 
    line-height: 1.5; 
    padding: 10px 12px;
    resize: vertical;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

/* Radio Anh/Chị - Gender Selection */
.az-qb-gender-group {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}
.az-qb-radio-inline {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.az-qb-radio-inline input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    cursor: pointer;
    accent-color: #4CAF50;
}
.az-qb-radio-inline span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* Form Row - 2 cột */
.az-qb-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}
.az-qb-col-6 {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
}

/* Tỉnh/Xã trên 1 hàng (Desktop) */
.az-qb-address-row { display: flex; gap: 10px; margin-bottom: 12px; }
.az-qb-address-row .az-qb-form-group { flex: 1; margin-bottom: 0; }

/* Nút Submit - NẰM TRONG MODAL (không phải fixed) */
.az-qb-actions { 
    margin-top: 16px;
    padding: 12px 0 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}
.az-qb-add {
    background: #ff9800; color: #fff; border: 0; width: 100%;
    padding: 5px 18px; border-radius: 5px; cursor: pointer;
    font-size: 15px; font-weight: 700; text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.az-qb-add:hover { 
    background: #f57c00; 
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.35);
}
.az-qb-add:disabled { background: #ccc !important; color: #666 !important; cursor: not-allowed; opacity: 0.7; transform: none;}

/* Nút Trigger - Mua hàng nhanh */
.az-qb-button {
    background: #dc2626; 
    color: #fff; 
    border: 2px solid #dc2626; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 16px; 
    font-weight: 700;
    width: auto;
    max-width: max-content;
    min-height: auto;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 0 0;
}
.az-qb-button:hover { 
    background: #b91c1c; 
    border-color: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}
.az-qb-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.az-qb-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Thông báo */
.az-qb-result { margin-top: 15px; font-size: 14px; text-align: center; }
.az-qb-field-error, .az-qb-error { color: #b00020; font-weight: 600; }
.az-qb-success { color: #006400; font-weight: 600; }

/* Responsive */
@media (max-width: 768px) {
    .az-qb-dialog {
        width: 95vw; max-width: 95vw;
        height: 90vh; max-height: 90vh;
        overflow-y: auto;
    }
    .az-qb-inner {
        flex-direction: column;
        max-height: none; height: auto;
    }
    .az-qb-left, 
    .az-qb-right {
        flex: 1 1 auto; border-right: 0;
        overflow-y: visible; max-height: none;
    }
    .az-qb-left {
        border-bottom: 1px solid #eee;
        border-top-right-radius: 8px; border-bottom-left-radius: 0;
    }
    .az-qb-right {
        border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
    }
    
    /* Form row 2 cột → 1 cột trên mobile */
    .az-qb-form-row { 
        flex-direction: column; 
        gap: 0; 
    }
    .az-qb-col-6 {
        width: 100%;
    }
    
    .az-qb-address-row {
        flex-direction: column; gap: 0; margin-bottom: 0;
    }
    .az-qb-address-row .az-qb-form-group {
        margin-bottom: 12px;
    }
    .az-qb-single-column-mode .az-qb-left {
        border-radius: 8px; border-bottom: 0;
    }
    
    /* Mobile adjustments for new layout */
    .az-qb-main-title {
        font-size: 16px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    .az-qb-product-image-wrapper {
        margin-bottom: 10px;
    }
    .az-qb-image {
        max-height: 150px;
    }
    .az-qb-product-name-price {
        margin-bottom: 10px;
    }
    .az-qb-title {
        font-size: 15px;
    }
    .az-qb-price {
        font-size: 16px;
    }
    .az-qb-quantity {
        margin-top: 12px;
        margin-bottom: 10px;
    }
    .az-qb-instruction-text {
        margin-top: 12px;
        font-size: 12px;
        padding: 8px;
    }
    .az-qb-left,
    .az-qb-right {
        padding: 16px;
    }
    
    /* Mobile: Nút Mua hàng nhanh */
    .az-qb-button {
        font-size: 15px;
        padding: 12px 20px;
        min-height: 46px;
        margin: 8px 0 0 0;
    }
}

/* ===========================
   PRO FEATURES STYLES
   =========================== */

/* Coupon Field */
.az-qb-coupon-wrapper {
    background: #fffbea;
    border: 1px dashed #f59e0b;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 12px;
}
.az-qb-coupon-input-group {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.az-qb-coupon-input {
    flex: 1;
    min-width: 0;
    background: #fff !important;
    height: 38px !important;
    font-size: 13px !important;
}
.az-qb-apply-coupon {
    padding: 0 16px;
    background: #10b981;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    height: 38px;
}
.az-qb-apply-coupon:hover {
    background: #059669;
}
.az-qb-apply-coupon:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}
.az-qb-coupon-notice {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    display: none;
    padding: 6px 10px;
    border-radius: 4px;
}
.az-qb-coupon-notice.success {
    color: #065f46;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    display: block;
}
.az-qb-coupon-notice.error {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    display: block;
}

/* Shipping Info */
.az-qb-shipping-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 12px;
}
.az-qb-shipping-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.az-qb-shipping-fee {
    color: #0369a1;
    font-weight: 700;
}

/* Payment Methods */
.az-qb-payment-methods {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}
.az-qb-payment-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.az-qb-payment-option {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
}
.az-qb-payment-option:hover {
    border-color: #2b8aef;
    background: #f0f7ff;
}
.az-qb-payment-option input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin-bottom: 0;
}
button.az-qb-apply-coupon {
    margin: 0;
}
input.az-qb-input.az-qb-coupon-input {
    margin-bottom: 0;
}
.az-qb-payment-option input[type="radio"]:checked + span,
.az-qb-payment-option:has(input:checked) {
    border-color: #2b8aef;
    background: #e6f3ff;
}
.az-qb-payment-option span {
    font-size: 13px;
    font-weight: 500;
}

/* Order Total */
.az-qb-order-total {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #333;
}
.az-qb-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.az-qb-total-row span {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.az-qb-total-amount {
    font-size: 18px;
    font-weight: 700;
    color: #d54e21;
}

/* Success Screen */
.az-qb-success-screen {
    position: fixed; /* QUAN TRỌNG: Fixed để hiển thị toàn màn hình */
    top: 50%; /* Center vertical */
    left: 50%; /* Center horizontal */
    transform: translate(-50%, -50%); /* Center chính xác */
    width: 90%; /* Chiếm 90% màn hình */
    max-width: 520px; /* Tối đa 520px (nhỏ hơn) */
    max-height: 92vh; /* Tối đa 92% viewport height */
    background: #fff;
    z-index: 999999; /* Z-index cực cao để đè lên mọi thứ */
    display: none; /* Ẩn mặc định */
    flex-direction: column; /* Column layout */
    align-items: center;
    justify-content: flex-start; /* Align từ trên xuống */
    overflow-y: auto; /* Cho phép scroll nếu nội dung dài */
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px; /* Bo góc */
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); /* Shadow đậm */
}
.az-qb-success-content {
    text-align: center;
    max-width: 100%;
    width: 100%;
}
.az-qb-success-icon {
    margin-bottom: 12px;
    animation: az-qb-success-bounce 0.6s ease;
}
@keyframes az-qb-success-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.az-qb-success-title {
    font-size: 22px;
    font-weight: 700;
    color: #10b981;
    margin: 0 0 16px;
}
.az-qb-success-info {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 14px;
    text-align: left;
}
.az-qb-success-info p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.5;
}
.az-qb-order-number,
.az-qb-order-total-display {
    color: #2563eb;
    font-weight: 700;
    font-size: 15px;
}
.az-qb-payment-method-display {
    font-size: 13px;
    color: #6b7280;
}

/* QR Code */
.az-qb-qr-code {
    background: #fef3c7;
    border: 1px dashed #f59e0b;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 14px;
}
.az-qb-qr-code h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #92400e;
    font-weight: 600;
}
.az-qb-qr-image {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px;
}
.az-qb-qr-image img {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
}
.az-qb-qr-note {
    font-size: 12px;
    color: #78350f;
    margin: 8px 0 0;
    line-height: 1.4;
}

/* Success Actions */
.az-qb-success-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.az-qb-btn-close-success,
.az-qb-success-actions .az-qb-btn-continue-shopping {
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}
.az-qb-success-actions .az-qb-btn-close-success {
    background: #6b7280;
    color: #fff;
    border: 0;
}
.az-qb-btn-close-success:hover {
    background: #4b5563;
}
.az-qb-btn-continue-shopping {
    background: #10b981;
    color: #fff;
    border: 0;
}
.az-qb-btn-continue-shopping:hover {
    background: #059669;
    color: #fff;
}

/* Responsive for Pro Features */
@media (max-width: 768px) {
    .az-qb-success-screen {
        padding: 16px;
        max-width: 95%;
    }
    .az-qb-success-title {
        font-size: 20px;
    }
    .az-qb-success-info {
        padding: 12px;
    }
    .az-qb-success-info p {
        font-size: 13px;
    }
    .az-qb-qr-code {
        padding: 12px;
    }
    .az-qb-qr-code h3 {
        font-size: 14px;
    }
    .az-qb-qr-image {
        padding: 10px;
    }
    .az-qb-qr-image img {
        max-width: 200px;
    }
    .az-qb-total-amount {
        font-size: 18px;
    }
    .az-qb-success-actions {
        flex-direction: column;
        width: 100%;
    }
    .az-qb-btn-close-success,
    .az-qb-btn-continue-shopping {
        width: 100%;
        padding: 10px 16px;
        font-size: 13px;
    }
}