/* =========================================================
   SECTION-3100
   PAYMENT METHODS PAGE CSS LOADER
========================================================= */

@import url("/assets/css/global-loader.css");

@import url("./design.css?v=20260904");
@import url("/core/payment-system/assets/payment-component.css?v=20260906-1");

/* =========================================================
   SECTION-3101
   PAYMENT PROOF / CROPPER UI OVERRIDES
   Purpose:
   - Keep cropper area inside the available viewport
   - Start crop area around 80%
   - Make crop handles clearly visible
   - Allow original-image submission without cropping
========================================================= */

/* Prevent the cropper area from creating an unnecessary
   oversized page section on desktop or mobile. */
#cropperContainer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
    padding: clamp(10px, 2vw, 18px);
    border-radius: 16px;
}

/* The image area gets a viewport-aware height.
   100dvh is used where supported so mobile browser bars
   are handled more accurately. */
#cropperContainer .cropper-wrapper {
    position: relative;
    width: 100%;
    height: min(33dvh, 302px);
    min-height: 165px;
    max-height: calc(100dvh - 365px);
    overflow: hidden;
    border-radius: 12px;
    box-sizing: border-box;
}

/* Cropper.js must be allowed to fill the controlled wrapper. */
#cropperContainer .cropper-wrapper .cropper-container,
#cropperContainer .cropper-wrapper .cropper-canvas,
#cropperContainer .cropper-wrapper .cropper-drag-box,
#cropperContainer .cropper-wrapper .cropper-crop-box {
    max-width: 100%;
}

#cropperContainer #cropperImage {
    display: block;
    max-width: 100%;
}

/* Keep the cropper visually clean and prevent accidental
   horizontal overflow. */
#cropperContainer .cropper-container {
    width: 100% !important;
    height: 100% !important;
}

/* Clearly visible crop box lines. */
#cropperContainer .cropper-line {
    opacity: 1 !important;
    background-color: #D4AF37 !important;
}

/* Clearly visible resize handles.
   Larger hit area is intentional for easier use on mobile
   and for users with weaker eyesight. */
#cropperContainer .cropper-point {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    background-color: #D4AF37 !important;
    border: 2px solid #0A2E2A !important;
    border-radius: 50%;
    box-sizing: border-box;
}

/* Slightly stronger corner handles. */
#cropperContainer .point-se {
    width: 20px !important;
    height: 20px !important;
}

#cropperContainer .point-sw,
#cropperContainer .point-nw,
#cropperContainer .point-ne {
    width: 18px !important;
    height: 18px !important;
}

/* Cropper instruction. */
#cropperContainer .cropper-help-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px auto 0;
    max-width: 760px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}

/* Keep action buttons visible and easy to tap. */
#cropperContainer .cropper-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

#cropperContainer .cropper-actions button {
    min-height: 46px;
    min-width: 170px;
    cursor: pointer;
    touch-action: manipulation;
}

/* Submit button becomes visually highlighted immediately
   after an image is selected, even before cropping. */
#submitPaymentProofBtn.is-ready {
    opacity: 1 !important;
    cursor: pointer !important;
    transform: translateY(0);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.22);
}

#submitPaymentProofBtn:disabled {
    cursor: not-allowed;
}

/* The ready state is intentionally stronger on touch
   devices so the user can immediately understand that
   cropping is not required. */
@media (hover: none) and (pointer: coarse) {
    #submitPaymentProofBtn.is-ready {
        min-height: 52px;
    }
}

/* =========================================================
   SECTION-3102
   MOBILE FIT
========================================================= */

@media (max-width: 767px) {

    #cropperContainer {
        padding: 8px;
        border-radius: 12px;
    }

    #cropperContainer .cropper-wrapper {
        height: min(34dvh, 260px);
        min-height: 155px;
        max-height: calc(100dvh - 390px);
        border-radius: 10px;
    }

    #cropperContainer .cropper-point {
        width: 18px !important;
        height: 18px !important;
        border-width: 2px !important;
    }

    #cropperContainer .point-se,
    #cropperContainer .point-sw,
    #cropperContainer .point-nw,
    #cropperContainer .point-ne {
        width: 20px !important;
        height: 20px !important;
    }

    #cropperContainer .cropper-help-text {
        font-size: 0.78rem;
        padding: 7px 8px;
    }

    #cropperContainer .cropper-actions {
        gap: 8px;
    }

    #cropperContainer .cropper-actions button {
        width: 100%;
        min-width: 0;
    }
}

