/* ========================================================
           TECH HYBR — PAYMENT PAGE
           BLACK + GOLD THEME
        ========================================================= */


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

        .payment-page {
            width: 100%;
            min-height: 100vh;
            padding: 70px 20px 90px;
            background:
                linear-gradient(
                    135deg,
                    #f8f5ed 0%,
                    #ffffff 50%,
                    #f6f0df 100%
                );
        }


        /* ========================================================
           CONTAINER
        ========================================================= */

        .payment-container {
            width: 100%;
            max-width: 850px;
            margin: 0 auto;
        }


        /* ========================================================
           PAGE HEADER
        ======================================================== */

        .payment-header {
            text-align: center;
            margin-bottom: 35px;
        }


        .payment-label {
            display: inline-block;
            margin-bottom: 12px;

            font-size: 11px;
            font-weight: 700;

            letter-spacing: 3px;
            text-transform: uppercase;

            color: #b8860b;
        }


        .payment-header h1 {
            margin: 0 0 12px;

            font-size: 42px;
            line-height: 1.2;

            font-weight: 800;

            color: #090909;
        }


        .payment-header h1 span {
            color: #c9962e;
        }


        .payment-header p {
            max-width: 650px;
            margin: 0 auto;

            font-size: 15px;
            line-height: 1.7;

            color: #666666;
        }


        /* ========================================================
           MESSAGE BOX
        ======================================================== */

        .payment-message {
            width: 100%;
            padding: 25px;

            border-radius: 12px;

            margin-bottom: 25px;

            text-align: center;
        }


        /* ========================================================
           LOADING
        ======================================================== */

        .payment-loading {
            background: #ffffff;

            border: 1px solid #e4e0d6;

            color: #555555;
        }


        .payment-spinner {
            width: 38px;
            height: 38px;

            margin: 0 auto 15px;

            border: 3px solid #e5e0d2;
            border-top-color: #c9962e;

            border-radius: 50%;

            animation: paymentSpin 0.8s linear infinite;
        }


        @keyframes paymentSpin {

            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }

        }


        /* ========================================================
           ERROR
        ======================================================== */

        .payment-error {
            display: none;

            background: #fff5f5;

            border: 1px solid #efb8b8;

            color: #a00000;

            text-align: left;
        }


        .payment-error strong {
            display: block;

            margin-bottom: 8px;

            font-size: 17px;

            color: #8f0000;
        }


        .payment-error p {
            margin: 0 0 18px;

            line-height: 1.6;
        }


        .payment-retry-btn {
            border: 1px solid #111111;

            background: #111111;
            color: #ffffff;

            padding: 10px 18px;

            border-radius: 7px;

            font-weight: 700;

            cursor: pointer;
        }


        .payment-retry-btn:hover {
            background: #c9962e;
            border-color: #c9962e;
            color: #ffffff;
        }


        /* ========================================================
           CONTENT
        ======================================================== */

        #paymentContent {
            display: none;
        }


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

        .payment-card {
            width: 100%;

            background: #ffffff;

            border: 1px solid #e3ded1;

            border-radius: 14px;

            padding: 30px;

            margin-bottom: 25px;

            box-shadow:
                0 12px 35px rgba(0, 0, 0, 0.07);
        }


        /* ========================================================
           CARD HEADER
        ======================================================== */

        .payment-card-header {
            display: flex;

            align-items: flex-start;
            justify-content: space-between;

            gap: 20px;

            padding-bottom: 22px;

            margin-bottom: 22px;

            border-bottom: 1px solid #e8e4da;
        }


        .payment-card-label {
            display: block;

            margin-bottom: 7px;

            font-size: 10px;
            font-weight: 800;

            letter-spacing: 2px;
            text-transform: uppercase;

            color: #b8860b;
        }


        .payment-card-header h2 {
            margin: 0;

            font-size: 28px;
            line-height: 1.25;

            color: #090909;
        }


        /* ========================================================
           STATUS BADGE
        ======================================================== */

        .payment-status-badge {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            min-height: 32px;

            padding: 7px 14px;

            border-radius: 50px;

            background: #fff8e6;

            border: 1px solid #d9b45a;

            color: #9a6c00;

            font-size: 12px;
            font-weight: 800;

            white-space: nowrap;
        }


        /* ========================================================
           DETAILS
        ======================================================== */

        .payment-details {
            display: grid;

            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 0 25px;
        }


        .payment-detail-item {
            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 15px;

            min-height: 58px;

            padding: 13px 0;

            border-bottom: 1px solid #eeeae1;
        }


        .payment-detail-item span {
            color: #777777;

            font-size: 13px;
        }


        .payment-detail-item strong {
            color: #111111;

            font-size: 14px;

            text-align: right;

            word-break: break-word;
        }


        /* ========================================================
           AMOUNT BOX
        ======================================================== */

        .payment-amount-box {
            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 20px;

            margin-top: 25px;

            padding: 22px 24px;

            border-radius: 11px;

            background:
                linear-gradient(
                    135deg,
                    #111111,
                    #1b1b1b
                );

            border-left: 4px solid #c9962e;
        }


        .payment-amount-box span {
            display: block;

            margin-bottom: 5px;

            color: #ffffff;

            font-size: 15px;
            font-weight: 700;
        }


        .payment-amount-box small {
            display: block;

            color: #cfcfcf;

            font-size: 12px;
        }


        .payment-amount-box strong {
            color: #d8a83c;

            font-size: 30px;
            font-weight: 800;

            white-space: nowrap;
        }


        /* ========================================================
           FORM HEADER
        ======================================================== */

        .payment-form-header {
            margin-bottom: 25px;
        }


        .payment-form-header h2 {
            margin: 0 0 8px;

            font-size: 25px;

            color: #111111;
        }


        .payment-form-header p {
            margin: 0;

            color: #777777;

            font-size: 14px;

            line-height: 1.6;
        }


        /* ========================================================
           FORM GROUP
        ======================================================== */

        .payment-form-group {
            margin-bottom: 24px;
        }


        .payment-form-group label {
            display: block;

            margin-bottom: 9px;

            color: #222222;

            font-size: 13px;
            font-weight: 700;
        }


        .payment-form-group label span {
            color: #c00000;
        }


        .payment-form-group small {
            display: block;

            margin-top: 7px;

            color: #777777;

            font-size: 12px;

            line-height: 1.5;
        }


        /* ========================================================
           INPUT
        ======================================================== */

        .payment-input {
            width: 100%;

            min-height: 48px;

            padding: 12px 14px;

            border: 1px solid #d4d0c7;

            border-radius: 8px;

            background: #ffffff;

            color: #111111;

            font-family: inherit;

            font-size: 14px;

            outline: none;

            box-sizing: border-box;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }


        .payment-input:focus {
            border-color: #c9962e;

            box-shadow:
                0 0 0 3px
                rgba(201, 150, 46, 0.13);
        }


        /* ========================================================
           FILE INPUT
        ======================================================== */

        .payment-file-input {
            padding: 9px;

            cursor: pointer;

            background: #faf9f6;
        }


        .payment-file-input::file-selector-button {
            margin-right: 12px;

            padding: 9px 13px;

            border: 1px solid #c9962e;

            border-radius: 6px;

            background: #111111;

            color: #ffffff;

            font-size: 12px;
            font-weight: 700;

            cursor: pointer;
        }


        .payment-file-input::file-selector-button:hover {
            background: #c9962e;
            color: #111111;
        }


        /* ========================================================
           SCREENSHOT PREVIEW
        ======================================================== */

        .screenshot-preview {
            display: none;

            margin-top: 18px;

            padding: 15px;

            border: 1px solid #e2ddd2;

            border-radius: 10px;

            background: #faf9f6;

            text-align: center;
        }


        .screenshot-preview img {
            display: block;

            width: auto;
            max-width: 100%;

            max-height: 350px;

            margin: 0 auto;

            border-radius: 7px;

            border: 1px solid #d9d4ca;
        }


        /* ========================================================
           SUBMIT BUTTON
        ======================================================== */

        .payment-submit-btn {
            width: 100%;

            min-height: 52px;

            padding: 13px 20px;

            border: 1px solid #c9962e;

            border-radius: 8px;

            background:
                linear-gradient(
                    135deg,
                    #c9962e,
                    #e0b24f
                );

            color: #111111;

            font-family: inherit;

            font-size: 15px;
            font-weight: 800;

            cursor: pointer;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                opacity 0.2s ease;
        }


        .payment-submit-btn:hover {
            transform: translateY(-1px);

            box-shadow:
                0 8px 20px
                rgba(0, 0, 0, 0.15);
        }


        .payment-submit-btn:disabled {
            opacity: 0.6;

            cursor: not-allowed;

            transform: none;

            box-shadow: none;
        }


        /* ========================================================
           NOTE
        ======================================================== */

        .payment-note {
            margin-top: 22px;

            padding: 15px 16px;

            border-left: 3px solid #c9962e;

            border-radius: 7px;

            background: #faf8f2;

            color: #666666;

            font-size: 12px;

            line-height: 1.6;
        }


        .payment-note strong {
            display: block;

            margin-bottom: 5px;

            color: #222222;

            font-size: 13px;
        }


        .payment-note p {
            margin: 0;
        }


        /* ========================================================
           SUCCESS MESSAGE
        ======================================================== */

        .payment-success {
            display: none;

            padding: 35px 25px;

            border-radius: 14px;

            background: #ffffff;

            border: 1px solid #d7c89e;

            box-shadow:
                0 12px 35px rgba(0, 0, 0, 0.07);

            text-align: center;
        }


        .payment-success-icon {
            width: 60px;
            height: 60px;

            display: flex;

            align-items: center;
            justify-content: center;

            margin: 0 auto 18px;

            border-radius: 50%;

            background: #111111;

            color: #d8a83c;

            font-size: 28px;
            font-weight: 800;
        }


        .payment-success h2 {
            margin: 0 0 10px;

            color: #111111;

            font-size: 26px;
        }


        .payment-success p {
            margin: 0 auto 22px;

            max-width: 550px;

            color: #666666;

            line-height: 1.6;
        }


        .payment-success-id {
            display: inline-block;

            padding: 10px 15px;

            border-radius: 7px;

            background: #f7f3e8;

            color: #111111;

            font-size: 13px;
            font-weight: 700;
        }


        /* ========================================================
           MOBILE
        ======================================================== */

        @media (max-width: 700px) {

            .payment-page {
                padding: 45px 14px 70px;
            }


            .payment-header h1 {
                font-size: 32px;
            }


            .payment-card {
                padding: 22px 18px;
            }


            .payment-card-header {
                flex-direction: column;
            }


            .payment-status-badge {
                align-self: flex-start;
            }


            .payment-details {
                grid-template-columns: 1fr;
            }


            .payment-detail-item {
                min-height: 52px;
            }


            .payment-amount-box {
                flex-direction: column;

                align-items: flex-start;
            }


            .payment-amount-box strong {
                font-size: 27px;
            }

        }


        @media (max-width: 450px) {

            .payment-header h1 {
                font-size: 28px;
            }


            .payment-header p {
                font-size: 14px;
            }


            .payment-card-header h2 {
                font-size: 23px;
            }


            .payment-amount-box {
                padding: 18px;
            }


            .payment-amount-box strong {
                font-size: 25px;
            }

        }