/**
 * Memora Booking Stylesheet
 * Thiết kế chuẩn pixel theo phong cách Memora Film
 */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Quicksand:wght@500;600;700&display=swap');

:root {
    --memora-brown: #733e1c;
    --memora-brown-dark: #5a2d13;
    --memora-brown-card: #8d5738;
    --memora-brown-text: #3d2314;
    --memora-blue-light: #cbe3f3;
    --memora-blue-border: #b9d5e8;
    --memora-blue-bg: #eaf3fa;
    --memora-pink-heart: #dfb0bf;
    --memora-pink-heart-hover: #d39cae;
    --memora-yellow-badge: #ffe566;
    --memora-cream: #fdfaf7;
    --memora-font-serif: 'Playfair Display', Georgia, serif;
    --memora-font-script: 'Dancing Script', cursive;
    --memora-font-sans: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Khung hiển thị cố định chiều rộng (Fixed width theo yêu cầu không cần responsive) */
.memora-booking-container {

    max-width: 100%;
    font-family: var(--memora-font-sans);
    color: var(--memora-brown-text);
    box-sizing: border-box;
    line-height: 1.5;
}

.memora-booking-container *,
.memora-booking-container *::before,
.memora-booking-container *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   1. SHORTCODE [choose_date]
   ========================================================================== */
.memora-choose-date-wrap {
    /* background: #ffffff; */
    /* border: 1.5px solid var(--memora-blue-border); */
    /* padding: 18px; */
    text-align: center;
    font-size: 2px;
}

.memora-step-title {
    font-family: var(--memora-font-serif);
    font-size: 5em;
    font-weight: 700;
    color: var(--memora-brown);
    margin: 0 0 0.2em 0;
}

.memora-step-subtitle {
    font-size: 3.25em;
    color: #888;
    margin: 0 0 1.077em 0;
    font-style: italic;
}

.memora-date-inputs {
    display: flex;
    justify-content: center;
    gap: 15em;
}

.memora-date-input {
    background-color: #fff9f3;
    border: 0.0625em solid #733e1c !important;
    border-radius: 2000px !important;
    color: #764525 !important;
    outline: 0 !important;
    font-size: 12em;
    padding: 0.417em 0.833em !important;
}

.memora-date-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.memora-date-field label {
    font-size: 3em;
    font-weight: 600;
    color: var(--memora-brown);
    margin-bottom: 0.333em;
}

.memora-date-select {
    width: 100%;
    height: 2.8em;
    background: var(--memora-cream);
    border: 1.5px solid var(--memora-brown);
    border-radius: 1.667em;
    padding: 0 0.667em;
    font-family: var(--memora-font-sans);
    font-size: 3.75em;
    font-weight: 700;
    color: var(--memora-brown);
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* .memora-date-select:focus {
    border-color: var(--memora-blue-border);
    box-shadow: 0 0 0 3px rgba(203, 227, 243, 0.5);
} */

/* ==========================================================================
   2. SHORTCODE [choose_time]
   ========================================================================== */
.memora-choose-time-wrap {
    font-size: 2px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.memora-time-slots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7.5em;
    margin-top: 3em;
    max-height: 139.25em;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1em;
    padding-right: 8px;
    width: 100%;
    box-sizing: border-box;
    direction: ltr;
    /* margin-right: -8px; */
    /* margin-left: 0px; */
}

/* Firefox */
@supports (-moz-appearance: none) {
    .memora-time-slots-grid {
        scrollbar-color: #693d21;
        scrollbar-width: thin;
    }
}

/* Custom scrollbar – Webkit (Chrome, Safari, Edge) */
.memora-time-slots-grid::-webkit-scrollbar {
    width: 10px;
    background-color: rgb(186 214 236 / 50%);
}

.memora-time-slots-grid::-webkit-scrollbar-button,
.memora-time-slots-grid::-webkit-scrollbar-button:start,
.memora-time-slots-grid::-webkit-scrollbar-button:end {
    display: none;
    width: 0;
    height: 0;
}

.memora-time-slots-grid::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgb(186 214 236 / 50%);
}

.memora-time-slots-grid::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #693d2180;
}