/* Very short screens: reduce the cropper area rather than
   forcing the user to hunt for page scrolling. */
@media (max-height: 700px) {

    #cropperContainer .cropper-wrapper {
        height: calc(100dvh - 390px);
        min-height: 145px;
    }
}

/* =========================================================
   SECTION-3102-END
========================================================= */

/* =========================================================
   SECTION-3103
   FIT-SCREEN SCALE
   Target: approximately the same visual footprint as a
   67% browser zoom screenshot, while keeping browser zoom
   at 100%. Cropper functionality remains unchanged.
========================================================= */
#cropperContainer {
    transform: none;
}

/* =========================================================
   SECTION-3104
   COMPACT PAYMENT-PROOF LAYOUT
   Desktop: cropper + controls side-by-side.
   Mobile: normal stacked flow.
========================================================= */
@media (min-width: 901px) {
    #cropperContainer .cropper-layout,
    #cropperContainer .cropper-content,
    #cropperContainer .upload-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
        gap: 22px;
        align-items: center;
    }

    #cropperContainer .cropper-wrapper {
        margin: 0;
    }

    #cropperContainer .cropper-actions,
    #cropperContainer .upload-actions,
    #cropperContainer .payment-proof-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    #cropperContainer .cropper-actions button,
    #cropperContainer .upload-actions button,
    #cropperContainer .payment-proof-actions button {
        width: 100%;
    }
}

@media (max-width: 900px) {
    #cropperContainer .cropper-layout,
    #cropperContainer .cropper-content,
    #cropperContainer .upload-layout {
        display: block;
    }
}


/* =========================================================
   SECTION-3110
   SIGNUP FEE SELECTOR
========================================================= */
.signup-fee-section{padding:30px 0 18px;background:#f8f7f2}.signup-fee-header{max-width:860px;margin:0 auto 22px;text-align:center}.signup-fee-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;border:1px solid rgba(212,175,55,.55);border-radius:999px;color:#b48a24;background:rgba(212,175,55,.08);font-size:12px;font-weight:800;letter-spacing:1.2px}.signup-fee-header h2{margin:12px 0 8px;color:#063c3a;font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,3.2vw,42px);line-height:1.15;animation:ukmbFeeHeadingGlow 3.2s ease-in-out infinite}.signup-fee-header h2 span{color:#c69b3a}.signup-fee-divider{width:76px;height:3px;margin:12px auto;border-radius:99px;background:#c69b3a}.signup-fee-subtitle{max-width:720px;margin:0 auto;color:#5f6666;font-size:15px;line-height:1.6}.signup-fee-selector-card{width:min(760px,calc(100% - 28px));margin:0 auto;padding:clamp(18px,3vw,28px);border:1px solid rgba(198,155,58,.28);border-radius:22px;background:#0b716b;box-shadow:0 18px 45px rgba(6,60,58,.12)}.signup-fee-label{display:block;margin-bottom:10px;color:#f3d58a;font-size:14px;font-weight:800}.signup-fee-select-wrap{position:relative}.signup-fee-select{width:100%;min-height:58px;padding:0 52px 0 18px;appearance:none;border:2px solid #d4af37;border-radius:18px;background:#0f786f;color:#fff;font-size:16px;font-weight:700;outline:none;cursor:pointer}.signup-fee-select:focus{box-shadow:0 0 0 4px rgba(212,175,55,.16)}.signup-fee-select option{color:#073f3b;background:#fff}.signup-fee-select-icon{position:absolute;top:50%;right:20px;transform:translateY(-50%);color:#d4af37;pointer-events:none}.signup-fee-display{display:none;margin-top:16px;padding:2px;border:2px solid #d4af37;border-radius:20px;background:#0f786f;overflow:hidden}.signup-fee-display.is-visible{display:block}.signup-fee-display-inner{padding:22px 18px 20px;text-align:center}.signup-fee-display-label{color:rgba(255,255,255,.72);font-size:12px;font-weight:900;letter-spacing:1.5px}.signup-fee-amount{margin:4px 0 3px;color:#f0c85d;font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,6vw,58px);font-weight:700;line-height:1}.signup-fee-category-name{color:rgba(255,255,255,.84);font-size:15px;font-weight:600}.signup-fee-display.is-changing .signup-fee-amount{animation:ukmbFeeAmountPop .42s ease-out}.signup-fee-note{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;color:rgba(255,255,255,.72);font-size:12px;text-align:center}.signup-fee-note i{color:#d4af37}@keyframes ukmbFeeHeadingGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(198,155,58,0))}50%{filter:drop-shadow(0 0 9px rgba(198,155,58,.32))}}@keyframes ukmbFeeAmountPop{0%{opacity:.45;transform:translateY(6px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:600px){.signup-fee-section{padding-top:22px}.signup-fee-selector-card{width:min(100% - 20px,760px);padding:16px;border-radius:18px}.signup-fee-select{min-height:54px;font-size:14px}.signup-fee-note{align-items:flex-start;line-height:1.45}}



/* =========================================================
   SECTION-3120
   PAYMENT PROOF WINDOW — IDEAL REFERENCE FINISH
   IMPORTANT: Signup Fee / Previous Layout is untouched.
========================================================= */

/* Main cropper window: ideal centered landscape viewport */
#cropperContainer {
    width: min(560px, 100%) !important;
    max-width: 560px !important;
    height: 448px !important;
    max-height: 448px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #080808 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Keep Cropper.js viewport fitted inside the ideal window */
#cropperContainer .cropper-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

#cropperContainer .cropper-wrapper .cropper-container,
#cropperContainer .cropper-container {
    width: 100% !important;
    height: 100% !important;
}

