* {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: #ffffff;
        color: #102f55;
        font-size: 14px;
    }

    /* =====================================================
       MAIN PAGE
    ===================================================== */

    .checkout-page {
        width: 100%;
        min-height: 100vh;
        padding: 18px 150px 40px;
        background: #fff;
    }

    .checkout-layout {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 430px;
        gap: 16px;
        align-items: start;
    }

    .main-content {
        width: 100%;
        min-width: 0;
    }

    .summary-column {
        width: 100%;
    }

    /* =====================================================
       COMMON CARD
    ===================================================== */

    .card {
        width: 100%;
        background: #fff;
        border: 1px solid #cbd7e6;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 24px;
    }

    .card-title {
        height: 68px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d9e0e8;
        color: #0b2d55;
        font-size: 18px;
        font-weight: 700;
    }

    .card-body {
        padding: 26px 24px;
    }

    /* =====================================================
       BILLING INFORMATION
    ===================================================== */

    .billing-content {
        min-height: 300px;
    }

    .billing-address {
        margin-top: 22px;
    }

    .address-title {
        margin-bottom: 12px;
        color: #163e70;
        font-size: 14px;
        font-weight: 600;
    }

    .address-text {
        color: #173f70;
        font-size: 14px;
        line-height: 24px;
    }

    .address-text strong {
        font-weight: 700;
    }

    /* =====================================================
       SHIPPING INFORMATION
    ===================================================== */

    .shipping-body {
        min-height: 250px;
        padding: 24px;
    }

    .shipping-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 15px;
        color: #244d80;
        font-size: 14px;
        font-weight: 700;
    }

    .edit-icon {
        border: 0;
        background: transparent;
        padding: 2px;
        color: #45617f;
        font-size: 18px;
        cursor: pointer;
        line-height: 1;
    }

    .edit-icon:hover {
        color: #1475ed;
    }

    .shipping-address {
        color: #234b7d;
        font-size: 14px;
        line-height: 23px;
    }

    .shipping-address strong {
        font-weight: 700;
    }

    /* =====================================================
       SUMMARY
    ===================================================== */

    .summary-card {
        position: sticky;
        top: 20px;
        margin-bottom: 0;
        box-shadow: 0 8px 18px rgba(27, 54, 84, 0.08);
    }

    .summary-header {
        height: 68px;
        padding: 0 24px;
        border-bottom: 1px solid #d9e0e8;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .summary-title {
        color: #0b2d55;
        font-size: 18px;
        font-weight: 700;
    }

    .summary-items {
        color: #7c8da2;
        font-size: 13px;
    }

    .summary-body {
        padding: 24px;
    }

    .order-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .order-total span:first-child {
        color: #173f70;
        font-size: 16px;
        font-weight: 700;
    }

    .order-total span:last-child {
        color: #233f63;
        font-size: 16px;
        font-weight: 700;
    }

    .confirmation-text {
        margin-bottom: 20px;
        color: #74879d;
        font-size: 12px;
        line-height: 18px;
    }

    .confirmation-text a {
        color: #1475ed;
        text-decoration: none;
    }

    .place-order {
        width: 100%;
        height: 42px;
        border: 0;
        border-radius: 22px;
        background: #1475ed;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .place-order:hover {
        background: #0865d5;
    }

    .summary-divider {
        height: 1px;
        background: #e1e6ec;
        margin: 22px -24px 20px;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        font-size: 14px;
    }

    .summary-row .label {
        color: #6d7783;
    }

    .summary-row .value {
        color: #344a66;
    }

    .summary-row.total {
        margin-bottom: 22px;
    }

    .summary-row.total .label,
    .summary-row.total .value {
        color: #304b6d;
        font-weight: 700;
    }

    .info-message {
        min-height: 54px;
        padding: 12px 14px;
        border: 1px solid #58a6ff;
        background: #f4faff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #2365a8;
        font-size: 13px;
        line-height: 18px;
    }

    .info-circle {
        width: 18px;
        height: 18px;
        min-width: 18px;
        border: 1.5px solid #428fe8;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #428fe8;
        font-size: 11px;
        font-weight: 700;
    }

    /* =====================================================
       SHIPPING ADDRESS SELECT MODAL
    ===================================================== */

    .shipping-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(24, 34, 48, 0.68);
        align-items: center;
        justify-content: center;
        padding: 25px;
    }

    .shipping-modal-overlay.show {
        display: flex;
    }

    .shipping-modal {
        width: min(1180px, 100%);
        max-height: calc(100vh - 50px);
        background: #ffffff;
        border-radius: 12px;
        overflow-y: auto;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
        color: #102f55;
    }

    .shipping-modal-header {
        height: 72px;
        padding: 0 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shipping-modal-header h2 {
        margin: 0;
        color: #101f32;
        font-size: 18px;
        font-weight: 700;
    }

    .modal-close {
        width: 35px;
        height: 35px;
        border: 0;
        background: transparent;
        color: #506277;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close:hover {
        color: #111f31;
    }

    /* =====================================================
       SEARCH
    ===================================================== */

    .shipping-modal-search {
        height: 42px;
        margin: 0 22px 18px;
        border: 1px solid #8fa2b7;
        border-radius: 7px;
        display: flex;
        align-items: center;
        padding: 0 12px;
    }

    .shipping-modal-search:focus-within {
        border-color: #1475ed;
        box-shadow: 0 0 0 2px rgba(20, 117, 237, 0.1);
    }

    .search-icon {
        width: 18px;
        height: 18px;
        margin-right: 9px;
        position: relative;
        border: 2px solid #647991;
        border-radius: 50%;
        flex: 0 0 18px;
    }

    .search-icon::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 2px;
        background: #647991;
        right: -5px;
        bottom: -2px;
        transform: rotate(45deg);
        border-radius: 2px;
    }

    .shipping-modal-search input {
        width: 100%;
        height: 100%;
        border: 0;
        outline: none;
        color: #243b55;
        font-size: 15px;
        background: transparent;
    }

    .shipping-modal-search input::placeholder {
        color: #647991;
    }

    /* =====================================================
       TABS
    ===================================================== */

    .shipping-tabs {
        display: flex;
        gap: 5px;
        padding: 0 22px 18px;
    }

    .shipping-tab {
        border: 0;
        background: transparent;
        color: #425b76;
        padding: 9px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
    }

    .shipping-tab:hover {
        background: #f2f6fb;
    }

    .shipping-tab.active {
        background: #eaf3ff;
        color: #126de0;
    }

    /* =====================================================
       ADDRESS CARDS
    ===================================================== */

    .shipping-address-list {
        padding: 0 22px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .shipping-address-card {
        min-height: 122px;
        position: relative;
        padding: 20px 42px 18px 17px;
        border: 1px solid #d1dce8;
        border-radius: 9px;
        cursor: pointer;
        background: #fff;
        transition: border-color 0.2s ease,
                    background 0.2s ease;
    }

    .shipping-address-card:hover {
        border-color: #1475ed;
    }

    .shipping-address-card.selected {
        border: 2px solid #1475ed;
        background: #eef7ff;
    }

    .address-company {
        color: #12375f;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 11px;
    }

    .address-person {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #162f4e;
        font-size: 14px;
        margin-bottom: 3px;
    }

    .location-icon {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #667c94;
        font-size: 20px;
    }

    .address-details {
        padding-left: 25px;
        color: #172f4e;
        font-size: 13px;
        line-height: 18px;
    }

    .address-edit {
        position: absolute;
        right: 15px;
        top: 18px;
        border: 0;
        background: transparent;
        color: #50647c;
        font-size: 18px;
        cursor: pointer;
        padding: 3px;
    }

    .address-edit:hover {
        color: #1475ed;
    }

    /* =====================================================
       ADD ADDRESS BUTTON
    ===================================================== */

    .add-address {
        margin: 195px 22px 18px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #086ce5;
        font-size: 14px;
        cursor: pointer;
    }

    .add-address:hover {
        color: #0058c5;
    }

    .add-address span {
        font-size: 23px;
        vertical-align: -2px;
        margin-right: 7px;
    }

    /* =====================================================
       SELECT MODAL FOOTER
    ===================================================== */

    .shipping-modal-footer {
        margin: 0 22px;
        padding: 12px 15px;
        border-top: 1px solid #d8e0e9;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pagination-info {
        color: #294665;
        font-size: 13px;
    }

    .pagination {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #294665;
        font-size: 13px;
    }

    .pagination select {
        height: 38px;
        min-width: 62px;
        padding: 0 10px;
        border: 1px solid #c4d0dd;
        border-radius: 20px;
        background: #fff;
        color: #243b55;
        outline: none;
    }

    .pagination button {
        width: 38px;
        height: 38px;
        border: 1px solid #c4d0dd;
        background: #fff;
        color: #60758b;
        font-size: 22px;
        cursor: pointer;
    }

    .pagination button:first-of-type {
        border-radius: 20px 0 0 20px;
    }

    .pagination button:last-of-type {
        border-radius: 0 20px 20px 0;
    }

    .pagination button:hover {
        background: #f3f7fb;
    }

    .page-number {
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #c4d0dd;
        border-bottom: 1px solid #c4d0dd;
    }

    .modal-actions {
        padding: 20px 22px 22px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    .modal-cancel,
    .modal-save {
        height: 42px;
        min-width: 86px;
        padding: 0 20px;
        border-radius: 22px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .modal-cancel {
        background: #fff;
        border: 1px solid #9eacbc;
        color: #1c324e;
    }

    .modal-cancel:hover {
        background: #f5f7fa;
    }

    .modal-save {
        border: 0;
        background: #b1dcff;
        color: #fff;
        cursor: not-allowed;
    }

    .modal-save.active {
        background: #1475ed;
        cursor: pointer;
    }

    .modal-save.active:hover {
        background: #0865d5;
    }

    .no-address {
        display: none;
        grid-column: 1 / -1;
        text-align: center;
        padding: 35px;
        color: #718399;
        font-size: 14px;
    }


    /* =====================================================
       ADD / EDIT ADDRESS FORM MODAL
    ===================================================== */

    .address-form-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(25, 35, 48, 0.70);
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    .address-form-overlay.active  {
        display: flex;
    }

    .address-form-modal {
        width: min(1280px, 100%);
        max-height: calc(100vh - 20px);
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.30);
        color: #102f55;
        display: flex;
        flex-direction: column;
    }
    #billingAddressForm {
        display: flex;
        flex-direction: column;

        flex: 1 1 auto;

        min-height: 0;
        min-width: 0;

        overflow: hidden;
    }
    .address-form-header {
        height: 78px;
        min-height: 78px;
        padding: 0 24px;
        border-bottom: 1px solid #d5dee9;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .address-form-header h2 {
        margin: 0;
        color: #101f32;
        font-size: 18px;
        font-weight: 700;
    }

    .address-form-close {
        width: 38px;
        height: 38px;
        border: 0;
        background: transparent;
        color: #536276;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
    }

    .address-form-close:hover {
        color: #101f32;
    }

    .address-form-scroll {
        overflow-y: auto;
        padding: 0 24px;
    }

    .address-form-section {
        padding: 6px 0 18px;
    }

    .address-form-section + .address-form-section {
        border-top: 1px solid #d5dee9;
        padding-top: 18px;
    }

    .address-form-section-title {
        margin: 0 0 18px;
        color: #0d2c50;
        font-size: 16px;
        font-weight: 700;
    }

    .address-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 17px 16px;
    }

    .address-form-field {
        width: 100%;
    }

    .address-form-field.full {
        grid-column: 1 / -1;
    }

    .address-form-field label {
        display: block;
        margin-bottom: 7px;
        color: #0e315a;
        font-size: 14px;
        font-weight: 400;
    }

    .address-form-field label .required {
        color: #e11919;
    }

    .address-form-field input,
    .address-form-field select {
        width: 100%;
        height: 44px;
        padding: 0 13px;
        border: 1px solid #8ea0b5;
        border-radius: 7px;
        outline: none;
        background: #fff;
        color: #172f4e;
        font-size: 15px;
        transition: border-color 0.2s ease,
                    box-shadow 0.2s ease;
    }

    .address-form-field input:focus,
    .address-form-field select:focus {
        border-color: #1475ed;
        box-shadow: 0 0 0 2px rgba(20, 117, 237, 0.10);
    }

    .address-form-field input.invalid,
    .address-form-field select.invalid {
        border-color: #ff3030;
    }

    .field-error {
        display: none;
        margin-top: 7px;
        color: #f02020;
        font-size: 13px;
    }

    .field-error.show {
        display: block;
    }

    /* Select arrow */

    .address-form-field.select-field {
        position: relative;
    }

    .address-form-field.select-field::after {
        content: "";
        position: absolute;
        right: 15px;
        bottom: 15px;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid #61738a;
        border-bottom: 1.5px solid #61738a;
        transform: rotate(45deg);
        pointer-events: none;
    }

    .address-form-field select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 40px;
        cursor: pointer;
    }

    /* =====================================================
       TOGGLES
    ===================================================== */

    .address-toggles {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 16px;
    }

    .toggle-row {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #172f4e;
        font-size: 14px;
    }

    .toggle-switch {
        width: 44px;
        height: 24px;
        position: relative;
        flex: 0 0 44px;
    }

    .toggle-switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background: #9ba9b9;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .toggle-slider::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        background: #fff;
        transition: 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }

    .toggle-switch input:checked + .toggle-slider {
        background: #1475ed;
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(20px);
    }

    /* =====================================================
       PHONE
    ===================================================== */

    .phone-input-wrap {
        display: flex;
        align-items: stretch;
    }

    .phone-prefix {
        width: 70px;
        min-width: 70px;
        height: 44px;
        border: 1px solid #8ea0b5;
        border-right: 0;
        border-radius: 7px 0 0 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #344b66;
        background: #f8fafc;
        font-size: 14px;
    }

    .phone-input-wrap input {
        border-radius: 0 7px 7px 0 !important;
    }

    /* =====================================================
       FORM FOOTER
    ===================================================== */

    .address-form-footer {
        min-height: 76px;
        padding: 15px 24px;
        border-top: 1px solid #d5dee9;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        background: #fff;
    }

    .address-form-cancel,
    .address-form-save {
        min-width: 88px;
        height: 44px;
        padding: 0 22px;
        border-radius: 23px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .address-form-cancel {
        background: #fff;
        color: #1d334d;
        border: 1px solid #8d9caf;
    }

    .address-form-cancel:hover {
        background: #f5f7fa;
    }

    /* .address-form-save {
        border: 0;
        background: #b4ddff;
        color: #fff;
    } */
    .address-form-save {
    border: 0;
    background: #1475ed;
    color: #fff;
}

    .address-form-save.active {
        background: #1475ed;
        cursor: pointer;
    }

    .address-form-save.active:hover {
        background: #0865d5;
    }


    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media (max-width: 1200px) {

        .checkout-page {
            padding-left: 40px;
            padding-right: 40px;
        }

        .checkout-layout {
            grid-template-columns: minmax(0, 1fr) 350px;
        }

        .card-title,
        .summary-header {
            height: 62px;
        }
    }

    @media (max-width: 900px) {

        .checkout-page {
            padding-left: 20px;
            padding-right: 20px;
        }

        .checkout-layout {
            grid-template-columns: minmax(0, 1fr) 310px;
            gap: 14px;
        }

        .shipping-address-list {
            grid-template-columns: 1fr;
        }

        .add-address {
            margin-top: 35px;
        }

        .address-form-grid {
            grid-template-columns: 1fr;
        }

        .address-form-field.full {
            grid-column: auto;
        }
    }

    @media (max-width: 700px) {

        .checkout-page {
            padding: 12px;
        }

        .checkout-layout {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .main-content,
        .summary-column {
            width: 100%;
        }

        .summary-column {
            order: -1;
            margin-bottom: 20px;
        }

        .summary-card {
            position: static;
        }

        .card {
            margin-bottom: 16px;
            border-radius: 9px;
        }

        .card-title,
        .summary-header {
            height: 56px;
            padding: 0 18px;
        }

        .card-title,
        .summary-title {
            font-size: 16px;
        }

        .card-body,
        .shipping-body,
        .summary-body {
            padding: 18px;
        }

        .billing-content {
            min-height: auto;
        }

        .shipping-body {
            min-height: auto;
        }

        .summary-divider {
            margin-left: -18px;
            margin-right: -18px;
        }

        /* Select modal */

        .shipping-modal-overlay {
            padding: 10px;
        }

        .shipping-modal {
            max-height: calc(100vh - 20px);
            border-radius: 10px;
        }

        .shipping-modal-header {
            height: 60px;
            padding: 0 16px;
        }

        .shipping-modal-search {
            margin-left: 16px;
            margin-right: 16px;
        }

        .shipping-tabs {
            padding-left: 16px;
            padding-right: 16px;
        }

        .shipping-address-list {
            padding-left: 16px;
            padding-right: 16px;
            grid-template-columns: 1fr;
        }

        .add-address {
            margin-left: 16px;
            margin-right: 16px;
            margin-top: 30px;
        }

        .shipping-modal-footer {
            margin-left: 16px;
            margin-right: 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }

        .pagination {
            width: 100%;
            justify-content: space-between;
        }

        .modal-actions {
            padding: 16px;
        }

        /* Add address form */

        .address-form-overlay {
            padding: 0;
        }

        .address-form-modal {
            width: 100%;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
        }

        .address-form-header {
            height: 62px;
            min-height: 62px;
            padding: 0 16px;
        }

        .address-form-scroll {
            padding: 0 16px;
        }

        .address-form-footer {
            padding: 12px 16px;
        }
    }

    @media (max-width: 480px) {

        .checkout-page {
            padding: 8px;
        }

        .form-input {
            height: 42px;
            font-size: 14px;
        }

        .summary-row {
            font-size: 13px;
        }

        .confirmation-text {
            font-size: 11px;
        }

        .place-order {
            height: 44px;
        }

        .shipping-modal-header h2 {
            font-size: 16px;
        }

        .shipping-tab {
            padding: 8px 13px;
            font-size: 13px;
        }

        .shipping-address-card {
            padding: 16px 38px 16px 14px;
        }

        .address-company {
            font-size: 14px;
        }

        .address-details {
            font-size: 12px;
        }

        .pagination span:first-child {
            font-size: 12px;
        }

        .address-form-header h2 {
            font-size: 16px;
        }
    }