.memora-time-slot-btn {
    background: #bad6ed;
    border: 3px solid var(--memora-brown);
    border-radius: 0.3em;
    padding: 0.115em 0;
    font-family: 'Mulish';
    font-size: 12em;
    text-wrap: wrap;
    text-align: center;
    font-weight: 400;
    color: var(--memora-brown) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 1;
}

.memora-time-slot-btn:hover:not(:disabled) {
    background: var(--memora-blue-light);
    border-color: var(--memora-blue-border);
    transform: translateY(-1px);
}

.memora-time-slot-btn.is-selected {
    background: var(--memora-brown) !important;
    color: #ffffff !important;
    border-color: var(--memora-brown-dark) !important;
    box-shadow: 0 3px 8px rgba(115, 62, 28, 0.3);
}

.memora-time-slot-btn:disabled,
.memora-time-slot-btn.is-booked {
    background: #dfb0bf !important;
    color: var(--memora-brown) !important;
    text-decoration: none !important;
    cursor: not-allowed;
    opacity: 1;
}

.memora-time-slot-btn:disabled:hover,
.memora-time-slot-btn.is-booked:hover {
    background: #dfb0bf !important;
    transform: none !important;
}

.memora-time-slot-btn.memora-slot-see-tomorrow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.2em;
    font-family: 'COCOMAT PRO';
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: -0.01em;
    cursor: pointer;
    border-radius: 7.2px;
}

.memora-time-slot-btn.memora-slot-see-tomorrow span {
    display: block;
    line-height: 1.2;
    pointer-events: none;
}

.memora-time-slot-btn.memora-slot-see-tomorrow:hover {
    background: var(--memora-blue-light);
    border-color: var(--memora-brown-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(115, 62, 28, 0.2);
}

.memora-time-slot-btn.memora-slot-see-tomorrow:active {
    transform: scale(0.96);
}

/* ==========================================================================
   3. SHORTCODE [choose_photography_package]
   ========================================================================== */
.memora-choose-pkg-wrap {
    text-align: center;
    font-size: 2px;
}

.memora-pkg-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15em;
}

.memora-pkg-card {
    background: #733e1ca3;
    border: 0.0625em solid #b1d2ed;
    border-radius: 4.167em;
    padding: 0.25em 0.375em;
    display: flex;
    justify-content: center;
    color: #FFF;
    font-weight: 700;
    font-size: 12em;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Noto sans";
}

.memora-pkg-card:hover {
    background: var(--memora-blue-bg);
    border-color: var(--memora-blue-border);
}

.memora-pkg-card.is-selected {
    background: var(--memora-blue-light) !important;
    border-color: var(--memora-brown) !important;
    box-shadow: 0 3px 10px rgba(115, 62, 28, 0.15);
}

/* .memora-pkg-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--memora-brown);
}

.memora-pkg-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--memora-brown);
} */

/* ==========================================================================
   4. SHORTCODE [confirm_booking] (Khớp 100% Ảnh 1)
   ========================================================================== */
.memora-confirm-wrapper {
    font-size: 2px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}

.memora-confirm-card {
    background: #eaf2f8;
    border: 1em solid rgb(124 166 201 / 37%);
    border-radius: 9.5em;
    padding: 6em 10em;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(185, 213, 232, 0.25);
}

.memora-star-decor {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a2c7e2;
    font-size: 40em;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    background: transparent;
    border: none;
    box-shadow: none;
}

.memora-star-decor svg {
    display: block;
    width: 28px;
    height: 28px;
}

.memora-confirm-title {
    font-family: 'Fraunces';
    font-size: 11.5em;
    font-weight: 500;
    color: #733e1c;
    margin: 4px 0 2px 0;
    line-height: 1.25;
}

.memora-confirm-subtitle {
    font-family: 'Mulish';
    font-size: 8em;
    color: #8f6952;
    font-weight: 400;
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-style: italic;
}

.memora-confirm-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11em;
    margin: 0;
}