/* Clean, thin gold crop border */
#cropperContainer .cropper-view-box {
    outline: 2px solid #d4af37 !important;
    outline-offset: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#cropperContainer .cropper-line {
    background-color: #d4af37 !important;
    opacity: .95 !important;
}

/* Small square handles — like the Ideal reference */
#cropperContainer .cropper-point {
    width: 8px !important;
    height: 8px !important;
    background-color: #d4af37 !important;
    border: 1px solid #173a3b !important;
    border-radius: 1px !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

#cropperContainer .cropper-point.point-ne,
#cropperContainer .cropper-point.point-nw,
#cropperContainer .cropper-point.point-se,
#cropperContainer .cropper-point.point-sw {
    width: 9px !important;
    height: 9px !important;
}

/* Instruction stays below the cropper */
#cropperContainer .cropper-help-text {
    margin: 12px auto 0 !important;
}

/* ---------------------------------------------------------
   First row: Crop / Original — equal 50/50
--------------------------------------------------------- */

#cropperContainer .cropper-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 12px !important;
}

#cropperContainer .cropper-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   Second row: Choose / Remove / Submit — equal 3 columns
--------------------------------------------------------- */

#cropperContainer .upload-actions,
#cropperContainer .payment-proof-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

#cropperContainer .upload-actions button,
#cropperContainer .payment-proof-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* If buttons use the known IDs, keep the same balanced dimensions. */
#cropBtn,
#cancelCropBtn,
#chooseImageBtn,
#removeImageBtn,
#submitPaymentProofBtn {
    box-sizing: border-box !important;
}

/* Submit remains immediately usable after image selection. */
#submitPaymentProofBtn.is-ready {
    opacity: 1 !important;
    cursor: pointer !important;
}

/* ---------------------------------------------------------
   Desktop card: give the cropper area the Ideal breathing room
--------------------------------------------------------- */
@media (min-width: 901px) {
    #cropperContainer {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #cropperContainer .cropper-layout,
    #cropperContainer .cropper-content,
    #cropperContainer .upload-layout {
        display: block !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 900px) {
    #cropperContainer {
        width: min(560px, 100%) !important;
        height: 420px !important;
    }

    #cropperContainer .cropper-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #cropperContainer .upload-actions,
    #cropperContainer .payment-proof-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ---------------------------------------------------------
   Mobile: preserve the same concept, scale safely
--------------------------------------------------------- */
@media (max-width: 767px) {
    #cropperContainer {
        width: 100% !important;
        max-width: 100% !important;
        height: min(72vw, 360px) !important;
        min-height: 260px !important;
        max-height: 360px !important;
    }

    #cropperContainer .cropper-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #cropperContainer .cropper-actions button {
        min-height: 42px !important;
        height: 42px !important;
        padding: 7px 6px !important;
        font-size: 12px !important;
    }

    #cropperContainer .upload-actions,
    #cropperContainer .payment-proof-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #cropperContainer .upload-actions button,
    #cropperContainer .payment-proof-actions button {
        min-height: 42px !important;
        height: 42px !important;
        padding: 7px 5px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   SECTION-3120-END
========================================================= */

/* VIP launch fee display */
.vip-fee-original{text-decoration:line-through;opacity:.62;font-size:.72em;margin-right:6px}


/* =========================================================
   SECTION-3130
   REQUIRED PAYMENT METHODS LAYOUT
   Premium, compact and mobile-first:
   Fee Category + Preferred Payment Method together,
   then only the selected method is displayed.
========================================================= */

.payment-choice-layout {
    width: min(980px, calc(100% - 28px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.payment-choice-layout .signup-fee-selector-card,
.payment-method-selector-card {
    width: 100%;
    min-height: 150px;
    margin: 0;
    padding: 22px;
    border: 1px solid rgba(198, 155, 58, .34);
    border-radius: 20px;
    background: linear-gradient(145deg, #0a5954 0%, #0d6d66 100%);
    box-shadow: 0 18px 42px rgba(6, 60, 58, .12);
    box-sizing: border-box;
}

.payment-choice-layout .signup-fee-display {
    margin-top: 14px;
}

.membership-context-hidden {
    display: none !important;
}

.membership-payment-choice-layout {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

.payment-proof-shortcut-section {
    padding: 28px 0 18px;
    background: #f8f7f2;
}

.payment-proof-shortcut-section .upload-shortcut-wrapper {
    display: flex;
    justify-content: center;
}

.payment-proof-shortcut-section .premium-upload-btn {
    min-width: 220px;
}

.payment-method-details-section {
    padding: 18px 0 42px;
    background: #f8f7f2;
}

.selected-payment-method-intro {
    max-width: 720px;
    margin: 0 auto 18px;
    text-align: center;
}

.selected-payment-method-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 15px;
    border: 1px solid rgba(212, 175, 55, .48);
    border-radius: 999px;
    color: #b48a24;
    background: rgba(212, 175, 55, .08);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.selected-payment-method-intro h2 {
    margin: 10px 0 7px;
    color: #063c3a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15;
}

.selected-payment-method-intro h2 span {
    color: #c69b3a;
}

.selected-payment-method-intro p {
    margin: 0;
    color: #69706f;
    font-size: 14px;
    line-height: 1.55;
}

/* The gallery is intentionally removed from the visual flow.
   The existing centralized cards remain the data/UI source,
   but only the selected card is allowed to appear. */
.payment-method-details-section .payment-grid {
    width: min(760px, 100%);
    margin: 0 auto;
    display: block !important;
}

.payment-method-details-section .payment-card {
    display: none !important;
}

.payment-method-details-section .payment-card.selected-payment-method {
    display: block !important;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(198, 155, 58, .42);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(6, 60, 58, .12);
    animation: ukmbSelectedPaymentReveal .32s ease both;
}

.payment-method-details-section .payment-card.selected-payment-method .card-header {
    min-height: auto;
    padding: 20px 20px 16px;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #0b5b56, #0d7168);
}

.payment-method-details-section .payment-card.selected-payment-method .card-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,.96);
}

.payment-method-details-section .payment-card.selected-payment-method .card-header h3 {
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
}

.payment-method-details-section .payment-card.selected-payment-method .qr-section {
    padding: 24px 20px 18px;
    background: #fbfaf6;
}

.payment-method-details-section .payment-card.selected-payment-method .qr-code {
    width: min(270px, 72vw);
    height: min(270px, 72vw);
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.11);
}

.payment-method-details-section .payment-card.selected-payment-method .qr-label {
    display: inline-block;
    margin-top: 4px;
    color: #69706f;
    font-size: 10px;
}

.payment-method-details-section .payment-card.selected-payment-method .payment-details {
    max-height: none !important;
    padding: 10px 24px 18px !important;
    background: #fff;
}

.payment-method-details-section .payment-card.selected-payment-method .detail-row {
    padding: 12px 0;
}

.payment-method-details-section .payment-card.selected-payment-method .detail-label {
    color: #71807d;
    font-size: 12px;
}

.payment-method-details-section .payment-card.selected-payment-method .detail-value {
    color: #123f3b;
    font-size: 13px;
}

.payment-method-details-section .payment-card.selected-payment-method .toggle-btn {
    display: none;
}

.payment-method-details-section:not(.is-method-selected) .ukmb-payment-component {
    display: none;
}

@keyframes ukmbSelectedPaymentReveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .payment-choice-layout {
        width: min(100% - 20px, 980px);
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .payment-choice-layout .signup-fee-selector-card,
    .payment-method-selector-card {
        min-height: 0;
        padding: 17px;
        border-radius: 18px;
    }

    .payment-proof-shortcut-section {
        padding: 20px 0 12px;
    }

    .payment-proof-shortcut-section .premium-upload-btn {
        width: min(100%, 280px);
    }

    .payment-method-details-section {
        padding: 14px 0 30px;
    }

    .selected-payment-method-intro {
        padding: 0 14px;
        margin-bottom: 14px;
    }

    .selected-payment-method-intro p {
        font-size: 13px;
    }

    .payment-method-details-section .payment-card.selected-payment-method {
        border-radius: 16px;
    }

    .payment-method-details-section .payment-card.selected-payment-method .card-header {
        padding: 16px 14px;
    }

    .payment-method-details-section .payment-card.selected-payment-method .payment-details {
        padding: 8px 16px 14px !important;
    }
}


/* Required screenshot composition: heading first, selectors beneath. */
.signup-fee-layout {
    width: min(980px, 100%);
    display: block;
}

.signup-fee-layout .signup-fee-header {
    max-width: 760px;
    margin: 0 auto 22px;
    text-align: center;
}

.signup-fee-layout .signup-fee-divider {
    margin: 12px auto;
}

.signup-fee-layout .signup-fee-subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}

/* No empty payment area before a method is selected. */
.payment-method-details-section:not(.is-method-selected) {
    display: none;
}


/* =========================================================
   SECTION-3110
   QR ENLARGE MODAL — 80% SCREEN FIT
   Purpose:
   - QR click must always open the enlarge view.
   - Modal uses approximately 80% of the available viewport,
     never a full 100% screen takeover.
   - QR image remains fully visible and scan-friendly.
========================================================= */
.payment-method-details-section .payment-card.selected-payment-method .qr-section {
    cursor: zoom-in;
    touch-action: manipulation;
}

.payment-method-details-section .payment-card.selected-payment-method .qr-section:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .72);
    outline-offset: 4px;
}