.memora-pill-item {
    background: #fffaf4;
    border: 2.5px solid #5c3520;
    border-radius: 9999px;
    padding: 0.6em 0;
    font-family: 'Noto sans';
    font-size: 11em;
    font-weight: 700;
    color: #5c3520;
    text-align: center;
    /* height: 68px; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    line-height: 1;
    /* letter-spacing: 0.5px; */
    box-shadow: none;
}

.memora-pill-item--center {
    flex: 1.5;
    border-color: #5c3520;
    box-shadow: none;
}

.memora-confirm-action {
    margin-top: 17em;
    text-align: center;
}

.memora-btn-brown {
    background: #754229;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 0.6em 1em 0.3em;
    font-family: 'The Silver Editorial';
    font-size: 10.9em;
    font-weight: 500;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(92, 53, 32, 0.2);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1.3;
    text-transform: uppercase;
    width: 127px;
    height: 50px;
}

.memora-btn-confirm-pay {
    font-family: 'Boston Angel';
    width: 189.3333333px;
    font-weight: 600;
}

.memora-btn-brown:hover {
    background: #472614;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(92, 53, 32, 0.3);
    color: #ffffff;
}

.memora-btn-brown:active {
    transform: translateY(0);
}

/* Fallback nếu nút nằm bên trong card */
.memora-confirm-card>.memora-btn-confirm-pay {
    margin-top: 26px;
}



/* ==========================================================================
   5. SHORTCODE [checkout_booking] (Khớp 100% Ảnh 2)
   ========================================================================== */
.memora-checkout-wrap {
    text-align: center;
    font-size: 2px;
    width: 445.333333333333px;
    margin: 0 auto;
}

.memora-checkout-title {
    font-family: "The Silver Editorial";
    font-size: 18.8em;
    font-weight: 500;
    color: var(--memora-brown-text);
    margin: 90px 0 0px 0;
}

.memora-checkout-subtitle {
    font-size: 10.15em;
    color: var(--memora-brown-text);
    margin: 0 auto 46px auto;
    font-family: 'Cocomat Pro';
    width: fit-content;
}

.memora-input-group {
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid var(--memora-brown);
    margin-bottom: 0;
    padding: 9px 0;
    font-family: 'Cocomat Pro';
}

.memora-input-icon {
    /* font-size: 20px; */
    margin-right: 33.33333333333px;
    color: var(--memora-brown);
    /* width: 24px; */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memora-input-icon svg {
    width: 20em;
    height: 20em;
    padding: 2em;
    display: block;
    flex-shrink: 0;
}

.memora-input-text {
    flex: 1;
    border: none;
    background: transparent;
    border: 0 !important;
    outline: none !important;
    font-family: 'Cocomat Pro';
    font-size: 7.3em !important;
    color: var(--memora-brown-text);
    padding: 0 !important;
    font-weight: 500;
    margin-bottom: 6px;
}

.memora-input-text::placeholder {
    color: #733e1c80;

}

.memora-checkout-pills {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    /* margin: 26px 0; */
    font-family: "Noto Sans";
    margin: 41.666666667px 0 40.8em;
}

.memora-blue-pill {
    background: var(--memora-blue-light);
    border-radius: 200px;
    padding: 0 0.55em;
    align-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 123%;
    color: #733e1c;
    width: 100%;
    text-align: center;
    height: 43.33333333px;
}

.memora-pill-time {
    flex: 68.3;
}

.memora-pill-date {
    flex: 99.9;
}

.memora-pill-pkg {
    flex: 92.7;
}

.memora-pricing-table {
    /* margin: 24px 0; */
    display: flex;
    flex-direction: column;
    gap: 15em;
    font-family: 'Mulish';
}

.memora-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 14px; */
}

.memora-pricing-label {
    color: #733e1c;
    font-weight: 500;
    text-align: left;
    font-size: 11em;
    width: 8em !important;
    display: inline-block;
}

.memora-pricing-value {
    color: #733e1c;
    font-weight: 700;
    text-align: right;
    font-size: 12em;
}

.memora-disclaimer {
    font-size: 6.5em;
    color: #733e1c;
    line-height: 1.5;
    margin: 4.7em 0 4.025em;
    display: inline-flex !important;
    align-items: flex-start;
    text-align: center;
    gap: 6px;
    font-weight: 900;
    font-family: 'Cocomat Pro';
    width: fit-content;
    justify-content: center;
}

.memora-disclaimer-icon {
    padding-top: 1px;
}

.memora-disclaimer-icon svg {
    width: 1.1em;
    height: 1.1em;
    color: #555555;
    margin-top: 0.2em;
}

.memora-disclaimer-icon+span {
    width: fit-content !important;
    display: flex;
}

/* ==========================================================================
   WC Payment Section inside [checkout_booking]
   ========================================================================== */
.memora-wc-payment-section {
    font-size: 14px !important;
    text-align: left;
    margin: 25px 0 15px;
    background: #fdfbf7;
    border: 1px solid #ebd9cb;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 6px rgba(115, 62, 28, 0.04);
}

.memora-wc-payment-section #payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.memora-wc-payment-section ul.payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.memora-wc-payment-section li.wc_payment_method {
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.memora-wc-payment-section li.wc_payment_method input[type="radio"] {
    accent-color: var(--memora-brown, #733e1c);
    margin-right: 8px !important;
    cursor: pointer;
    vertical-align: middle;
}

.memora-wc-payment-section li.wc_payment_method label {
    font-weight: 600 !important;
    color: var(--memora-brown, #733e1c) !important;
    cursor: pointer;
    vertical-align: middle;
    font-size: 14px !important;
}

.memora-wc-payment-section .payment_box {
    background: #f5ebe1 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin: 8px 0 0 24px !important;
    font-size: 13px !important;
    color: #5a3e30 !important;
    border-left: 3px solid var(--memora-brown, #733e1c) !important;
}

.memora-wc-payment-section .payment_box p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.memora-wc-payment-section li.wc_payment_method>input:checked~.payment_box,
.memora-wc-payment-section li.wc_payment_method:only-child .payment_box {
    display: block !important;
}

/* An nut dat hang mac dinh cua WooCommerce vi da co nut Trai Tim cua Memora */
.memora-wc-payment-section .place-order button#place_order,
.memora-wc-payment-section .form-row.place-order button[type="submit"] {
    display: none !important;
}

.memora-wc-payment-section .place-order {
    padding: 0 !important;
    margin: 0 !important;
}


/* NÚT THANH TOÁN HÌNH TRÁI TIM */
.memora-heart-button-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0 35px 0;
}

.memora-heart-btn {
    position: relative;
    font-size: inherit !important;
    width: 100%;
    height: auto;
    background: none !important;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pinyon Script';
}

.memora-heart-svg {
    position: relative;
    /* top: 0; */
    /* left: 0; */
    width: 230px;
    height: 100%;
    filter: drop-shadow(0 4px 10px rgba(223, 176, 191, 0.5));
}

.memora-heart-svg path {
    fill: var(--memora-pink-heart);
    transition: fill 0.2s ease;
}

.memora-heart-btn:hover .memora-heart-svg path {
    fill: var(--memora-pink-heart-hover);
}

.memora-heart-text {
    position: absolute;
    z-index: 2;
    font-family: "Pinyon Script";
    font-size: 19.2em;
    font-weight: 700;
    color: var(--memora-brown);
    line-height: 100%;
    text-align: center;
    margin-top: 9px;
}

/* ==========================================================================
   6. TRANG THANH TOÁN THÀNH CÔNG (Khớp 100% Ảnh 3)
   ========================================================================== */
.memora-thankyou-wrap {
    padding: 15px 0;
    text-align: center;
    font-size: 2px;
    width: 246em;
    margin: 0 auto;
}

.memora-thankyou-wrap .memora-header-content {
    width: 222px;
}

.memora-header {
    display: flex;
    margin-bottom: 55px;
    gap: 35px;
    margin-left: -12px;
}

.memora-header-content+img {
    width: 186.333px;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   PHẦN THANH TOÁN VIETQR
   ========================================================================== */
.memora-payment-section {
    background: #eef6fc;
    border: 0.5px solid #b8d9f0;
    border-radius: 4em;
    padding: 8em 10em;
    margin: 10em 0;
    text-align: left;
}

.memora-payment-title {
    font-family: var(--memora-font-body, 'Mulish', sans-serif);
    font-size: 6em;
    font-weight: 700;
    color: var(--memora-brown);
    text-align: center;
    margin-bottom: 8em;
    letter-spacing: 0.02em;
}

.memora-payment-body {
    display: flex;
    align-items: flex-start;
    gap: 8em;
}

.memora-payment-qr {
    flex: 0 0 auto;
}

.memora-payment-qr img {
    width: 80em;
    height: auto;
    border-radius: 2em;
    display: block;
}

.memora-payment-info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4em;
    justify-content: center;
}

.memora-payment-row {
    display: flex;
    align-items: center;
    gap: 3em;
    padding: 3em 4em;
    background: #ffffff;
    border-radius: 2em;
    border: 0.25px solid #cce4f5;
}

.memora-payment-row--amount {
    background: #fff4ed;
    border-color: #f0c8a8;
}

.memora-payment-row--content {
    background: #fdf4f0;
    border-color: #e8c4b0;
}

.memora-payment-label {
    font-size: 4.5em;
    font-weight: 600;
    color: #8a7a72;
    min-width: 18em;
    flex-shrink: 0;
}

.memora-payment-value {
    font-size: 5em;
    font-weight: 700;
    color: var(--memora-brown);
    display: flex;
    align-items: center;
    gap: 2em;
}

.memora-payment-row--amount .memora-payment-value {
    font-size: 5.5em;
    color: #b03a00;
}

.memora-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75em;
    padding: 1px 3px;
    border-radius: 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
    line-height: 1;
}

.memora-copy-btn:hover {
    opacity: 1;
}

.memora-payment-note {
    margin-top: 6em;
    font-size: 4em;
    color: #7a8e99;
    text-align: center;
    font-style: italic;
}

.memora-payment-note strong {
    color: var(--memora-brown);
}

.memora-wc-thankyou-hook {
    font-size: 14px !important;
    text-align: center;
    margin: 46.666667px 0 0;
    background: #fdfbf7;
    border: 1px solid #ebd9cb;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 6px rgba(115, 62, 28, 0.04);
}

.memora-wc-thankyou-hook img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
    border-radius: 8px;
}