#qrModalOverlay.qr-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 42px) !important;
    box-sizing: border-box;
    background: rgba(4, 26, 24, .78) !important;
    overflow: auto;
}

#qrModalOverlay.qr-modal-overlay.active {
    display: flex !important;
}

#qrModalOverlay .qr-modal-content {
    position: relative;
    width: min(80vw, 760px) !important;
    max-width: 80vw !important;
    max-height: 80vh !important;
    margin: auto !important;
    padding: clamp(20px, 3vw, 32px) !important;
    box-sizing: border-box;
    overflow: auto !important;
    border-radius: clamp(18px, 2vw, 28px) !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34) !important;
}

#qrModalOverlay .qr-modal-title {
    margin: 0 48px 18px 0 !important;
    color: #123f3b !important;
    font-size: clamp(22px, 3vw, 34px) !important;
    line-height: 1.2 !important;
}

#qrModalOverlay .qr-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    z-index: 2;
}

#qrModalOverlay .qr-modal-image {
    width: 100% !important;
    max-height: calc(80vh - 130px) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#qrModalOverlay .qr-modal-image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(72vw, 620px) !important;
    max-height: calc(80vh - 150px) !important;
    object-fit: contain !important;
}

@media (max-width: 767px) {
    #qrModalOverlay.qr-modal-overlay {
        padding: 12px !important;
    }

    #qrModalOverlay .qr-modal-content {
        width: 80vw !important;
        max-width: 80vw !important;
        max-height: 80vh !important;
        padding: 18px 16px !important;
        border-radius: 20px !important;
    }

    #qrModalOverlay .qr-modal-title {
        margin-right: 40px !important;
        margin-bottom: 14px !important;
        font-size: clamp(19px, 6vw, 27px) !important;
    }

    #qrModalOverlay .qr-modal-image img {
        max-width: 72vw !important;
        max-height: calc(80vh - 120px) !important;
    }
}