.memora-wc-thankyou-hook ul.order_details,
.memora-wc-thankyou-hook .woocommerce-bacs-bank-details {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
    text-align: left !important;
    font-size: 14px !important;
}

.memora-wc-thankyou-hook .woocommerce-notice {
    font-size: 15px;
    font-weight: 600;
    color: var(--memora-brown, #733e1c);
    margin-bottom: 12px;
}



.memora-thankyou-title {
    font-family: 'Anastasia Script';
    font-size: 46px;
    font-weight: 700;
    color: var(--memora-brown);
    margin: 0;
    line-height: 1.1;
}

.memora-thankyou-subtitle {
    font-family: 'Cocomat pro';
    font-size: 19px;
    font-weight: 600;
    color: #733e1c;
    margin: -5px 0 0px 0;
}

.memora-success-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 13.333333333px;
}

.memora-success-check-circle {
    width: 79.1em;
    height: 79.1em;
    /* background: var(--memora-blue-light); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memora-success-check-circle img {
    width: 100%;
    height: 100%;
}

.memora-success-check-circle svg {
    width: 44px;
    height: 44px;
    stroke: #ffffff;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.memora-banner-pill {
    background: var(--memora-blue-light);
    border-radius: 30px;
    padding-bottom: 4px;
    align-content: center;
    display: inline-block;
    font-size: 10.3em;
    font-weight: 700;
    color: #713e24;
    /* margin-bottom: 22px; */
    width: 311.333333333333px;
    height: 46.33333333px;
    font-family: 'Cocomat Pro';
}

.memora-lookup-wrap .memora-banner-pill {
    background: #fff9f3;
    border-radius: 2000px;
    width: 364.3333333px;
    height: 63.8333333px;
    font-size: 25px;
    font-weight: 700;
}


.memora-info-3cols {
    display: flex;
    justify-content: space-between;
    gap: 3.333333333px;
    margin-bottom: 23em;
    margin-top: 63.3333333px;
}

.memora-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.memora-info-col:nth-of-type(1) {
    flex: 94.9;
}

.memora-info-col:nth-of-type(2) {
    flex: 115.3;
}

.memora-info-col:nth-of-type(3) {
    flex: 67.1;
}

.memora-info-label {
    font-family: 'Cocomat Pro';
    font-size: 13.1em;
    color: var(--memora-brown-text);
    margin-bottom: 0;
    text-align: left;
}

.memora-info-box {
    background: var(--memora-blue-light);
    border: 0.1em solid #6f381e;
    border-radius: 0.725em;
    /* padding: 1em 0 1em; */
    align-content: center;
    font-size: 9.8em;
    font-weight: 700;
    color: #6f381e;
    height: 76px;
    font-family: 'Noto Sans';
}

/* KHỐI RANDOM 4 SỐ */
.memora-code-section {
    text-align: left;
    margin-bottom: 24px;
}

.memora-code-label-row {
    display: flex;
    align-items: center;
    /* gap: 8px; */
    /* margin-bottom: 6px; */
    /* padding-left: 4px; */
}

.memora-code-label {
    font-family: 'Montserrat';
    font-size: 10.8em;
    color: var(--memora-brown-text);
}

.memora-code-yellow-badge {
    background: #ffed00;
    color: #111111;
    border-radius: 0.5em;
    padding: 0.1em 0.5em;
    font-size: 9em;
    position: absolute;
    font-weight: 700;
    top: 0.5em;
    left: 0.6em;
    font-family: 'Cocomat Pro';
}

.memora-code-brown-card {
    background: rgb(115 62 28 / 85%);
    border-radius: 12em;
    padding: 10em;
    text-align: center;
    box-shadow: 0 4px 12px rgba(115, 62, 28, 0.2);
    position: relative;
    height: 113.5px;
}

.memora-code-digits {
    font-size: 31em;
    font-weight: 700;
    color: #ffffff;
    /* letter-spacing: 4px; */
    line-height: 1;
    font-family: 'Noto Sans';
    height: 100%;
    align-content: center;
}

.memora-code-notice {
    font-size: 17px;
    color: var(--memora-brown-text);
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
    font-family: 'Cocomat Pro';
}

/* THẺ LƯU Ý / NOTE CARD */
.memora-note-card {
    background: #ffffff;
    border: 1em solid var(--memora-brown);
    border-radius: 12em;
    padding: 12em;
    position: relative;
    margin-top: 46.66666667px;
    margin-bottom: 31em;
    text-align: center;
    color: #733e1c;
    font-family: 'Mulish';
}

.memora-lookup-wrap .memora-note-card {
    margin-bottom: 0;
}

.memora-note-tag {
    position: absolute;
    top: -2.2em;
    left: -1.7em;
    display: flex;
    /* background: var(--memora-blue-light); */
    /* border-radius: 12px 12px 12px 0; */
    /* padding: 0; */
    font-size: 5.9em;
    font-weight: 700;
    color: var(--memora-brown);
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); */
    transform: rotate(-18deg);
}

.memora-note-tag svg {
    width: 5.1em;
    height: 5.1em;
}

.memora-note-tag span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.memora-note-p1 {
    font-size: 17px;
    line-height: 115%;
    width: 377.1667px;
    margin: 0 auto;
}

.memora-note-cursive {
    font-family: 'Anastasia Script';
    font-size: 19em;
    font-style: italic;
    color: var(--memora-brown);
    margin: 23px 0;
    font-weight: 600;
    line-height: 130%;
}

.memora-note-p2 {
    font-size: 7.6em;
    line-height: 1.3;
    margin: 0;
    width: 23em;
    margin: 0 auto;
    font-size: 17px;
    line-height: 115%;
    width: 385.1667px;
    margin: 0 auto;
}

/* NÚT QUAY VỀ TRANG CHỦ */
.memora-home-btn-wrap {
    margin: 20px 0;
}

.memora-home-btn {
    /* background: #ffffff; */
    /* border: 1.5px solid var(--memora-brown); */
    /* border-radius: 30px; */
    /* padding: 8px 24px; */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    /* gap: 8px; */
    /* font-size: 14px; */
    font-weight: 700;
    color: var(--memora-brown);
    text-decoration: none;
    transition: all 0.2s ease;
}

.memora-home-icon {
    width: 48px;
    height: 48px;
    background: #bbd6ec;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -9px
        /* font-size: 12px; */
    ;
    z-index: 1;
}

.memora-home-icon svg {
    width: 100%;
    height: 100%;
}

.memora-home-text {
    font-size: 20px;
    border: 0.1em solid #733e1c;
    padding-bottom: 5px;
    border-radius: 2000px;
    background-color: #fff;
    width: 222.8333333px;
    height: 44.3333px;
    font-family: 'Cocomat Pro';
    line-height: 100%;
    align-content: center;
}

.memora-footer-text-wrap {
    /* font-size: 3px; */
    margin-top: 26.6666667px;
}

.memora-footer-text {
    font-size: 41px;
    font-family: 'Anastasia Script';
    font-weight: 500;
}

/* ==========================================================================
   7. SHORTCODE [lookup_booking] (Khớp 100% Ảnh 4)
   ========================================================================== */
.memora-lookup-wrap {
    padding: 10px 0;
    font-size: 1.9px;
    text-align: center;
    width: 541px;
    margin: 0 auto;
}

.memora-lookup-header-pill {
    background: var(--memora-blue-light);
    border-radius: 2000px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'The Silver Editorial';
    font-size: 30px;
    font-weight: 700;
    color: #713e24;
    margin-bottom: 1.5em;
    width: 421.83333333333px;
    height: 57px;
    justify-content: center;
    padding-top: 7px;
    padding-right: 32px;
}

.memora-lookup-header-pill svg {
    width: 27px;
    height: 27px;
    margin-bottom: 5px;
}

.memora-lookup-inputs-row {
    display: flex;
    justify-content: center;
    gap: 111.66666667px;
    margin-bottom: 50px;
}

.memora-lookup-field {
    /* flex: 1; */
    text-align: center;
    width: 168.5px !important;
}

.memora-lookup-field label {
    display: block;
    font-family: 'Montserrat';
    font-size: 12em;
    color: var(--memora-brown-text);
    /* margin-bottom: 8px; */
    line-height: 120%;
}

.memora-lookup-input {
    /* width: fit-content !important; */
    border: none !important;
    border-bottom: 0.05em solid var(--memora-brown) !important;
    border-radius: 0 !important;
    background: transparent;
    outline: none !important;
    font-family: var(--memora-font-sans);
    font-size: 11em;
    font-weight: 600;
    color: var(--memora-brown-text);
    text-align: center;
    /* padding: 4px 0; */
    /* width: 168.5px !important; */
    height: 45px;
}

.memora-lookup-result-box {
    margin-top: 33.33333px;
    background: rgb(105 61 33 / 33%);
    border-radius: 12em;
    padding: 41.667px 38.333333px;
}

.memora-lookup-result-box .memora-code-yellow-badge {
    background: transparent !important;
    color: #fff;
}

/* THÔNG BÁO LỖI / THÀNH CÔNG */
.memora-alert {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 15px;
    display: none;
}

.memora-alert--error {
    background: #fdf2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    display: block;
}

.memora-alert--success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    display: block;
}

.memora-loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: memora-spin 0.8s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes memora-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   8. MODAL / POPUP CHO PHÒNG CHỤP [booking_room_button]
   ========================================================================== */
.memora-room-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.memora-room-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

.memora-room-modal-dialog {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 24px;
    width: 420px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 24px 18px;
    animation: memoraModalFadeIn 0.25s ease-out;
}

@keyframes memoraModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.memora-room-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--memora-brown);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    font-weight: 700;
}