/* Hero Section - Full Viewport */
.hero-section {
    position: relative;
    width: 100%;
    height: calc(110vh - 60px);
    /* Taller to show more of the image */
    min-height: 700px;
    overflow: hidden;
    margin-top: 60px;
    /* Account for fixed header */
}

/* Welcome Message Section */
.welcome-section {
    background: var(--page-bg);
    padding: 22px 40px;
    /* Increased from 20px to 22px (10% increase) */
    text-align: center;
    position: relative;
    z-index: 2;
}

.welcome-embellishment-top,
.welcome-embellishment-bottom {
    display: flex;
    justify-content: center;
    margin: 0 auto 7px;
    /* Reduced from 12px to 7px (40% reduction) */
    opacity: 0.7;
}

.welcome-embellishment-bottom {
    margin: 7px auto 0;
    /* Reduced from 12px to 7px (40% reduction) */
}

/* Inline SVG sizing for welcome embellishments */
.welcome-embellishment-top svg,
.welcome-embellishment-bottom svg {
    width: 180px;
    height: 30px;
    opacity: 0.7;
}

.embellishment-flipped {
    transform: scaleY(-1);
    /* Flip the bottom embellishment vertically */
}

.welcome-message {
    max-width: 700px;
    margin: 0 auto;
}

.welcome-text {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 24px;
    line-height: 1.6;
    /* Reduced from 1.8 to 1.6 */
    color: #5a5a5a;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Smooth transition from hero to gift cards */
.sky-wrapper {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.logo span {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #324848;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.registry-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.registry-image {
    max-width: 400px;
    max-height: 400px;
    width: auto;
    height: auto;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .registry-image {
        max-width: 60vw;
        /* 50% of viewport width on mobile */
        max-height: 40vh;
    }
}

/* #################################################GIFT CARD###################################################### */


/* Gift List - Full Width Stacked Layout */
.gift-list {
    display: flex;
    flex-direction: column;
    /* Stack cards vertically */
    align-items: center;
    /* Center cards */
    padding: 60px 40px;
    /* Generous padding for classy look */
    width: 100%;
    position: relative;
    z-index: 1;
    background: transparent;
    /* Transparent to show wedding background */
    max-width: 1400px;
    margin: 0 auto;
}

/* Gift Card - Full Width */
.gift-card {
    background: #fbfbf7;
    align-items: center;
    border: 1px solid #ececec;
    border-radius: 0px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 800px;
    margin: 15px 0;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    position: relative;
    /* This is important for absolute positioning the ribbon inside */
    overflow: hidden;
}

/* Gift Card - Hover Effect */
.gift-card:hover {
    transform: scale(1.02);
    border: 1px solid #324848;
}

/* Gift Card - Gift Image */
.gift-card img {
    height: 100%;
    border-radius: 0px;
    margin-right: 30px;
    align-self: center;
}


/* Gift Card - Gift Content - Text on Right */
.gift-content {
    flex-grow: 1;
    /* Take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Gift Card - Gift Title */
.gift-content h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    font-family: 'Nanum Myeongjo', serif;
}

/* Gift Card - Gift Description */
.gift-content p {
    font-size: 14px;
    margin: 6px 0;
    font-family: 'Nanum Myeongjo', serif;
}

/* Gift Card - text content */

.gift-content p:nth-of-type(2) {
    color: #2a2222;
    font-weight: 500;
}

/* Text formatiing */
.attribute-label {
    color: #324848;
    font-weight: 600;
    font-family: 'Nanum Myeongjo', serif;
}

.attribute-value {
    color: #324848;
    /* Consistent green color matching share wishlist button */
    font-weight: 100;
    font-family: 'Nanum Myeongjo', serif;
}

.gift-user-contribution {
    background: #b0c779;
    border-radius: 0px;
    padding: 8px 12px;
    margin: 10px 0;
    display: inline-block;
    /* Add these properties to control size */
    width: fit-content;
    min-width: 150px;
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    align-self: flex-start;
    /* Center the contribution box */
}

.gift-user-contribution span {
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    /* Control text size */
}

/* ################################################# BUTTONS ###################################################### */
.card-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Match the height of the container */
}

.button {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    background-color: white;
    color: black;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}


/* Reserve Button */
.button-reserve {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    background-color: white;
    color: black;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button-reserve:hover {
    background: #324848;
    color: white;
}

.button-disabled {
    background-color: #d3d3d3;
    color: #666;
    cursor: not-allowed;
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    transition: all 0.2s ease-in-out;
    text-align: center;
    width: auto;
    /* Allow button to size naturally */
}

/* Modal Content - Desktop */
.modal-content .button-contribute {
    float: none !important;
    margin: 20px 0 8px 0;
    width: auto;
    padding: 8px 16px;
    border: 1.5px solid #324848;
    background-color: white;
    color: #324848;
    border-radius: 0px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.modal-content .button-contribute:hover {
    background: #324848;
    color: white;
}

/* Disabled button in contribution modal only */
#contributionModal .button-contribute.button-disabled,
#contributionModal .button-contribute:disabled {
    background-color: #d3d3d3 !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #ccc !important;
    opacity: 0.6;
}

#contributionModal .button-contribute.button-disabled:hover,
#contributionModal .button-contribute:disabled:hover {
    background-color: #d3d3d3 !important;
    color: #666 !important;
}

.button-container {
    clear: both;
    overflow: hidden;
}

.button-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Contribute Button */
.button-contribute {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 0 0 auto;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #324848;
    background-color: white;
    color: #324848;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
    float: right;
}

.button-contribute:hover {
    background: #324848;
    color: white;
}


/* Product Link Icon */
.product-link-icon {
    color: #555;
    text-decoration: none;
    margin-left: 8px;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
    vertical-align: super;
    font-size: 14px;
}

.product-link-icon i {
    font-size: 12px;
    font-weight: 900;
}

.product-link-icon:hover {
    opacity: 1;
    color: #324848;
}

/* Delete Button */
.button-delete {
    background: #e74c3c;
    color: white;
}

.button-delete:hover {
    background: #c0392b;
}


/* ################################################# PROGRESS BAR ###################################################### */

.progress-bar-wrapper {
    margin: 10px 0;
    width: 100%;
    max-width: 500px;
}

.progress-bar-outer {
    height: 36px;
    background-color: #f5f5f5;
    border: 2px solid #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    /* ✅ Critical to prevent overflow */
    display: flex;
    align-items: center;
    padding: 2px;
}

.progress-bar-inner {
    height: 100%;
    background-color: #324848;
    border-radius: 0px;
    transition: width 0.3s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    overflow: hidden;
    /* Added to contain the highlight properly */
}

#contributionModal .progress-bar-wrapper {
    position: relative;
    left: 40px;
    /* Shifts the element 50px to the right from its normal position */
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    color: black;
}

.progress-label {
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    margin-top: 4px;
}

.cont-tooltip-text {
    visibility: visible;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 0px;
    padding: 6px 10px;
    position: absolute;
    z-index: 999;
    top: -40px;
    /* bottom: 110%; */
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.3s;
}

.progress-bar-inner:hover .cont-tooltip-text {
    visibility: visible;
    opacity: 0.95;
}

.card-progress-bar-value-text {
    font-size: 12px !important;
    /* Slightly smaller for the card view */
    color: #555 !important;
    font-weight: 500 !important;
    margin-left: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}


/* ################################################# PAYMENT SUCCESS ###################################################### */


/* ################################################# MODAL ###################################################### */


.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    animation: none !important;
    transition: none !important;
}

.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* Amount box in contribution
input[type="number"] {
    padding: 8px;
    width: 100px;
    text-align: center;
    border-radius: 0px;
    border: 1px solid #cccccc;
    margin-right: 10px;
} */

.modal-content .button {
    margin-top: 10px;
    border: 1px solid #cccccc;
}

/* Shared styles for all modal textareas */
.modal textarea,
textarea.modal-textbox {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* On focus - when you have selected the text box */
.modal textarea:focus,
textarea.modal-textbox:focus {
    outline: none;
    border-color: #324848;
    box-shadow: 0 0 6px rgba(50, 72, 72, 0.4);
}

/* Placeholder styling */
.modal textarea::placeholder,
textarea.modal-textbox::placeholder {
    color: #888;
    font-style: italic;
}

.modal-content .explanation-text {
    margin-top: 10px;
    font-size: 14px;
    /* Makes text smaller than default */
    line-height: 1.4;
    /* Improves readability of smaller text */
    margin-bottom: 20px;
    /* Adds space below the text */
    color: #666;
    /* Optional: lighter color for secondary text */
    display: block;
    /* Ensures the text takes up its own block */
    /* margin-bottom: 1rem;
    font-size: 1rem;
    color: #555; */
    line-height: 1.4;
    text-align: center;
}

/* Updated currency input styling with symbol inside */
.currency-input {
    position: relative;
    display: flex;
    width: 100%;
    margin: 20px 0;
}

.currency-input .currency-symbol {
    position: absolute;
    left: 12px;
    /* Fixed distance from the left edge of input */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #555;
    pointer-events: none;
    /* Allow clicking through the symbol */
    z-index: 2;
    white-space: nowrap;
    /* Prevents the symbol from wrapping */
}

.currency-input input {
    height: 40px;
    width: 30%;
    border-radius: 0px;
    border: 1px solid #ccc;
    font-size: 1rem;
    box-sizing: border-box;
    min-width: 100px;
    text-indent: 20px;
}

/* Add mobile-specific adjustments */
@media screen and (max-width: 1024px) {
    .currency-input .currency-symbol {
        left: 12px;
        /* Keep consistent on mobile */
    }

    .currency-input input {
        font-size: 16px;
        /* Prevent iOS zoom */
        padding-left: 30px;
        /* Keep consistent padding */
    }
}

/* ################################################# RESERVED / FUNDED CARD ###################################################### */


.reserved-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #b0c779;
    padding: 8px 16px;
    border-radius: 0px;
    font-weight: 600;
    font-size: 14px;
    width: 150px;
    margin-top: 10px;
}

.reserved-label {
    color: #000;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-icon {
    background: #ffffff;
    border: 1px solid #000;
    border-radius: 0px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
}

.tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 0px;
    padding: 6px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.reserved-card img {
    width: 120px;
    height: auto;
    border-radius: 0px;
    margin-right: 16px;
    object-fit: contain;
}

.reserved-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #fdfdf9;
    border: 1px solid #eee;
    border-radius: 0px;
    margin-bottom: 20px;
    height: 150px;
    /*  Desired fixed height for reserved cards */
    min-height: 150px;
    width: 70%;
    /* Reduced width from the standard 90% */
    max-width: 600px;
    /* Reduced max-width from the standard 800px */
}

.reserved-card .gift-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0 0;
    /* Add some bottom margin */
    overflow: hidden;
    /* Hide overflow */
    overflow-wrap: break-word;
    /* Allow text to break to prevent overflow */
    hyphens: auto;
    /* Add hyphens where appropriate */
    max-width: 100%;
    align-self: center;
    /* Center the title vertically */
}

.reserved-card .gift-content {
    flex: 1;
    /* Allows this section to take available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically if space allows */
    height: 100%;
    /* Try to use full internal height */
    overflow: hidden;
    /* Clip overflowing text */
    overflow-wrap: break-word;
    /* Allow text to break to prevent overflow */
    word-wrap: break-word;
    /* For legacy browsers */
    word-break: break-word;
    /* More aggressive breaking if needed */
    hyphens: auto;
    /* Add hyphens where appropriate */
    max-width: 100%;
}


.reserved-card .gift-content p {
    /* Example if you have a description */
    font-size: 13px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-unreserve {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 0 0 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    background-color: #fff;
    color: #c64c4c;
    /* A soft red that matches the "Reserved" ribbon */
    border: 1.5px solid #c64c4c;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button-unreserve:hover {
    background-color: #c64c4c;
    color: #fff;
}

/* Styles for the ribbon wrapper and the ribbon itself */
.ribbon-wrapper {
    position: absolute;
    top: -5px;
    /* Adjust as needed */
    left: -5px;
    /* Adjust as needed */
    width: 150px;
    /* Adjust as needed */
    height: 150px;
    /* Adjust as needed */
    overflow: hidden;
    z-index: 10;
    /* Ensure it's above other card content */
}

.ribbon {
    position: absolute;
    display: block;
    width: 220px;
    /* Adjust as needed */
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    transform: rotate(-45deg);
    left: -50px;
    /* Adjust to position the rotated ribbon */
    top: 45px;
    /* Adjust to position the rotated ribbon */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Reserved: maroon background, cream text */
.ribbon.ribbon-reserved {
    background: #E163C3;
    color: #D5C800;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Gifted: brand yellow background, maroon text */
.ribbon.ribbon-gifted {
    background: #E163C3;
    color: #D5C800;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}


@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* ################################################# CONTAINER INDEX PAGE ###################################################### */

.main-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    gap: 40px;
}

.left-column,
.right-column {
    flex: 1;
}

.left-column {
    max-width: 500px;
    margin-left: auto;
    margin-right: 0;

}

.left-column h2 {
    margin-top: 12px;
}

.right-column {
    flex-grow: 2;
}

.right-column h2 {
    margin-top: 12px;
}


/* ################################################# FORM CARD INDEX PAGE ###################################################### */

.form-card {
    background: #fbfbf7;
    align-items: center;
    border: 1px solid #ececec;
    border-radius: 0px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 800px;
    margin: 15px 0;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.form-card h2 {
    text-align: center;
    color: #2f2f2f;
    margin-bottom: 20px;
}

/* FETCH FROM URL INPUT AND BUTTON */
.url-input-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.url-input-group input[type="text"] {
    flex: 1;
    margin: 0;
    vertical-align: middle;
    height: 30px;
    /* ensure it matches the button */
    font-size: 14px;
    line-height: 1.5;
    padding: 0 12px;
    /* remove top-bottom padding to center text */
    border: 1px solid #ccc;
    border-radius: 0px;
}

.google-btn {
    background-color: white;
    color: rgb(11, 8, 8);
    padding: 12px 24px;
    border: 1px solid #030104;
    border-radius: 0px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center text and icon */
    gap: 12px;
    margin: 10px auto;
    width: 100%;
    /* Make all buttons full width */
    max-width: 300px;
    /* Optional: limit max width */
    min-width: 300px;
    /* Optional: limit max width */
    box-sizing: border-box;
}

.url-input-group .go-button {
    height: 30px;
    padding: 0 16px;
    font-size: 14px;
    border: none;
    width: 60px;
    background-color: #324848;
    color: white;
    border-radius: 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    vertical-align: middle;
}

.button-view-registry {
    display: inline-block;
    background: #fff;
    color: #324848;
    border: 1px solid #324848;
    padding: 10px 22px;
    border-radius: 0px;
    font-size: 1em;
    text-decoration: none;
    margin-bottom: 20px;
    transition: background 0.2s, color 0.2s;
}

.button-view-registry:hover {
    background: #324848;
    color: #fff;
}


/* FORM CARD FIELDS AND BUTTONS */

.form-card input[type="text"],
.form-card input[type="url"],
.form-card input[type="number"],
.form-card textarea {
    width: 80%;
    padding: 4px;
    margin-bottom: 1px;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 14px;
    display: block;
}

.form-card input[type="submit"],
.form-card input[type="reset"],
.form-card button {
    width: 48%;
    margin-top: 12px;
    padding: 10px;
    border: none;
    border-radius: 0px;
    background-color: #324848;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.form-card input[type="submit"]:hover,
.form-card input[type="reset"]:hover,
.form-card button:hover {
    background-color: #2a3a3a;
}


.checkbox-group {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 0px;
}

.checkbox-item {
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.checkbox-item label {
    font-size: 0.9em;
    color: #555;
}

/* ################################################# HEADER AND NAVIGATION ###################################################### */

/* Desktop header with centered logo */
@media screen and (min-width: 1025px) {

    .logo {
        margin: 0;
        justify-content: center;
        /* Center logo on desktop */
    }
}

/* ################################################# SIDEPANE NAVIGATION ###################################################### */

/* Sidepane Container - Base styles (apply to all screen sizes) */
.sidepane {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background: linear-gradient(to bottom,
            #f9f7f4 0%,
            #fef9f2 50%,
            #fef8f1 100%);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    z-index: 998;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    padding-bottom: 40px;
}

/* Sidepane Navigation Items - Base styles */
.sidepane-nav {
    flex: 1;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.sidepane-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #262e2e;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Nanum Myeongjo', serif;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}

.sidepane-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--maroon) !important;
}

.sidepane-nav-item.active {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--maroon) !important;
    font-weight: 500;
}

.sidepane-nav-item i {
    width: 20px;
    font-size: 16px;
    color: #626262;
    flex-shrink: 0;
}

.sidepane-nav-item.active i,
.sidepane-nav-item:hover i {
    color: var(--maroon) !important;
}

/* Sidepane Section Divider */
.sidepane-section-divider {
    height: 1px;
    background-color: #e3dcd6;
    margin: 8px 20px;
}

/* Sidepane Section Title */
.sidepane-section-title {
    padding: 16px 20px 8px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #626262;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    font-family: 'Nanum Myeongjo', serif;
}

/* Sidepane FAQ Audience Toggle */
.sidepane-faq-audience-toggle {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    margin-bottom: 8px;
}

.sidepane-faq-audience-btn {
    flex: 1;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border: 2px solid var(--maroon);
    border-radius: 0px;
    background: white;
    color: var(--maroon);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.sidepane-faq-audience-btn:hover {
    background: rgba(86, 16, 35, 0.08);
}

.sidepane-faq-audience-btn.active {
    background: var(--maroon);
    color: white;
}

/* Sidepane FAQ Category Links */
.sidepane-faq-category-link {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    color: #262e2e;
    transition: all 0.2s ease;
}

.sidepane-faq-category-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--maroon);
}

.sidepane-faq-category-link.active {
    background: rgba(86, 16, 35, 0.08);
    color: var(--maroon);
    font-weight: 500;
}

.sidepane-faq-category-link i {
    font-size: 10px;
    margin-right: 8px;
    opacity: 0.6;
}

/* Sidepane Bottom Section */
.sidepane-bottom {
    padding: 16px 0;
    /* border-top: 1px solid #e3dcd6; */
    margin-top: auto;
}

/* Support dropdown - hidden by default, shown on Support click */
.sidepane-support-wrapper {
    position: relative;
}

.sidepane-support-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e3dcd6;
    overflow: hidden;
    display: none;
    z-index: 10;
    margin-bottom: 4px;
}

.sidepane-support-dropdown.open {
    display: block;
}

.sidepane-support-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #262e2e;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Nanum Myeongjo', serif;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}

.sidepane-support-dropdown-item:hover {
    background-color: #f5f1eb;
    color: var(--maroon);
}

.sidepane-support-dropdown-item i {
    width: 20px;
    font-size: 16px;
    color: #626262;
    flex-shrink: 0;
}

.sidepane-support-dropdown-item:hover i {
    color: var(--maroon);
}

.sidepane-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    overflow: visible;
}

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

.sidepane-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 0px;
}

.sidepane-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 0px;
}

.sidepane-toggle-switch input:checked+.sidepane-toggle-slider {
    background-color: var(--maroon);
}

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

.sidepane-toggle-switch input:focus+.sidepane-toggle-slider {
    box-shadow: 0 0 1px var(--maroon);
}

/* Hide overlay completely - desktop only */
.sidepane-overlay {
    display: none !important;
}

/* Desktop Layout - Sidepane always visible */
@media screen and (min-width: 1025px) {
    body.has-sidepane {
        --sidepane-width-collapsed: 56px;
        --sidepane-width-expanded: 248px;
        display: block;
        margin-left: 0;
        overflow-x: hidden;
    }

    body.has-sidepane .sidepane {
        transform: translateX(0);
        /* Always visible by default */
    }

    /* Desktop: hide sidepane when data-default-visible="false" */
    body.has-sidepane .sidepane[data-default-visible="false"] {
        transform: translateX(-100%);
    }

    /* Override hidden default when user opens it */
    body.has-sidepane .sidepane[data-default-visible="false"].opened {
        transform: translateX(0);
    }

    /* When sidepane is closed (toggleable) */
    body.has-sidepane .sidepane.closed {
        transform: translateX(-100%);
    }

    /* Content wrapper - pushed by collapsed rail width (expanded pane overlays) */
    body.has-sidepane .content-wrapper {
        margin-left: var(--sidepane-width-collapsed);
        transition: margin-left 0.3s ease;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Adjust content when sidepane starts hidden */
    body.has-sidepane .sidepane[data-default-visible="false"]~.content-wrapper {
        margin-left: 0;
    }

    /* Adjust content when sidepane that started hidden is opened */
    body.has-sidepane .sidepane[data-default-visible="false"].opened~.content-wrapper {
        margin-left: var(--sidepane-width-collapsed);
    }

    body.has-sidepane.sidepane-closed .content-wrapper {
        margin-left: 0;
    }

    /* Content wrapper scaling - containers inside scale naturally */
    body.has-sidepane .content-wrapper .main-container {
        margin-left: auto;
        margin-right: auto;
        max-width: min(1400px, 100%);
        width: 100%;
        box-sizing: border-box;
        padding-left: min(120px, 5%);
        padding-right: min(120px, 5%);
    }

    body.has-sidepane .content-wrapper .gift-list {
        margin-left: auto;
        margin-right: auto;
        max-width: min(1400px, 100%);
        width: 100%;
        box-sizing: border-box;
    }

    /* Page-specific content adjustments */
    body.has-sidepane .content-wrapper .gift-list-header-wrapper {
        max-width: min(800px, 100%);
        width: 100%;
        box-sizing: border-box;
    }

    body.has-sidepane .content-wrapper .add-product-form-card {
        max-width: min(800px, 100%);
        width: 100%;
        box-sizing: border-box;
    }

    body.has-sidepane .content-wrapper .explore-page {
        width: 100%;
        min-width: 0;
        max-width: min(1400px, 100%);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* Desktop: Add padding-top to push nav below header */
    .sidepane-nav {
        padding-top: 90px;
        /* 80px header + 24px spacing */
    }

    /* Hide overlay completely on desktop */
    .sidepane-overlay {
        display: none !important;
    }
}

/* Mobile: Hide sidepane by default, show as overlay when toggled */
@media screen and (max-width: 1024px) {

    /* Hide sidepane off-screen by default */
    .sidepane {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 220px;
        height: 100vh;
        padding-top: 5px;
        /* Space for mobile header */
        padding-bottom: 80px;
        /* Add this line */
        transform: translateX(-100%) !important;
        /* Hidden off-screen */
        z-index: 999 !important;
        /* Above header */
        overflow-y: auto !important;
        /* Allow scrolling */
        transition: transform 0.3s ease;
    }

    /* Show sidepane when .show class is added (hamburger clicked) */
    .sidepane.show {
        transform: translateX(0) !important;
        /* Slide in from left */
    }

    /* Dark backdrop overlay behind sidepane */
    .sidepane-overlay {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        /* Below sidepane, above content */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidepane-overlay.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* Reset desktop layout for mobile */
    body.has-sidepane {
        display: block !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    /* Content takes full width on mobile */
    body.has-sidepane .content-wrapper {
        margin-left: 0 !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    /* Adjust sidepane nav padding for mobile header */
    .sidepane-nav {
        padding-top: 70px !important;
        /* Account for mobile header + spacing */
    }
}

.logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo a {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #324848;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.logo-link {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #324848;
    text-decoration: none;
    letter-spacing: -0.01em;
}

/* Logo image: maroon via CSS mask for exact #561023 (matches account icon / brand). */
.logo--maroon .logo-image-mask {
    display: block;
    width: 110px;
    height: 40px;
    background-color: var(--maroon);
    -webkit-mask-image: var(--logo-mask-url);
    mask-image: var(--logo-mask-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.header-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1;
}

.nav-links {
    display: none;
    /* Hide nav links, use hamburger menu instead */
    align-items: center;
    gap: 30px;
}

.nav-link:hover {
    color: #324848;
    /* Consistent green color matching share wishlist button */
}

.nav-link i {
    margin-right: 6px;
}

/* Hamburger menu - always visible on desktop for toggling */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Fixed width to prevent growth */
    height: 40px;
    /* Fixed height to prevent growth */
}

/* Always show hamburger on desktop */
@media screen and (min-width: 1025px) {
    .hamburger-menu {
        display: flex;
    }
}

.hamburger-menu span {
    width: 24px;
    height: 2px;
    background-color: #324848;
    transition: none;
}

/* Hamburger icon - positioned absolutely to overlap hamburger lines */
.hamburger-menu i {
    display: none;
}


.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0px;
    min-width: 260px;
    margin-top: 0;
    z-index: 1000;
    padding: 10px 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.header-nav-left {
    position: relative;
}

.mobile-menu.show {
    display: block;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 0.2s;
}

.mobile-menu-item:hover {
    background-color: #f5f5f5;
}

.mobile-menu-item i {
    width: 18px;
    color: #324848;
}


/* Add this to your existing style section or create one */
.currency-selector {
    position: relative;
    display: inline-block;
}

.currency-selector select {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 0px;
    padding: 2px 2px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: #324848;
    cursor: pointer;
    transition: all 0.3s;
}

.currency-selector select:hover {
    background-color: #f0f0f0;
    border-color: #324848;
}

.currency-selector select:focus {
    outline: none;
    border-color: #324848;
    box-shadow: 0 0 0 2px rgba(50, 72, 72, 0.2);
}

.currency-display {
    display: none;
}


.user-badge {
    background-color: var(--maroon);
    color: var(--cream);
    border-radius: 0px;
    font-weight: bold;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.header-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    gap: 1rem;
    margin-left: auto;
    /* Push to the right end */
}

.nav-user-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Account Dropdown */
.account-dropdown-wrapper {
    position: relative;
    margin-left: 12px;
}

.account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0px;
    transition: background-color 0.2s;
}

.account-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.account-trigger .fa-chevron-down {
    font-size: 12px;
    color: #262e2e;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1000;
}

.account-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.account-dropdown-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.account-dropdown-name {
    font-size: 15px;
    font-weight: 500;
    color: #262e2e;
    text-align: left;
}

.account-dropdown-email {
    font-size: 10px;
    font-weight: 500;
    color: #262e2e;
    text-align: left;
}

.account-dropdown-separator {
    height: 1px;
    background-color: #e3dcd6;
    margin: 0 8px;
}

.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #262e2e;
    font-size: 14px;
    transition: background-color 0.2s;
}

.account-dropdown-item:hover {
    background-color: #f5f1eb;
}

.account-dropdown-item i {
    width: 18px;
    font-size: 14px;
    color: #6b7280;
}

.account-dropdown-item:last-child {
    border-radius: 0px;
}

.logout-link:hover {
    text-decoration: underline;
}

/* ################################################# SIDEPANE NAVIGATION ###################################################### */
/* Sidepane styles moved to templates/components/sidepane.html */

@media screen and (max-width: 1024px) {

    .logo {
        order: 2;
        flex: 0 0 auto;
        /* Don't grow or shrink, stay at natural size */
        justify-content: flex-start;
        /* Left-align logo on mobile */
        margin: 0;
    }

    .header-nav-left {
        order: 1;
    }

    .header-nav-right {
        order: 3;
    }

    .hamburger-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1001;
        position: relative;
    }

    /* Sidepane mobile styles moved to templates/components/sidepane.html */

    .hamburger-menu span {
        width: 24px;
        height: 2px;
        background-color: #324848;
        transition: all 0.3s ease;
    }

    .header-nav-left .nav-links {
        display: none;
    }

    .logo {
        flex: 0 0 auto;
        /* Don't grow or shrink, stay at natural size */
        justify-content: flex-start;
        /* Left-align logo on mobile */
    }

    .header-nav-right {
        grid-column: 3;
        justify-content: flex-end;
    }

    /* Reduce gap between nav elements on mobile */
    .nav-links {
        gap: 15px;
    }

    .logo a {
        font-size: 1.5rem;
    }

    .logo-link {
        font-size: 1.5rem;
    }

    .logo span {
        font-size: 1.5rem;
    }

    /* Main content spacing */
    .hero-section {
        position: relative;
        width: 100%;
        height: calc(110vh - 60px);
        /* Taller to show more of the image */
        min-height: 700px;
        overflow: hidden;
        margin-top: 60px;
        /* Account for fixed header */
    }

    .hero-image-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
        /* Hide the extra height */
    }

    .hero-image {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        object-fit: cover;
        object-position: center center;
        transition: transform 0.1s ease-out;
        will-change: transform;
        /* Optimize for parallax */
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 2;
        transition: background 0.3s ease;
    }

    .hero-content {
        position: absolute;
        bottom: calc((95vh - 60px) * 0.22);
        /* Position in bottom third of hero section */
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        text-align: center;
        color: #ffffff;
        /* Pure white for better contrast against dark overlay */
        opacity: 0;
        /* Hidden initially, shown after 2s inactivity */
        transition: opacity 0.3s ease;
        padding: 0 20px;
        width: 100%;
        max-width: 100%;
    }

    .hero-content.visible {
        opacity: 1;
    }

    .hero-title {
        font-size: 56px;
        font-weight: 300;
        margin: 0 0 15px 0;
        letter-spacing: 3px;
        text-shadow: 0 3px 20px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 0, 0, 0.3);
        font-family: 'Nanum Myeongjo', serif;
        line-height: 1.2;
        color: #ffffff;
        overflow-wrap: break-word;
        word-break: normal;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-subtitle {
        font-size: 28px;
        font-weight: 300;
        margin: 0;
        letter-spacing: 2px;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 0, 0, 0.3);
        font-family: 'Nanum Myeongjo', serif;
        color: #ffffff;
        opacity: 1;
    }

    /* Scroll Down Arrow */
    .scroll-down-arrow {
        position: absolute;
        bottom: calc((95vh - 60px) * 0.22 - 120px);
        /* Position just below hero content, accounting for text height */
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        /* Higher than hero-content to ensure visibility */
        color: rgba(255, 255, 255, 1);
        /* Full white for maximum visibility */
        opacity: 0;
        /* Changed from 1 - hidden by default */
        transition: opacity 0.5s ease;
        /* Smooth fade */
        animation: bounce 2s infinite;
        cursor: pointer;
        pointer-events: none;
        /* Initially disabled */
    }

    .scroll-down-arrow.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .scroll-down-arrow svg {
        width: 120px;
        height: 120px;
    }

    @keyframes bounce {

        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateX(-50%) translateY(0);
        }

        40% {
            transform: translateX(-50%) translateY(-10px);
        }

        60% {
            transform: translateX(-50%) translateY(-5px);
        }
    }

    .scroll-down-arrow.hidden {
        opacity: 0;
        pointer-events: none;
    }


    .sky-wrapper {
        position: relative;
        z-index: 2;
        padding-top: 0;
        background: var(--page-bg);
        margin-top: 0;
    }

    /* Welcome Message Section */
    .welcome-section {
        background: var(--page-bg);
        padding: 22px 40px;
        /* Increased from 20px to 22px (10% increase) */
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .welcome-embellishment-top,
    .welcome-embellishment-bottom {
        display: flex;
        justify-content: center;
        margin: 0 auto 7px;
        /* Reduced from 12px to 7px (40% reduction) */
        opacity: 0.7;
    }

    .welcome-embellishment-bottom {
        margin: 7px auto 0;
        /* Reduced from 12px to 7px (40% reduction) */
    }

    /* Inline SVG sizing for welcome embellishments */
    .welcome-embellishment-top svg,
    .welcome-embellishment-bottom svg {
        width: 180px;
        height: 30px;
        opacity: 0.7;
    }

    .embellishment-flipped {
        transform: scaleY(-1);
        /* Flip the bottom embellishment vertically */
    }

    .welcome-message {
        max-width: 700px;
        margin: 0 auto;
    }

    .welcome-text {
        font-family: 'Nanum Myeongjo', serif;
        font-size: 24px;
        line-height: 1.6;
        /* Reduced from 1.8 to 1.6 */
        color: #5a5a5a;
        font-style: italic;
        font-weight: 300;
        letter-spacing: 0.5px;
        margin: 0;
    }

    /* Smooth transition from hero to gift cards */
    .sky-wrapper {
        animation: fadeInUp 0.8s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 2;
            padding: 0;
            margin: 0;
            border: none;
            background: transparent;
        }

        to {
            opacity: 1;
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 2;
            padding: 0;
            margin: 0;
            border: none;
            background: transparent;
        }
    }

    /* Show the currency display on mobile */
    .currency-display {
        display: inline-block;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 0px;
        padding: 8px 12px;
        font-size: 18px;
        font-weight: 500;
        color: #324848;
        min-width: 45px;
        text-align: center;
        pointer-events: none;
        z-index: 1;
    }

    /* Add dropdown arrow indicator */
    .currency-selector::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #324848;
        z-index: 1;
    }

    .user-badge {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }


    /* MODAL */

    /* Login modal specific mobile adjustments */
    .modal-content.login-modal-content {
        padding-bottom: 10px !important;
        /* Reduce bottom padding on mobile */
    }

    /* Modal heading adjustments */
    .modal-content h3 {
        margin-top: 30px;
        /* Pushes heading down */
        margin-bottom: 20px;
        /* Adds space between heading and textarea */
    }

    /* Modal text inputs */
    .modal textarea,
    textarea.modal-textbox {
        width: 100%;
        height: 40%;
        font-size: 16px;
        /* Prevent zoom on iOS */
        padding: 10px;
        margin-top: 15px;
    }

    /* Modal number inputs */
    .modal input[type="number"] {
        width: 120px;
        font-size: 16px;
        padding: 10px;
    }

    /* Modal buttons */
    .modal .button,
    .modal .button-reserve,
    .modal .button-contribute {
        width: auto;
        margin: 20px 0 8px 0;
        padding: 8px 16px;
        font-size: 16px;
        float: none !important;
        border: 1.5px solid #324848;
        background-color: white;
        color: #324848;
        border-radius: 0px;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        text-align: center;
        display: inline-block;
    }

    .modal .button-contribute:hover {
        background: #324848;
        color: white;
    }

    /* Modal close button */
    .modal-close {
        font-size: 24px;
        padding: 10px;
    }

    /* Amount box in contribution modal */
    .modal input[type="number"] {
        width: 100%;
        margin: 10px 0;
    }

}

/* TUTORIAL */

/* Tutorial Modals — Hazlnut brand theme (appears on maroon page bg) */
.tutorial-modal .modal-content {
    height: 400px;
    width: 400px;
    position: relative;
    background: var(--cream, #ede6dc);
    /* Cream border + deep drop shadow — hard maroon offset would vanish on maroon bg */
    border: 2px solid rgba(237, 230, 220, 0.5) !important;
    border-top: 3px solid rgba(237, 230, 220, 0.7) !important;
    border-radius: 0px !important;
    box-shadow:
        0 0 0 1px rgba(237, 230, 220, 0.15),
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
    transition: none !important;
}

img.tutorial-illust {
    height: 200px;
    /* desktop max width  */
    width: auto;
    display: block;
    margin: 0 auto 22px;
    /* center + gap below */
}

.tutorial-modal #tutorialModal4 .tutorial-illust-reserve,
#tutorialModal4 .tutorial-illust-reserve {
    transform: translateX(24px);
}

/* Tutorial illustration link */
a>img.tutorial-illust-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
    height: 200px;
    /* desktop max width  */
    width: auto;
    display: block;
    margin: 0 auto 22px;
}

a>img.tutorial-illust-link:hover {
    opacity: 0.85;
}

/* Close button positioning for tutorial modals */
.tutorial-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    float: none;
    z-index: 11;
}

.tutorial-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

/* Tutorial indicator dots */
.indicator-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 0px;
    background-color: #d0ccc6;
    /* empty/inactive circle */
    border: 2px solid #d0ccc6;
    margin: 0 6px;
    transition: all 0.2s ease;
}

.indicator-dot.active {
    background-color: #262e2e;
    /* filled/active circle */
    border-color: #262e2e;
}

.tutorial-login {
    background: #324848;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tutorial-login:hover {
    background: #2a3a3a;
    transform: scale(1.05);
}

.tutorial-close {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    background-color: white;
    color: black;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.tutorial-close:hover {
    background-color: #c43434 !important;
    color: white;
}

/* Tutorial chevron navigation */
.tutorial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 0px;
    background: #e3dcd6;
    color: #262e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.tutorial-prev {
    left: 16px;
}

.tutorial-next {
    right: 16px;
}

.tutorial-nav[disabled],
.tutorial-nav:disabled {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #d0ccc6 !important;
    color: #999 !important;
    min-width: auto !important;
    border-radius: 0px;
    padding: 0 !important;
}

.tutorial-nav[disabled]:hover,
.tutorial-nav:disabled:hover {
    width: 36px !important;
    height: 36px !important;
    opacity: 0.5 !important;
    background: #d0ccc6 !important;
    transform: translateY(-50%) !important;
}

.tutorial-nav:hover {
    background: #324848;
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.tutorial-nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* Final slide CTA container */
.tutorial-final-cta {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

/* ################################################# WHATSAPP FLOAT BUTTON ###################################################### */

.hiw-float i {
    font-size: 40px;
    /* Adjust size (currently defaults to ~16px) */
    color: white;
    /* Change color - try #f2efec, #9b607c, or any brand color */
}

.hiw-float:hover i {
    color: #f2efec;
    /* Slightly different on hover for effect */
}

/* Add this style to ensure the container adapts to the icon size */
.hiw-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #9b607c;
    color: white;
    border-radius: 0px;
    padding: 3px 3px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Nanum Myeongjo', serif;
    width: fit-content;
    /* Makes container fit its content */
    box-sizing: border-box;
    /* Ensures padding doesn't affect overall width */
}

/* Ensure the text stays consistent regardless of icon size */


/* For mobile devices */
@media screen and (max-width: 1023px) {
    .hiw-float i {
        font-size: 40px;
        /* Adjust size (currently defaults to ~16px) */
        color: white;
        /* Change color - try #f2efec, #9b607c, or any brand color */
    }

    .hiw-float:hover i {
        color: #f2efec;
        /* Slightly different on hover for effect */
    }

    /* Add this style to ensure the container adapts to the icon size */
    .hiw-float {
        position: fixed;
        bottom: 40px;
        right: 40px;
        background-color: #9b607c;
        color: white;
        border-radius: 0px;
        padding: 3px 3px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        transition: all 0.3s ease;
        text-decoration: none;
        font-family: 'Nanum Myeongjo', serif;
        width: fit-content;
        /* Makes container fit its content */
        box-sizing: border-box;
        /* Ensures padding doesn't affect overall width */
    }

    /* Tutorial Modal Mobile Styles */
    .tutorial-modal .modal-content {
        height: auto;
        /* Let content determine height */
        min-height: 450px;
        /* Minimum height */
        max-height: 85vh;
        /* Don't exceed viewport */
        width: calc(100% - 40px);
        /* Full width minus margins */
        max-width: 380px;
        /* Cap maximum width */
        margin-top: 100px;
        /* Center with top spacing */
        padding: 30px 20px 20px;
        /* More top padding for close button */
        overflow-y: auto;
        /* Scroll if content too tall */
        position: relative;
        border-radius: 0px;
    }

    /* Adjust image size for mobile */
    img.tutorial-illust {
        height: 160px;
        max-width: 100%;
        margin: 50px auto 50px;
    }

    /* Per-slide mobile illustration controls (tune each independently) */
    #tutorialModal1 .tutorial-illust,
    #tutorialModal1 .tutorial-illust-link {
        transform: translateX(0px) scale(1.2);
        transform-origin: center center;
    }

    #tutorialModal2 .tutorial-illust,
    #tutorialModal2 .tutorial-illust-link {
        transform: translateX(0px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal3 .tutorial-illust,
    #tutorialModal3 .tutorial-illust-link {
        transform: translateX(0px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal4 .tutorial-illust,
    #tutorialModal4 .tutorial-illust-link {
        transform: translateX(20px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal5 .tutorial-illust,
    #tutorialModal5 .tutorial-illust-link {
        transform: translateX(20px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal6 .tutorial-illust,
    #tutorialModal6 .tutorial-illust-link {
        transform: translateX(0px) scale(1.5);
        transform-origin: center center;
    }

    a>img.tutorial-illust-link {
        height: 160px;
        max-width: 100%;
        margin: 50px auto 50px;
    }

    /* Close button positioning */
    .tutorial-modal .modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        z-index: 11;
    }

    /* Text spacing */
    .tutorial-modal .modal-content p {
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Indicator dots */
    .tutorial-indicator {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    .indicator-dot {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }

    /* Chevron navigation */
    .tutorial-nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .tutorial-prev {
        left: 8px;
    }

    .tutorial-next {
        right: 8px;
    }


    .tutorial-nav[disabled],
    .tutorial-nav:disabled {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        background: #d0ccc6 !important;
        color: #999 !important;
        min-width: auto !important;
        border-radius: 0px;
        padding: 0 !important;
    }

    .tutorial-nav[disabled]:hover,
    .tutorial-nav:disabled:hover {
        width: 36px !important;
        height: 36px !important;
        opacity: 0.5 !important;
        background: #d0ccc6 !important;
        transform: translateY(-50%) !important;
    }

    /* Final CTA */
    .tutorial-final-cta {
        bottom: 55px;
        /* Above indicator dots */
    }

    .tutorial-login {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        background: #324848;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 0px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .tutorial-login:hover {
        background: #2a3a3a;
        transform: scale(1.05);
    }
}

/* ################################################# VIEW CONTRIBUTIONS PAGE ###################################################### */

.view-contributions-page {
    background-color: #f2efec;
    height: 100%;
    padding-top: 120px;
    /* Reduced from 80px since title section removed */
    padding-bottom: 40px;
    box-sizing: border-box;
    overflow: hidden;
}

.contributions-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 40px 76px 0 76px;
    margin-bottom: 32px;
}

.back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover {
    opacity: 0.7;
}

.back-button:active {
    opacity: 0.5;
}

.contributions-title {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 28px;
    color: #324848;
    margin: 0;
    letter-spacing: -0.56px;
}

.contributions-title-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.contributions-title-link:hover {
    opacity: 0.7;
}

.contributions-title-link:active {
    opacity: 0.5;
}

.contributions-content {
    padding: 0 76px;
    max-width: 1600px;
    margin: 0 auto;
}

.contributions-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.contributions-list-column {
    flex: 0 0 400px;
    max-width: 400px;
}

.total-contributions-section {
    background: rgba(227, 220, 214, 0.9);
    backdrop-filter: blur(2px);
    border-radius: 0px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 2px solid rgba(155, 96, 124, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.total-contributions-label {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 16px;
    color: #5a5a5a;
    margin: 0;
    letter-spacing: -0.32px;
}

.total-contributions-amount {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    font-size: 32px;
    color: #9b607c;
    margin: 0;
    letter-spacing: -0.64px;
}

.notes-card-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 600px;
}

.contributions-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.contribution-card {
    background: rgba(227, 220, 214, 0.8);
    backdrop-filter: blur(2px);
    border-radius: 0px;
    padding: 10px 12px;
    height: 95px;
    display: flex;
    align-items: center;
    gap: 13px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.contribution-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contribution-card.selected {
    background: rgba(227, 220, 214, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #9b607c;
}

.contribution-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    /* Allow text truncation */
}

.contribution-name-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.contribution-name {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 21px;
    color: #262e2e;
    margin: 0;
    letter-spacing: -0.42px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.contribution-gift-name {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 400;
    font-size: 14px;
    color: #6b7280;
    letter-spacing: -0.14px;
    max-width: 100%;
    min-width: 0;
}

.contribution-gift-name i {
    font-size: 12px;
    color: #9b607c;
    opacity: 0.7;
}

.contribution-gift-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-indicator {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.no-note-indicator {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    opacity: 0.3;
}

.contribution-amount-wrapper {
    flex-shrink: 1;
    min-width: 0;
    max-width: 50%;
    display: flex;
    justify-content: flex-end;
}

.contribution-amount {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 21px;
    color: #9b607c;
    letter-spacing: -0.42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-state-message {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    color: #5a5a5a;
    margin: 0;
}

/* Notes Card Styles */
.notes-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.notes-card-container {
    position: relative;
    width: 345px;
    height: 535px;
    margin-bottom: 60px;
    overflow: visible;
}

.notes-card-yellow-svg-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 387px;
    height: 572px;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(-10deg);
    transform-origin: center center;
}

.notes-card-yellow-svg {
    width: 100%;
    height: 100%;
}

.notes-card-svg-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.notes-card-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.notes-card-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 37px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    pointer-events: none;
}

.notes-text,
.notes-signature {
    pointer-events: auto;
}

.notes-text {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
}

.notes-text.centered {
    align-items: center;
}

.notes-text p {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.201;
    color: white;
    letter-spacing: -0.42px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: center;
    width: 100%;
}

.notes-empty-message {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.notes-signature {
    text-align: right;
    margin-top: auto;
    max-width: 100%;
    min-width: 0;
}

.notes-signature p {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 26px;
    color: white;
    letter-spacing: -0.52px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.notes-navigation {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.notes-nav-button {
    width: 36px;
    height: 36px;
    border-radius: 0px;
    background-color: #324848;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.notes-nav-button:hover {
    background-color: #2a3a3a;
    transform: scale(1.1);
}

.notes-nav-button:active {
    transform: scale(0.95);
}

.notes-modal-overlay {
    display: none;
}

.notes-modal-close {
    display: none;
}

body.notes-modal-open {
    overflow: hidden;
}

body.notes-modal-open .notes-modal-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10000 !important;
}

body.notes-modal-open .notes-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0px;
    border: none;
    background: rgba(50, 72, 72, 0.85);
    color: #ffffff;
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

body.notes-modal-open .notes-modal-close:hover {
    background: rgba(50, 72, 72, 1);
    transform: scale(1.05);
}

body.notes-modal-open .notes-modal-close:active {
    transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .view-contributions-page {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-top: 80px;
        /* Reduced padding since title section removed */
        padding-bottom: 20px;
    }

    .contributions-content {
        padding: 0 20px;
        flex: 1;
        overflow: hidden;
    }

    .contributions-layout {
        flex-direction: column;
        gap: 30px;
        height: 100%;
    }

    .contributions-list-column {
        flex: 1;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .total-contributions-section {
        flex-shrink: 0;
    }

    .notes-card-column {
        display: none;
    }

    body.notes-modal-open .notes-card-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        inset: 0;
        padding: 24px 20px;
        z-index: 2001;
        overflow-y: auto;
        pointer-events: none;
    }

    body.notes-modal-open .notes-modal-close {
        margin-bottom: 12px;
        pointer-events: auto;
    }

    body.notes-modal-open .notes-card-wrapper {
        width: 100%;
        max-width: 320px;
        pointer-events: auto;
    }

    body.notes-modal-open .notes-card-container {
        position: relative;
        width: 100%;
        max-width: 320px;
        height: min(calc(100vh - 240px), 550px);
        max-height: min(calc(100vh - 240px), 550px);
        min-height: 450px;
        margin: 0 auto 24px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.notes-modal-open .notes-card-yellow-svg-wrapper {
        display: none;
    }

    body.notes-modal-open .notes-card-svg-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(0deg);
        z-index: 1;
        overflow: hidden;
    }

    body.notes-modal-open .notes-card-yellow-svg {
        display: none;
    }

    body.notes-modal-open .notes-card-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    body.notes-modal-open .notes-card-content {
        position: relative;
        padding: 37px 35px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        pointer-events: auto;
        z-index: 2;
    }

    body.notes-modal-open .notes-text {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
        min-height: 0;
        max-height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    body.notes-modal-open .notes-text.centered {
        align-items: center;
    }

    .contributions-grid {
        gap: 12px;
        flex: 1;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contribution-card {
        height: auto;
        min-height: 75px;
        padding: 12px;
    }

    .contribution-name {
        font-size: 18px;
    }

    .contribution-gift-name {
        font-size: 13px;
        margin-top: 3px;
    }

    .contribution-gift-name i {
        font-size: 11px;
    }

    .contribution-amount {
        font-size: 18px;
    }

    .notes-text p {
        font-size: 18px;
    }

    body.notes-modal-open .notes-text p {
        color: white;
        text-align: center;
        width: 100%;
    }

    body.notes-modal-open .notes-signature {
        text-align: right;
        flex-shrink: 0;
        margin-top: 16px;
        padding-bottom: 4px;
        max-width: 100%;
        min-width: 0;
    }

    body.notes-modal-open .notes-signature p {
        font-size: 22px;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    body.notes-modal-open .notes-navigation {
        margin-top: 24px;
        pointer-events: auto;
    }
}

/* ################################################# ACCOUNT SETTINGS PAGE ###################################################### */

.account-settings-container {
    display: flex;
    min-height: calc(100vh - 80px);
    margin-top: 80px;
    background: var(--cream);
}

/* Left Sidepane */
.account-sidepane {
    width: 250px;
    background: var(--cream);
    border-right: 1px solid #e0e0e0;
    padding: 20px 0;
    flex-shrink: 0;
}

.account-nav {
    display: flex;
    flex-direction: column;
}

.account-nav-item {
    padding: 16px 24px;
    color: #2c3e50;
    text-decoration: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.account-nav-item:hover {
    background-color: #f5f5f5;
    color: var(--maroon);
}

.account-nav-item.active {
    background-color: rgba(86, 16, 35, 0.08);
    color: var(--maroon);
    border-left-color: var(--maroon);
    font-weight: 600;
}

/* Main Content Area */
.account-main-content {
    flex: 1;
    padding: 40px 60px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.account-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 32px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.account-actions {
    display: flex;
    gap: 12px;
}

.btn-cancel,
.btn-save {
    padding: 10px 24px;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel {
    background-color: #f5f5f5;
    color: var(--maroon);
    border: 1px solid #e0e0e0;
}

.btn-cancel:hover {
    background-color: #e8e8e8;
}

.btn-save {
    background-color: var(--maroon);
    color: white;
}

.btn-save:hover {
    background-color: #45101c;
}

.btn-save:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Account Sections */
.account-section {
    animation: fadeIn 0.3s ease;
    background-color: #fafafa;
    padding: 32px;
    border-radius: 0px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.logo span {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #324848;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.registry-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.registry-image {
    max-width: 400px;
    max-height: 400px;
    width: auto;
    height: auto;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .registry-image {
        max-width: 60vw;
        /* 50% of viewport width on mobile */
        max-height: 40vh;
    }
}

/* #################################################GIFT CARD###################################################### */


/* Gift List - Full Width Stacked Layout */
.gift-list {
    display: flex;
    flex-direction: column;
    /* Stack cards vertically */
    align-items: center;
    /* Center cards */
    padding: 60px 40px;
    /* Generous padding for classy look */
    width: 100%;
    position: relative;
    z-index: 1;
    background: transparent;
    /* Transparent to show wedding background */
    max-width: 1400px;
    margin: 0 auto;
}

/* Gift Card - Full Width */
.gift-card {
    background: #fbfbf7;
    align-items: center;
    border: 1px solid #ececec;
    border-radius: 0px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 800px;
    margin: 15px 0;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    position: relative;
    /* This is important for absolute positioning the ribbon inside */
    overflow: hidden;
}

/* Gift Card - Hover Effect */
.gift-card:hover {
    transform: scale(1.02);
    border: 1px solid #324848;
}

/* Gift Card - Gift Image */
.gift-card img {
    height: 100%;
    border-radius: 0px;
    margin-right: 30px;
    align-self: center;
}


/* Gift Card - Gift Content - Text on Right */
.gift-content {
    flex-grow: 1;
    /* Take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Gift Card - Gift Title */
.gift-content h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    font-family: 'Nanum Myeongjo', serif;
}

/* Gift Card - Gift Description */
.gift-content p {
    font-size: 14px;
    margin: 6px 0;
    font-family: 'Nanum Myeongjo', serif;
}

/* Gift Card - text content */

.gift-content p:nth-of-type(2) {
    color: #2a2222;
    font-weight: 500;
}

/* Text formatiing */
.attribute-label {
    color: #324848;
    font-weight: 600;
    font-family: 'Nanum Myeongjo', serif;
}

.attribute-value {
    color: #324848;
    /* Consistent green color matching share wishlist button */
    font-weight: 100;
    font-family: 'Nanum Myeongjo', serif;
}

.gift-user-contribution {
    background: #b0c779;
    border-radius: 0px;
    padding: 8px 12px;
    margin: 10px 0;
    display: inline-block;
    /* Add these properties to control size */
    width: fit-content;
    min-width: 150px;
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    align-self: flex-start;
    /* Center the contribution box */
}

.gift-user-contribution span {
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    /* Control text size */
}

/* ################################################# SHAGUN CARD ###################################################### */

.shagun-card {
    background: #8B0D32;
    /* deep maroon color */
    align-items: center;
    border: none;
    border-radius: 0px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 800px;
    margin: 15px 0;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    transition: all 0.2s ease;
}

.shagun-card:hover {
    transform: scale(1.02);
    border: 2px solid #4A071A;
    /* darker maroon for hover border */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.shagun-card img {
    width: 140px;
    height: auto;
    border-radius: 0px;
    margin-right: 30px;
    align-self: center;
}

.shagun-card .gift-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    border-radius: 0px;
}

.shagun-card h2,
.shagun-card p {
    color: #ffffff;
    /* white text for better contrast */
}

.shagun-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}



.button-shagun-contribute {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    /* Updated gold colors */
    border: 1.5px solid #FFD700;
    background: linear-gradient(145deg, #FFD700, #FDB931);
    color: #921e3d;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button-shagun-contribute:hover {
    background: linear-gradient(145deg, #FDB931, #F4A460);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.shagun-contribution {
    background: #f8f4ff;
    border-radius: 0px;
    padding: 8px 12px;
    margin: 10px 0;
    display: inline-block;
    /* Add these properties to control size */
    width: fit-content;
    min-width: 150px;
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shagun-contribution span {
    color: #921e3d;
    font-weight: 500;
    font-size: 14px;
    /* Control text size */
}

/* ################################################# BUTTONS ###################################################### */
.card-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Match the height of the container */
}

.button {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    background-color: white;
    color: black;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}


/* Reserve Button */
.button-reserve {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    background-color: white;
    color: black;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button-reserve:hover {
    background: #324848;
    color: white;
}

.button-disabled {
    background-color: #d3d3d3;
    color: #666;
    cursor: not-allowed;
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 8px 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    transition: all 0.2s ease-in-out;
    text-align: center;
    width: auto;
    /* Allow button to size naturally */
}

/* Modal Content - Desktop */
.modal-content .button-contribute {
    float: none !important;
    margin: 20px 0 8px 0;
    width: auto;
    padding: 8px 16px;
    border: 1.5px solid #324848;
    background-color: white;
    color: #324848;
    border-radius: 0px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.modal-content .button-contribute:hover {
    background: #324848;
    color: white;
}

/* Disabled button in contribution modal only */
#contributionModal .button-contribute.button-disabled,
#contributionModal .button-contribute:disabled {
    background-color: #d3d3d3 !important;
    color: #666 !important;
    cursor: not-allowed !important;
    border-color: #ccc !important;
    opacity: 0.6;
}

#contributionModal .button-contribute.button-disabled:hover,
#contributionModal .button-contribute:disabled:hover {
    background-color: #d3d3d3 !important;
    color: #666 !important;
}

.button-container {
    clear: both;
    overflow: hidden;
}

.button-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Contribute Button */
.button-contribute {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 6px 0 0 auto;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #324848;
    background-color: white;
    color: #324848;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
    float: right;
}

.button-contribute:hover {
    background: #324848;
    color: white;
}


/* Product Link Icon */
.product-link-icon {
    color: #555;
    text-decoration: none;
    margin-left: 8px;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
    vertical-align: super;
    font-size: 14px;
}

.product-link-icon i {
    font-size: 12px;
    font-weight: 900;
}

.product-link-icon:hover {
    opacity: 1;
    color: #324848;
}

/* Delete Button */
.button-delete {
    background: #e74c3c;
    color: white;
}

.button-delete:hover {
    background: #c0392b;
}


/* ################################################# PROGRESS BAR ###################################################### */

.progress-bar-wrapper {
    margin: 10px 0;
    width: 100%;
    max-width: 500px;
}

.progress-bar-outer {
    height: 36px;
    background-color: #f5f5f5;
    border: 2px solid #e0e0e0;
    border-radius: 0px;
    overflow: hidden;
    /* ✅ Critical to prevent overflow */
    display: flex;
    align-items: center;
    padding: 2px;
}

.progress-bar-inner {
    height: 100%;
    background-color: #324848;
    border-radius: 0px;
    transition: width 0.3s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    overflow: hidden;
    /* Added to contain the highlight properly */
}

#contributionModal .progress-bar-wrapper {
    position: relative;
    left: 40px;
    /* Shifts the element 50px to the right from its normal position */
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    color: black;
}

.progress-label {
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    margin-top: 4px;
}

.cont-tooltip-text {
    visibility: visible;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 0px;
    padding: 6px 10px;
    position: absolute;
    z-index: 999;
    top: -40px;
    /* bottom: 110%; */
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.3s;
}

.progress-bar-inner:hover .cont-tooltip-text {
    visibility: visible;
    opacity: 0.95;
}

.card-progress-bar-value-text {
    font-size: 12px !important;
    /* Slightly smaller for the card view */
    color: #555 !important;
    font-weight: 500 !important;
    margin-left: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}



/* ################################################# PAYMENT SUCCESS ###################################################### */








/* ################################################# MODAL ###################################################### */


.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    animation: none !important;
    transition: none !important;
}

.shagun-modal-content {
    background-color: #8B0D32;
    /* deep maroon color */
    margin: 15% auto;
    padding: 20px;
    border-radius: 0px;
    width: 40%;
    text-align: center;
    align-content: center;
    margin-top: 20px;
    ;
    gap: 20px;

}

.shagun-modal-content h2,
.shagun-modal-content h3 {
    color: #ffffff;
    /* white text for better contrast */
    margin-top: 20px;
}

.shagun-explanation-text {
    margin-top: 10px;
    font-size: 14px;
    /* Makes text smaller than default */
    line-height: 1.4;
    /* Improves readability of smaller text */
    margin-bottom: 20px;
    /* Adds space below the text */
    color: #666;
    /* Optional: lighter color for secondary text */
    display: block;
    /* Ensures the text takes up its own block */
    color: #ffffff;
    line-height: 1.4;
    text-align: center;
}

.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* Amount box in contribution
  input[type="number"] {
      padding: 8px;
      width: 100px;
      text-align: center;
      border-radius: 0px;
      border: 1px solid #cccccc;
      margin-right: 10px;
  } */

.modal-content .button {
    margin-top: 10px;
    border: 1px solid #cccccc;
}

/* Shared styles for all modal textareas */
.modal textarea,
textarea.modal-textbox {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* On focus - when you have selected the text box */
.modal textarea:focus,
textarea.modal-textbox:focus {
    outline: none;
    border-color: #324848;
    box-shadow: 0 0 6px rgba(50, 72, 72, 0.4);
}

/* Placeholder styling */
.modal textarea::placeholder,
textarea.modal-textbox::placeholder {
    color: #888;
    font-style: italic;
}

.modal-content .explanation-text {
    margin-top: 10px;
    font-size: 14px;
    /* Makes text smaller than default */
    line-height: 1.4;
    /* Improves readability of smaller text */
    margin-bottom: 20px;
    /* Adds space below the text */
    color: #666;
    /* Optional: lighter color for secondary text */
    display: block;
    /* Ensures the text takes up its own block */
    /* margin-bottom: 1rem;
      font-size: 1rem;
      color: #555; */
    line-height: 1.4;
    text-align: center;
}

/* Updated currency input styling with symbol inside */
.currency-input {
    position: relative;
    display: flex;
    width: 100%;
    margin: 20px 0;
}

.currency-input .currency-symbol {
    position: absolute;
    left: 12px;
    /* Fixed distance from the left edge of input */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #555;
    pointer-events: none;
    /* Allow clicking through the symbol */
    z-index: 2;
    white-space: nowrap;
    /* Prevents the symbol from wrapping */
}

.currency-input input {
    height: 40px;
    width: 30%;
    border-radius: 0px;
    border: 1px solid #ccc;
    font-size: 1rem;
    box-sizing: border-box;
    min-width: 100px;
    text-indent: 20px;
}

/* Add mobile-specific adjustments */
@media screen and (max-width: 1024px) {
    .currency-input .currency-symbol {
        left: 12px;
        /* Keep consistent on mobile */
    }

    .currency-input input {
        font-size: 16px;
        /* Prevent iOS zoom */
        padding-left: 30px;
        /* Keep consistent padding */
    }
}

/* ################################################# RESERVED / FUNDED CARD ###################################################### */


.reserved-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #b0c779;
    padding: 8px 16px;
    border-radius: 0px;
    font-weight: 600;
    font-size: 14px;
    width: 150px;
    margin-top: 10px;
}

.reserved-label {
    color: #000;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-icon {
    background: #ffffff;
    border: 1px solid #000;
    border-radius: 0px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
}

.tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 0px;
    padding: 6px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.reserved-card img {
    width: 120px;
    height: auto;
    border-radius: 0px;
    margin-right: 16px;
    object-fit: contain;
}

.reserved-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #fdfdf9;
    border: 1px solid #eee;
    border-radius: 0px;
    margin-bottom: 20px;
    height: 150px;
    /*  Desired fixed height for reserved cards */
    min-height: 150px;
    width: 70%;
    /* Reduced width from the standard 90% */
    max-width: 600px;
    /* Reduced max-width from the standard 800px */
}

.reserved-card .gift-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0 0;
    /* Add some bottom margin */
    overflow: hidden;
    /* Hide overflow */
    overflow-wrap: break-word;
    /* Allow text to break to prevent overflow */
    hyphens: auto;
    /* Add hyphens where appropriate */
    max-width: 100%;
    align-self: center;
    /* Center the title vertically */
}

.reserved-card .gift-content {
    flex: 1;
    /* Allows this section to take available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically if space allows */
    height: 100%;
    /* Try to use full internal height */
    overflow: hidden;
    /* Clip overflowing text */
    overflow-wrap: break-word;
    /* Allow text to break to prevent overflow */
    word-wrap: break-word;
    /* For legacy browsers */
    word-break: break-word;
    /* More aggressive breaking if needed */
    hyphens: auto;
    /* Add hyphens where appropriate */
    max-width: 100%;
}


.reserved-card .gift-content p {
    /* Example if you have a description */
    font-size: 13px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-unreserve {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 0 0 0 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    background-color: #fff;
    color: #c64c4c;
    /* A soft red that matches the "Reserved" ribbon */
    border: 1.5px solid #c64c4c;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.button-unreserve:hover {
    background-color: #c64c4c;
    color: #fff;
}

/* Styles for the ribbon wrapper and the ribbon itself */
.ribbon-wrapper {
    position: absolute;
    top: -5px;
    /* Adjust as needed */
    left: -5px;
    /* Adjust as needed */
    width: 150px;
    /* Adjust as needed */
    height: 150px;
    /* Adjust as needed */
    overflow: hidden;
    z-index: 10;
    /* Ensure it's above other card content */
}

.ribbon {
    position: absolute;
    display: block;
    width: 220px;
    /* Adjust as needed */
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    transform: rotate(-45deg);
    left: -50px;
    /* Adjust to position the rotated ribbon */
    top: 45px;
    /* Adjust to position the rotated ribbon */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Reserved: maroon background, cream text */
.ribbon.ribbon-reserved {
    background: #E163C3;
    color: #D5C800;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Gifted: brand yellow background, maroon text */
.ribbon.ribbon-gifted {
    background: #E163C3;
    color: #D5C800;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}




@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* ################################################# CONTAINER INDEX PAGE ###################################################### */

.main-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    gap: 40px;
}

.left-column,
.right-column {
    flex: 1;
}

.left-column {
    max-width: 500px;
    margin-left: auto;
    margin-right: 0;

}

.left-column h2 {
    margin-top: 12px;
}

.right-column {
    flex-grow: 2;
}

.right-column h2 {
    margin-top: 12px;
}




/* ################################################# FORM CARD INDEX PAGE ###################################################### */

.form-card {
    background: #fbfbf7;
    align-items: center;
    border: 1px solid #ececec;
    border-radius: 0px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 800px;
    margin: 15px 0;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.form-card h2 {
    text-align: center;
    color: #2f2f2f;
    margin-bottom: 20px;
}

/* FETCH FROM URL INPUT AND BUTTON */
.url-input-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.url-input-group input[type="text"] {
    flex: 1;
    margin: 0;
    vertical-align: middle;
    height: 30px;
    /* ensure it matches the button */
    font-size: 14px;
    line-height: 1.5;
    padding: 0 12px;
    /* remove top-bottom padding to center text */
    border: 1px solid #ccc;
    border-radius: 0px;
}

.google-btn {
    background-color: white;
    color: rgb(11, 8, 8);
    padding: 12px 24px;
    border: 1px solid #030104;
    border-radius: 0px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center text and icon */
    gap: 12px;
    margin: 10px auto;
    width: 100%;
    /* Make all buttons full width */
    max-width: 300px;
    /* Optional: limit max width */
    min-width: 300px;
    /* Optional: limit max width */
    box-sizing: border-box;
}

.url-input-group .go-button {
    height: 30px;
    padding: 0 16px;
    font-size: 14px;
    border: none;
    width: 60px;
    background-color: #324848;
    color: white;
    border-radius: 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    vertical-align: middle;
}

.button-view-registry {
    display: inline-block;
    background: #fff;
    color: #324848;
    border: 1px solid #324848;
    padding: 10px 22px;
    border-radius: 0px;
    font-size: 1em;
    text-decoration: none;
    margin-bottom: 20px;
    transition: background 0.2s, color 0.2s;
}

.button-view-registry:hover {
    background: #324848;
    color: #fff;
}



/* FORM CARD FIELDS AND BUTTONS */

.form-card input[type="text"],
.form-card input[type="url"],
.form-card input[type="number"],
.form-card textarea {
    width: 80%;
    padding: 4px;
    margin-bottom: 1px;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 14px;
    display: block;
}

.form-card input[type="submit"],
.form-card input[type="reset"],
.form-card button {
    width: 48%;
    margin-top: 12px;
    padding: 10px;
    border: none;
    border-radius: 0px;
    background-color: #324848;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.form-card input[type="submit"]:hover,
.form-card input[type="reset"]:hover,
.form-card button:hover {
    background-color: #2a3a3a;
}


.checkbox-group {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 0px;
}

.checkbox-item {
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.checkbox-item label {
    font-size: 0.9em;
    color: #555;
}

/* ################################################# HEADER AND NAVIGATION ###################################################### */

/* Desktop header with centered logo */
@media screen and (min-width: 1025px) {

    .logo {
        margin: 0;
        justify-content: center;
        /* Center logo on desktop */
    }
}

/* ################################################# SIDEPANE NAVIGATION ###################################################### */

/* Sidepane Container - Base styles (apply to all screen sizes) */
.sidepane {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background: linear-gradient(to bottom,
            #f9f7f4 0%,
            #fef9f2 50%,
            #fef8f1 100%);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    z-index: 998;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    padding-bottom: 40px;
}

/* Sidepane Navigation Items - Base styles */
.sidepane-nav {
    flex: 1;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.sidepane-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #262e2e;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Nanum Myeongjo', serif;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}

.sidepane-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--maroon) !important;
}

.sidepane-nav-item.active {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--maroon) !important;
    font-weight: 500;
}

.sidepane-nav-item i {
    width: 20px;
    font-size: 16px;
    color: #626262;
    flex-shrink: 0;
}

.sidepane-nav-item.active i,
.sidepane-nav-item:hover i {
    color: var(--maroon) !important;
}

/* Sidepane Section Divider */
.sidepane-section-divider {
    height: 1px;
    background-color: #e3dcd6;
    margin: 8px 20px;
}

/* Sidepane Section Title */
.sidepane-section-title {
    padding: 16px 20px 8px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #626262;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    font-family: 'Nanum Myeongjo', serif;
}

/* Sidepane FAQ Audience Toggle */
.sidepane-faq-audience-toggle {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    margin-bottom: 8px;
}

.sidepane-faq-audience-btn {
    flex: 1;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border: 2px solid var(--maroon);
    border-radius: 0px;
    background: white;
    color: var(--maroon);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.sidepane-faq-audience-btn:hover {
    background: rgba(86, 16, 35, 0.08);
}

.sidepane-faq-audience-btn.active {
    background: var(--maroon);
    color: white;
}

/* Sidepane FAQ Category Links */
.sidepane-faq-category-link {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    color: #262e2e;
    transition: all 0.2s ease;
}

.sidepane-faq-category-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--maroon);
}

.sidepane-faq-category-link.active {
    background: rgba(86, 16, 35, 0.08);
    color: var(--maroon);
    font-weight: 500;
}

.sidepane-faq-category-link i {
    font-size: 10px;
    margin-right: 8px;
    opacity: 0.6;
}

/* Sidepane Bottom Section */
.sidepane-bottom {
    padding: 16px 0;
    /* border-top: 1px solid #e3dcd6; */
    margin-top: auto;
}

/* Support dropdown - hidden by default, shown on Support click */
.sidepane-support-wrapper {
    position: relative;
}

.sidepane-support-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e3dcd6;
    overflow: hidden;
    display: none;
    z-index: 10;
    margin-bottom: 4px;
}

.sidepane-support-dropdown.open {
    display: block;
}

.sidepane-support-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #262e2e;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Nanum Myeongjo', serif;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}

.sidepane-support-dropdown-item:hover {
    background-color: #f5f1eb;
    color: var(--maroon);
}

.sidepane-support-dropdown-item i {
    width: 20px;
    font-size: 16px;
    color: #626262;
    flex-shrink: 0;
}

.sidepane-support-dropdown-item:hover i {
    color: var(--maroon);
}

.sidepane-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    overflow: visible;
}

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

.sidepane-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 0px;
}

.sidepane-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 0px;
}

.sidepane-toggle-switch input:checked+.sidepane-toggle-slider {
    background-color: var(--maroon);
}

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

.sidepane-toggle-switch input:focus+.sidepane-toggle-slider {
    box-shadow: 0 0 1px var(--maroon);
}

/* Hide overlay completely - desktop only */
.sidepane-overlay {
    display: none !important;
}

/* Desktop Layout - Sidepane always visible */
@media screen and (min-width: 1025px) {
    body.has-sidepane {
        --sidepane-width-collapsed: 56px;
        --sidepane-width-expanded: 248px;
        display: block;
        margin-left: 0;
        overflow-x: hidden;
    }

    body.has-sidepane .sidepane {
        transform: translateX(0);
        /* Always visible by default */
    }

    /* Desktop: hide sidepane when data-default-visible="false" */
    body.has-sidepane .sidepane[data-default-visible="false"] {
        transform: translateX(-100%);
    }

    /* Override hidden default when user opens it */
    body.has-sidepane .sidepane[data-default-visible="false"].opened {
        transform: translateX(0);
    }

    /* When sidepane is closed (toggleable) */
    body.has-sidepane .sidepane.closed {
        transform: translateX(-100%);
    }

    /* Content wrapper - pushed by collapsed rail width (expanded pane overlays) */
    body.has-sidepane .content-wrapper {
        margin-left: var(--sidepane-width-collapsed);
        transition: margin-left 0.3s ease;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Adjust content when sidepane starts hidden */
    body.has-sidepane .sidepane[data-default-visible="false"]~.content-wrapper {
        margin-left: 0;
    }

    /* Adjust content when sidepane that started hidden is opened */
    body.has-sidepane .sidepane[data-default-visible="false"].opened~.content-wrapper {
        margin-left: var(--sidepane-width-collapsed);
    }

    body.has-sidepane.sidepane-closed .content-wrapper {
        margin-left: 0;
    }

    /* Content wrapper scaling - containers inside scale naturally */
    body.has-sidepane .content-wrapper .main-container {
        margin-left: auto;
        margin-right: auto;
        max-width: min(1400px, 100%);
        width: 100%;
        box-sizing: border-box;
        padding-left: min(120px, 5%);
        padding-right: min(120px, 5%);
    }

    body.has-sidepane .content-wrapper .gift-list {
        margin-left: auto;
        margin-right: auto;
        max-width: min(1400px, 100%);
        width: 100%;
        box-sizing: border-box;
    }

    /* Page-specific content adjustments */
    body.has-sidepane .content-wrapper .gift-list-header-wrapper {
        max-width: min(800px, 100%);
        width: 100%;
        box-sizing: border-box;
    }

    body.has-sidepane .content-wrapper .add-product-form-card {
        max-width: min(800px, 100%);
        width: 100%;
        box-sizing: border-box;
    }

    body.has-sidepane .content-wrapper .explore-page {
        width: 100%;
        min-width: 0;
        max-width: min(1400px, 100%);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* Desktop: Add padding-top to push nav below header */
    .sidepane-nav {
        padding-top: 90px;
        /* 80px header + 24px spacing */
    }

    /* Hide overlay completely on desktop */
    .sidepane-overlay {
        display: none !important;
    }
}

/* Mobile: Hide sidepane by default, show as overlay when toggled */
@media screen and (max-width: 1024px) {

    /* Hide sidepane off-screen by default */
    .sidepane {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 220px;
        height: 100vh;
        padding-top: 5px;
        /* Space for mobile header */
        padding-bottom: 80px;
        /* Add this line */
        transform: translateX(-100%) !important;
        /* Hidden off-screen */
        z-index: 999 !important;
        /* Above header */
        overflow-y: auto !important;
        /* Allow scrolling */
        transition: transform 0.3s ease;
    }

    /* Show sidepane when .show class is added (hamburger clicked) */
    .sidepane.show {
        transform: translateX(0) !important;
        /* Slide in from left */
    }

    /* Dark backdrop overlay behind sidepane */
    .sidepane-overlay {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        /* Below sidepane, above content */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidepane-overlay.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* Reset desktop layout for mobile */
    body.has-sidepane {
        display: block !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    /* Content takes full width on mobile */
    body.has-sidepane .content-wrapper {
        margin-left: 0 !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    /* Adjust sidepane nav padding for mobile header */
    .sidepane-nav {
        padding-top: 70px !important;
        /* Account for mobile header + spacing */
    }
}

.logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo a {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #324848;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.logo-link {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #324848;
    text-decoration: none;
    letter-spacing: -0.01em;
}

/* Logo image: maroon via CSS mask for exact #561023 (matches account icon / brand). */
.logo--maroon .logo-image-mask {
    display: block;
    width: 110px;
    height: 40px;
    background-color: var(--maroon);
    -webkit-mask-image: var(--logo-mask-url);
    mask-image: var(--logo-mask-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.header-nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1;
}

.nav-links {
    display: none;
    /* Hide nav links, use hamburger menu instead */
    align-items: center;
    gap: 30px;
}

.nav-link:hover {
    color: #324848;
    /* Consistent green color matching share wishlist button */
}

.nav-link i {
    margin-right: 6px;
}

/* Hamburger menu - always visible on desktop for toggling */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Fixed width to prevent growth */
    height: 40px;
    /* Fixed height to prevent growth */
}

/* Always show hamburger on desktop */
@media screen and (min-width: 1025px) {
    .hamburger-menu {
        display: flex;
    }
}

.hamburger-menu span {
    width: 24px;
    height: 2px;
    background-color: #324848;
    transition: none;
}

/* Hamburger icon - positioned absolutely to overlap hamburger lines */
.hamburger-menu i {
    display: none;
}


.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0px;
    min-width: 260px;
    margin-top: 0;
    z-index: 1000;
    padding: 10px 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.header-nav-left {
    position: relative;
}

.mobile-menu.show {
    display: block;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 0.2s;
}

.mobile-menu-item:hover {
    background-color: #f5f5f5;
}

.mobile-menu-item i {
    width: 18px;
    color: #324848;
}


/* Add this to your existing style section or create one */
.currency-selector {
    position: relative;
    display: inline-block;
}

.currency-selector select {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 0px;
    padding: 2px 2px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: #324848;
    cursor: pointer;
    transition: all 0.3s;
}

.currency-selector select:hover {
    background-color: #f0f0f0;
    border-color: #324848;
}

.currency-selector select:focus {
    outline: none;
    border-color: #324848;
    box-shadow: 0 0 0 2px rgba(50, 72, 72, 0.2);
}

.currency-display {
    display: none;
}


.user-badge {
    background-color: var(--maroon);
    color: var(--cream);
    -webkit-mask: url('/static/assets/motifs/seal.svg') center/contain no-repeat;
    mask: url('/static/assets/motifs/seal.svg') center/contain no-repeat;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Nanum Myeongjo', serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.header-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    gap: 1rem;
    margin-left: auto;
    /* Push to the right end */
}

.nav-user-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Account Dropdown */
.account-dropdown-wrapper {
    position: relative;
    margin-left: 12px;
}

.account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0px;
    transition: background-color 0.2s;
}

.account-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.account-trigger .fa-chevron-down {
    font-size: 12px;
    color: #262e2e;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff !important;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1000;
}

.account-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.account-dropdown-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.account-dropdown-name {
    font-size: 15px;
    font-weight: 500;
    color: #262e2e;
    text-align: left;
}

.account-dropdown-email {
    font-size: 10px;
    font-weight: 500;
    color: #262e2e;
    text-align: left;
}

.account-dropdown-separator {
    height: 1px;
    background-color: #e3dcd6;
    margin: 0 8px;
}

.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #262e2e;
    font-size: 14px;
    transition: background-color 0.2s;
}

.account-dropdown-item:hover {
    background-color: #f5f1eb;
}

.account-dropdown-item i {
    width: 18px;
    font-size: 14px;
    color: #6b7280;
}

.account-dropdown-item:last-child {
    border-radius: 0px;
}

.logout-link:hover {
    text-decoration: underline;
}

/* ################################################# SIDEPANE NAVIGATION ###################################################### */
/* Sidepane styles moved to templates/components/sidepane.html */

@media screen and (max-width: 1024px) {

    .logo {
        order: 2;
        flex: 0 0 auto;
        /* Don't grow or shrink, stay at natural size */
        justify-content: flex-start;
        /* Left-align logo on mobile */
        margin: 0;
    }

    .header-nav-left {
        order: 1;
    }

    .header-nav-right {
        order: 3;
    }

    .hamburger-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1001;
        position: relative;
    }

    /* Sidepane mobile styles moved to templates/components/sidepane.html */

    .hamburger-menu span {
        width: 24px;
        height: 2px;
        background-color: #324848;
        transition: all 0.3s ease;
    }

    .header-nav-left .nav-links {
        display: none;
    }

    .logo {
        flex: 0 0 auto;
        /* Don't grow or shrink, stay at natural size */
        justify-content: flex-start;
        /* Left-align logo on mobile */
    }

    .header-nav-right {
        grid-column: 3;
        justify-content: flex-end;
    }

    /* Reduce gap between nav elements on mobile */
    .nav-links {
        gap: 15px;
    }

    .logo a {
        font-size: 1.5rem;
    }

    .logo-link {
        font-size: 1.5rem;
    }

    .logo span {
        font-size: 1.5rem;
    }

    /* Main content spacing */
    .hero-section {
        height: 70vh;
        min-height: 400px;
        margin-top: 56px;
        /* Account for fixed header on mobile */
    }

    /* Layered hero image effect for mobile */
    .hero-image-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: var(--hero-bg-image);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        filter: blur(15px);
        transform: scale(1.1);
        /* Slight scale to prevent blur edge artifacts */
    }

    .hero-image {
        width: 190%;
        /* max-width: 90%; */
        height: auto;
        max-height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: contain;
        object-position: center center;
        position: absolute;
        z-index: 2;
        /* Above the blurred background */
    }

    .scroll-down-arrow {
        bottom: calc(90vh * 0.15 - 100px);
        /* Position just below hero content on mobile */
    }

    .scroll-down-arrow svg {
        width: 100px;
        height: 100px;
    }

    .hero-title {
        font-size: 40px;
        letter-spacing: 2px;
    }

    .hero-subtitle {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .welcome-section {
        padding: 15px 20px;
        /* Increased from 14px to 15px (10% increase) */
    }

    .welcome-text {
        font-size: 20px;
        line-height: 1.5;
        /* Reduced from 1.7 to 1.5 */
    }

    .welcome-embellishment-top,
    .welcome-embellishment-bottom {
        margin: 0 auto 5px;
        /* Reduced from 8px to 5px (40% reduction) */
    }

    .welcome-embellishment-top svg,
    .welcome-embellishment-bottom svg {
        width: 150px;
        height: 22px;
    }

    .welcome-embellishment-bottom {
        margin: 5px auto 0;
        /* Reduced from 8px to 5px (40% reduction) */
    }

    .hero-content {
        padding: 0 15px;
        bottom: 15%;
    }

    .gift-list {
        padding: 40px 20px;
    }

    .sky-wrapper {
        padding-top: 40px !important;
        background: var(--page-bg);
    }

    /* Gift cards adjustments */
    .gift-card {
        flex-direction: column;
        align-items: center;
        padding: 15px;
        margin: 10px;
        width: 95%;
    }

    .reserved-card {
        flex-direction: column;
        align-items: center;
        padding: 15px;
        margin: 10px;
        width: 95%;
        height: auto;
        /* Allow height to adjust based on content */
    }

    .reserved-card .gift-content h2 {
        overflow-wrap: break-word;
        /* Allow text to break to prevent overflow */

    }

    .gift-card img {
        max-height: 150px;
        width: auto;
        max-width: 200px;
        margin: 0 auto 15px auto;
        align-self: center;
    }

    .card-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gift-content {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Buttons stack on mobile */
    .button,
    .button-unreserve,
    .button-reserve,
    .button-contribute {
        width: 100%;
        height: 50px;
        margin: 5px 0px;
        box-sizing: border-box;
    }

    .card-buttons button[disabled],
    .card-buttons .button-disabled,
    .card-buttons button.reserve-button:disabled {
        width: 100% !important;
        /* Use !important to override any other styles */
        margin: 5px 0;
        height: 50px;
        min-width: 100%;
        border-radius: 0px;
        display: block;
        box-sizing: border-box;
    }

    .tooltip {
        width: 100%;
        /* Make tooltip full width */
    }

    .tooltip .button-disabled {
        width: 100%;
        /* Make the button full width within tooltip */
    }

    /* Progress bar adjustment */
    .progress-bar-wrapper {
        width: 95%;
    }

    /* Navigation adjustments */

    .nav-user-wrapper {
        gap: 0.5rem;
        position: relative;
    }

    .nav-links {
        gap: 15px;
    }

    /* Hide desktop-only nav items on mobile */
    .desktop-only {
        display: none !important;
    }

    /* Mobile menu dropdown - full width on mobile */
    .mobile-menu {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) !important;
        border-radius: 0px;
        border-top: none !important;
        min-width: auto !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
        padding: 10px 0 !important;
        padding-top: 0 !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }

    .mobile-menu.show {
        display: block;
    }

    /* Mobile menu item styles are defined in base styles above */

    /* Hide hamburger menu on mobile - using bottom menu instead */
    .hamburger-menu {
        display: none !important;
    }

    /* Compact currency selector on mobile */
    .currency-selector {
        margin-right: 10px;
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    /* Hide the select dropdown visually on mobile, but keep it functional */
    .currency-selector select {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 2;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
    }

    /* Show the currency display on mobile */
    .currency-display {
        display: inline-block;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 0px;
        padding: 8px 12px;
        font-size: 18px;
        font-weight: 500;
        color: #324848;
        min-width: 45px;
        text-align: center;
        pointer-events: none;
        z-index: 1;
    }

    /* Add dropdown arrow indicator */
    .currency-selector::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #324848;
        z-index: 1;
    }

    .user-badge {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }


    /* MODAL */

    /* Login modal specific mobile adjustments */
    .modal-content.login-modal-content {
        padding-bottom: 10px !important;
        /* Reduce bottom padding on mobile */
    }

    /* Modal heading adjustments */
    .modal-content h3,
    .shagun-modal-content h3 {
        margin-top: 30px;
        /* Pushes heading down */
        margin-bottom: 20px;
        /* Adds space between heading and textarea */
    }

    /* Modal text inputs */
    .modal textarea,
    textarea.modal-textbox {
        width: 100%;
        height: 40%;
        font-size: 16px;
        /* Prevent zoom on iOS */
        padding: 10px;
        margin-top: 15px;
    }

    /* Modal number inputs */
    .modal input[type="number"] {
        width: 120px;
        font-size: 16px;
        padding: 10px;
    }

    /* Modal buttons */
    .modal .button,
    .modal .button-reserve,
    .modal .button-contribute,
    .button-shagun-contribute {
        width: auto;
        margin: 20px 0 8px 0;
        padding: 8px 16px;
        font-size: 16px;
        float: none !important;
        border: 1.5px solid #324848;
        background-color: white;
        color: #324848;
        border-radius: 0px;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        text-align: center;
        display: inline-block;
    }

    .modal .button-contribute:hover {
        background: #324848;
        color: white;
    }

    /* Modal close button */
    .modal-close {
        font-size: 24px;
        padding: 10px;
    }

    /* Amount box in contribution modal */
    .modal input[type="number"] {
        width: 100%;
        margin: 10px 0;
    }

    /* Shagun card mobile adjustments */
    .shagun-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .shagun-header h2 {
        margin: 0;
        font-size: 24px;
    }

    .button-shagun-contribute {
        font-size: 14px;
        padding: 6px 14px;
        border-radius: 0px;
        min-width: auto;
        width: auto;
        white-space: nowrap;
    }
}

/* TUTORIAL */

/* Tutorial Modals - Fixed Height Only */
.tutorial-modal .modal-content {
    height: 400px;
    width: 400px;
    position: relative;
    animation: none !important;
    transition: none !important;
}

img.tutorial-illust {
    height: 200px;
    /* desktop max width  */
    width: auto;
    display: block;
    margin: 0 auto 22px;
    /* center + gap below */
}

.tutorial-modal #tutorialModal4 .tutorial-illust-reserve,
#tutorialModal4 .tutorial-illust-reserve {
    transform: translateX(24px);
}

/* Tutorial illustration link */
a>img.tutorial-illust-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
    height: 200px;
    /* desktop max width  */
    width: auto;
    display: block;
    margin: 0 auto 22px;
}

a>img.tutorial-illust-link:hover {
    opacity: 0.85;
}

/* Close button positioning for tutorial modals */
.tutorial-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    float: none;
    z-index: 11;
}

.tutorial-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

/* Tutorial indicator dots */
.indicator-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 0px;
    background-color: #d0ccc6;
    /* empty/inactive circle */
    border: 2px solid #d0ccc6;
    margin: 0 6px;
    transition: all 0.2s ease;
}

.indicator-dot.active {
    background-color: #262e2e;
    /* filled/active circle */
    border-color: #262e2e;
}

.tutorial-login {
    background: #324848;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tutorial-login:hover {
    background: #2a3a3a;
    transform: scale(1.05);
}

.tutorial-close {
    min-width: 140px;
    display: inline-block;
    padding: 6px 16px;
    margin: 0;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1.5px solid #ddd;
    background-color: white;
    color: black;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.tutorial-close:hover {
    background-color: #c43434 !important;
    color: white;
}

/* Tutorial chevron navigation */
.tutorial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 0px;
    background: #e3dcd6;
    color: #262e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.tutorial-prev {
    left: 16px;
}

.tutorial-next {
    right: 16px;
}

.tutorial-nav[disabled],
.tutorial-nav:disabled {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #d0ccc6 !important;
    color: #999 !important;
    min-width: auto !important;
    border-radius: 0px;
    padding: 0 !important;
}

.tutorial-nav[disabled]:hover,
.tutorial-nav:disabled:hover {
    width: 36px !important;
    height: 36px !important;
    opacity: 0.5 !important;
    background: #d0ccc6 !important;
    transform: translateY(-50%) !important;
}

.tutorial-nav:hover {
    background: #324848;
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.tutorial-nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* Final slide CTA container */
.tutorial-final-cta {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

/* ################################################# WHATSAPP FLOAT BUTTON ###################################################### */

.hiw-float i {
    font-size: 40px;
    /* Adjust size (currently defaults to ~16px) */
    color: white;
    /* Change color - try #f2efec, #9b607c, or any brand color */
}

.hiw-float:hover i {
    color: #f2efec;
    /* Slightly different on hover for effect */
}

/* Add this style to ensure the container adapts to the icon size */
.hiw-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #9b607c;
    color: white;
    border-radius: 0px;
    padding: 3px 3px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Nanum Myeongjo', serif;
    width: fit-content;
    /* Makes container fit its content */
    box-sizing: border-box;
    /* Ensures padding doesn't affect overall width */
}

/* Ensure the text stays consistent regardless of icon size */


/* For mobile devices */
@media screen and (max-width: 1023px) {
    .hiw-float i {
        font-size: 40px;
        /* Adjust size (currently defaults to ~16px) */
        color: white;
        /* Change color - try #f2efec, #9b607c, or any brand color */
    }

    .hiw-float:hover i {
        color: #f2efec;
        /* Slightly different on hover for effect */
    }

    /* Add this style to ensure the container adapts to the icon size */
    .hiw-float {
        position: fixed;
        bottom: 40px;
        right: 40px;
        background-color: #9b607c;
        color: white;
        border-radius: 0px;
        padding: 3px 3px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        transition: all 0.3s ease;
        text-decoration: none;
        font-family: 'Nanum Myeongjo', serif;
        width: fit-content;
        /* Makes container fit its content */
        box-sizing: border-box;
        /* Ensures padding doesn't affect overall width */
    }

    /* Tutorial Modal Mobile Styles */
    .tutorial-modal .modal-content {
        height: auto;
        /* Let content determine height */
        min-height: 450px;
        /* Minimum height */
        max-height: 85vh;
        /* Don't exceed viewport */
        width: calc(100% - 40px);
        /* Full width minus margins */
        max-width: 380px;
        /* Cap maximum width */
        margin-top: 100px;
        /* Center with top spacing */
        padding: 30px 20px 20px;
        /* More top padding for close button */
        overflow-y: auto;
        /* Scroll if content too tall */
        position: relative;
        border-radius: 0px;
    }

    /* Adjust image size for mobile */
    img.tutorial-illust {
        height: 160px;
        max-width: 100%;
        margin: 50px auto 50px;
    }

    /* Per-slide mobile illustration controls (tune each independently) */
    #tutorialModal1 .tutorial-illust,
    #tutorialModal1 .tutorial-illust-link {
        transform: translateX(0px) scale(1.2);
        transform-origin: center center;
    }

    #tutorialModal2 .tutorial-illust,
    #tutorialModal2 .tutorial-illust-link {
        transform: translateX(0px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal3 .tutorial-illust,
    #tutorialModal3 .tutorial-illust-link {
        transform: translateX(0px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal4 .tutorial-illust,
    #tutorialModal4 .tutorial-illust-link {
        transform: translateX(20px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal5 .tutorial-illust,
    #tutorialModal5 .tutorial-illust-link {
        transform: translateX(20px) scale(1.5);
        transform-origin: center center;
    }

    #tutorialModal6 .tutorial-illust,
    #tutorialModal6 .tutorial-illust-link {
        transform: translateX(0px) scale(1.5);
        transform-origin: center center;
    }

    a>img.tutorial-illust-link {
        height: 160px;
        max-width: 100%;
        margin: 50px auto 50px;
    }

    /* Close button positioning */
    .tutorial-modal .modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        z-index: 11;
    }

    /* Text spacing */
    .tutorial-modal .modal-content p {
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Indicator dots */
    .tutorial-indicator {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    .indicator-dot {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }

    /* Chevron navigation */
    .tutorial-nav {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .tutorial-prev {
        left: 8px;
    }

    .tutorial-next {
        right: 8px;
    }


    .tutorial-nav[disabled],
    .tutorial-nav:disabled {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        background: #d0ccc6 !important;
        color: #999 !important;
        min-width: auto !important;
        border-radius: 0px;
        padding: 0 !important;
    }

    .tutorial-nav[disabled]:hover,
    .tutorial-nav:disabled:hover {
        width: 36px !important;
        height: 36px !important;
        opacity: 0.5 !important;
        background: #d0ccc6 !important;
        transform: translateY(-50%) !important;
    }

    /* Final CTA */
    .tutorial-final-cta {
        bottom: 55px;
        /* Above indicator dots */
    }

    .tutorial-login {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        background: #324848;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 0px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .tutorial-login:hover {
        background: #2a3a3a;
        transform: scale(1.05);
    }
}

/* ################################################# VIEW CONTRIBUTIONS PAGE ###################################################### */

.view-contributions-page {
    background-color: #f2efec;
    height: 100%;
    padding-top: 120px;
    /* Reduced from 80px since title section removed */
    padding-bottom: 40px;
    box-sizing: border-box;
    overflow: hidden;
}

.contributions-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 40px 76px 0 76px;
    margin-bottom: 32px;
}

.back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.back-button:hover {
    opacity: 0.7;
}

.back-button:active {
    opacity: 0.5;
}

.contributions-title {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 28px;
    color: #324848;
    margin: 0;
    letter-spacing: -0.56px;
}

.contributions-title-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.contributions-title-link:hover {
    opacity: 0.7;
}

.contributions-title-link:active {
    opacity: 0.5;
}

.contributions-content {
    padding: 0 76px;
    max-width: 1600px;
    margin: 0 auto;
}

.contributions-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.contributions-list-column {
    flex: 0 0 400px;
    max-width: 400px;
}

.total-contributions-section {
    background: rgba(227, 220, 214, 0.9);
    backdrop-filter: blur(2px);
    border-radius: 0px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 2px solid rgba(155, 96, 124, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.total-contributions-label {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 16px;
    color: #5a5a5a;
    margin: 0;
    letter-spacing: -0.32px;
}

.total-contributions-amount {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    font-size: 32px;
    color: #9b607c;
    margin: 0;
    letter-spacing: -0.64px;
}

.notes-card-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 600px;
}

.contributions-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.contribution-card {
    background: rgba(227, 220, 214, 0.8);
    backdrop-filter: blur(2px);
    border-radius: 0px;
    padding: 10px 12px;
    height: 95px;
    display: flex;
    align-items: center;
    gap: 13px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.contribution-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contribution-card.selected {
    background: rgba(227, 220, 214, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #9b607c;
}

.contribution-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    /* Allow text truncation */
}

.contribution-name-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.contribution-name {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 21px;
    color: #262e2e;
    margin: 0;
    letter-spacing: -0.42px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.contribution-gift-name {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 400;
    font-size: 14px;
    color: #6b7280;
    letter-spacing: -0.14px;
    max-width: 100%;
    min-width: 0;
}

.contribution-gift-name i {
    font-size: 12px;
    color: #9b607c;
    opacity: 0.7;
}

.contribution-gift-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-indicator {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.no-note-indicator {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    opacity: 0.3;
}

.contribution-amount-wrapper {
    flex-shrink: 1;
    min-width: 0;
    max-width: 50%;
    display: flex;
    justify-content: flex-end;
}

.contribution-amount {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    font-size: 21px;
    color: #9b607c;
    letter-spacing: -0.42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-state-message {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    color: #5a5a5a;
    margin: 0;
}

/* Notes Card Styles */
.notes-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.notes-card-container {
    position: relative;
    width: 345px;
    height: 535px;
    margin-bottom: 60px;
    overflow: visible;
}

.notes-card-yellow-svg-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 387px;
    height: 572px;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(-10deg);
    transform-origin: center center;
}

.notes-card-yellow-svg {
    width: 100%;
    height: 100%;
}

.notes-card-svg-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.notes-card-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.notes-card-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 37px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    pointer-events: none;
}

.notes-text,
.notes-signature {
    pointer-events: auto;
}

.notes-text {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
}

.notes-text.centered {
    align-items: center;
}

.notes-text p {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.201;
    color: white;
    letter-spacing: -0.42px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: center;
    width: 100%;
}

.notes-empty-message {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.notes-signature {
    text-align: right;
    margin-top: auto;
    max-width: 100%;
    min-width: 0;
}

.notes-signature p {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 26px;
    color: white;
    letter-spacing: -0.52px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.notes-navigation {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.notes-nav-button {
    width: 36px;
    height: 36px;
    border-radius: 0px;
    background-color: #324848;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.notes-nav-button:hover {
    background-color: #2a3a3a;
    transform: scale(1.1);
}

.notes-nav-button:active {
    transform: scale(0.95);
}

.notes-modal-overlay {
    display: none;
}

.notes-modal-close {
    display: none;
}

body.notes-modal-open {
    overflow: hidden;
}

body.notes-modal-open .notes-modal-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(50, 72, 72, 0.45);
    z-index: 1990;
}

body.notes-modal-open .notes-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0px;
    border: none;
    background: rgba(50, 72, 72, 0.85);
    color: #ffffff;
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

body.notes-modal-open .notes-modal-close:hover {
    background: rgba(50, 72, 72, 1);
    transform: scale(1.05);
}

body.notes-modal-open .notes-modal-close:active {
    transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .view-contributions-page {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-top: 80px;
        /* Reduced padding since title section removed */
        padding-bottom: 20px;
    }

    .contributions-content {
        padding: 0 20px;
        flex: 1;
        overflow: hidden;
    }

    .contributions-layout {
        flex-direction: column;
        gap: 30px;
        height: 100%;
    }

    .contributions-list-column {
        flex: 1;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .total-contributions-section {
        flex-shrink: 0;
    }

    .notes-card-column {
        display: none;
    }

    body.notes-modal-open .notes-card-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        inset: 0;
        padding: 24px 20px;
        z-index: 2001;
        overflow-y: auto;
        pointer-events: none;
    }

    body.notes-modal-open .notes-modal-close {
        margin-bottom: 12px;
        pointer-events: auto;
    }

    body.notes-modal-open .notes-card-wrapper {
        width: 100%;
        max-width: 320px;
        pointer-events: auto;
    }

    body.notes-modal-open .notes-card-container {
        position: relative;
        width: 100%;
        max-width: 320px;
        height: min(calc(100vh - 240px), 550px);
        max-height: min(calc(100vh - 240px), 550px);
        min-height: 450px;
        margin: 0 auto 24px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.notes-modal-open .notes-card-yellow-svg-wrapper {
        display: none;
    }

    body.notes-modal-open .notes-card-svg-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(0deg);
        z-index: 1;
        overflow: hidden;
    }

    body.notes-modal-open .notes-card-yellow-svg {
        display: none;
    }

    body.notes-modal-open .notes-card-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    body.notes-modal-open .notes-card-content {
        position: relative;
        padding: 37px 35px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        pointer-events: auto;
        z-index: 2;
    }

    body.notes-modal-open .notes-text {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
        min-height: 0;
        max-height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    body.notes-modal-open .notes-text.centered {
        align-items: center;
    }

    .contributions-grid {
        gap: 12px;
        flex: 1;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contribution-card {
        height: auto;
        min-height: 75px;
        padding: 12px;
    }

    .contribution-name {
        font-size: 18px;
    }

    .contribution-gift-name {
        font-size: 13px;
        margin-top: 3px;
    }

    .contribution-gift-name i {
        font-size: 11px;
    }

    .contribution-amount {
        font-size: 18px;
    }

    .notes-text p {
        font-size: 18px;
    }

    body.notes-modal-open .notes-text p {
        color: white;
        text-align: center;
        width: 100%;
    }

    body.notes-modal-open .notes-signature {
        text-align: right;
        flex-shrink: 0;
        margin-top: 16px;
        padding-bottom: 4px;
        max-width: 100%;
        min-width: 0;
    }

    body.notes-modal-open .notes-signature p {
        font-size: 22px;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    body.notes-modal-open .notes-navigation {
        margin-top: 24px;
        pointer-events: auto;
    }
}

/* ################################################# ACCOUNT SETTINGS PAGE ###################################################### */

.account-settings-container {
    display: flex;
    min-height: calc(100vh - 80px);
    margin-top: 80px;
    background: var(--cream);
}

/* Left Sidepane */
.account-sidepane {
    width: 250px;
    background: var(--cream);
    border-right: 1px solid #e0e0e0;
    padding: 20px 0;
    flex-shrink: 0;
}

.account-nav {
    display: flex;
    flex-direction: column;
}

.account-nav-item {
    padding: 16px 24px;
    color: #2c3e50;
    text-decoration: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.account-nav-item:hover {
    background-color: #f5f5f5;
    color: var(--maroon);
}

.account-nav-item.active {
    background-color: rgba(86, 16, 35, 0.08);
    color: var(--maroon);
    border-left-color: var(--maroon);
    font-weight: 600;
}

/* Main Content Area */
.account-main-content {
    flex: 1;
    padding: 40px 60px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.account-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 32px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.account-actions {
    display: flex;
    gap: 12px;
}

.btn-cancel,
.btn-save {
    padding: 10px 24px;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel {
    background-color: #f5f5f5;
    color: var(--maroon);
    border: 1px solid #e0e0e0;
}

.btn-cancel:hover {
    background-color: #e8e8e8;
}

.btn-save {
    background-color: var(--maroon);
    color: white;
}

.btn-save:hover {
    background-color: #45101c;
}

.btn-save:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Account Sections */
.account-section {
    animation: fadeIn 0.3s ease;
    background-color: #fafafa;
    padding: 32px;
    border-radius: 0px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.section-subtitle {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: #7f8c8d;
    margin: 0 0 32px 0;
}

/* Form Styles */
.form-group {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.form-group label {
    min-width: 180px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    padding-top: 12px;
    flex-shrink: 0;
}

.form-group label .required {
    color: #e74c3c;
    margin-left: 2px;
}

.form-group .form-input-wrapper .form-input.error,
.form-group .form-input.error,
.form-group .form-input-wrapper .form-select.error,
.form-group .form-select.error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-group .form-input-wrapper {
    flex: 1;
}

.form-group .form-input-wrapper .form-input,
.form-group .form-input-wrapper .form-select,
.form-group .form-select {
    width: 100%;
}

.form-group .form-input-wrapper .form-input,
.form-group .form-input-wrapper .form-select,
.form-group .form-input,
.form-group .form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: #2c3e50;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group .form-input-wrapper .form-input:focus,
.form-group .form-input-wrapper .form-select:focus,
.form-group .form-input:focus,
.form-group .form-select:focus {
    outline: none;
    border-color: #324848;
    box-shadow: 0 0 0 3px rgba(50, 72, 72, 0.1);
}

.form-select {
    background-color: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232c3e50' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-group .form-input-wrapper .form-input::placeholder,
.form-group .form-input::placeholder {
    color: #bdc3c7;
}

.form-group .form-input-wrapper .form-input[readonly],
.form-group .form-input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    color: #7f8c8d;
}

.form-group .form-input-wrapper .form-input[readonly]:focus,
.form-group .form-input[readonly]:focus {
    border-color: #e0e0e0;
    box-shadow: none;
}

.field-hint {
    display: block;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 4px;
    font-style: italic;
}

/* Phone Input Group */
.phone-input-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.phone-code-display {
    padding: 12px 16px;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 60px;
    text-align: center;
}

.phone-number {
    flex: 1;
}

/* Form Row (for side-by-side fields) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

/* Responsive Design */
@media (max-width: 1024px) {
    .account-settings-container {
        flex-direction: column;
        margin-top: 60px;
    }

    .account-sidepane {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 0;
    }

    .account-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .account-nav-item {
        padding: 12px 20px;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .account-nav-item.active {
        border-left: none;
        border-bottom-color: var(--maroon);
    }

    .account-main-content {
        padding: 24px 20px;
    }

    .account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .account-title {
        font-size: 24px;
    }

    .account-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-cancel,
    .btn-save {
        width: 100%;
    }

    .form-group {
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        min-width: auto;
        padding-top: 0;
        margin-bottom: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .form-row .form-group {
        margin-bottom: 20px;
    }

    .form-row:last-child .form-group:last-child {
        margin-bottom: 0;
    }

    .phone-input-group {
        flex-direction: row;
    }

    .phone-code-display {
        min-width: 50px;
    }

    .account-section {
        padding: 24px 20px 0 20px;
        margin-bottom: 0;
    }

    .account-section:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .account-section .form-group:last-child,
    .account-section .form-row:last-child {
        margin-bottom: 0;
    }

    .account-settings-container {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .account-main-content {
        padding: 24px 20px 0 20px;
        margin-bottom: 0;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group:last-child {
        margin-bottom: 0;
    }

    .form-row:last-child {
        margin-bottom: 0;
    }

    .form-row:last-child .form-group {
        margin-bottom: 0;
    }

    #account-settings-form {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .section-subtitle {
        margin-bottom: 20px;
    }

    /* Settlements table mobile styles */
    .settings-table-wrapper {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% + 40px);
    }

    .settings-table {
        min-width: 650px;
        /* Slightly wider on mobile for better readability */
    }

    .settings-table th,
    .settings-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .settings-table th {
        white-space: nowrap;
    }
}

/* Settlements table (account settings) */
.settings-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    min-width: 600px;
    /* Ensure table maintains minimum width for readability */
}

.settings-table th,
.settings-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: #2c3e50;
}

.settings-table thead th {
    background: #f5f5f5;
    color: #324848;
    font-weight: 600;
}

/* Standard Confirmation Modal - Reusable for all confirmation dialogs */
.confirmation-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 10000 !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.confirmation-modal.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.confirmation-modal-content {
    position: relative !important;
    overflow: hidden !important;
    background: var(--cream, #ede6dc) !important;
    border: 1.5px solid var(--maroon, #561023) !important;
    border-radius: 0px !important;
    box-shadow: 6px 6px 0 0 var(--coral, #e45558), -8px -6px 20px rgb(8 8 8 / 20%) !important;
    padding: 28px 28px 28px !important;
    max-width: 420px !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transform: translate3d(0, 14px, 0) scale(0.96);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirmation-modal.show .confirmation-modal-content {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
}

.confirmation-modal-content h2 {
    margin: 0 0 12px 0 !important;
    font-family: 'Cormorant Garamond', 'Nanum Myeongjo', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--maroon, #561023) !important;
    letter-spacing: -0.01em !important;
}

.confirmation-modal-content p {
    margin: 0 0 24px 0 !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 0.82rem !important;
    color: color-mix(in oklab, var(--maroon, #561023) 80%, transparent) !important;
    line-height: 1.5 !important;
}

.confirmation-modal-buttons {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.confirmation-modal-button {
    padding: 10px 22px !important;
    border-radius: 0px !important;
    border: 1.5px solid var(--maroon, #561023) !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.confirmation-modal-button-primary {
    background-color: var(--maroon, #561023) !important;
    color: #ffffff !important;
    box-shadow: 2.5px 2.5px 0 0 #3f0c1a !important;
}

.confirmation-modal-button-primary:hover {
    background-color: #3f0c1a !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 0 var(--coral, #e45558) !important;
}

.confirmation-modal-button-secondary {
    background-color: #ffffff !important;
    color: var(--maroon, #561023) !important;
    box-shadow: 2.5px 2.5px 0 0 var(--maroon, #561023) !important;
}

.confirmation-modal-button-secondary:hover {
    background-color: var(--cream, #ede6dc) !important;
    transform: translateY(-1px) !important;
    box-shadow: 3.5px 3.5px 0 0 var(--maroon, #561023) !important;
}

/* Mobile: bottom sheet */
@media (max-width: 768px) {
    .confirmation-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .confirmation-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-left: 1.5px solid var(--maroon, #561023) !important;
        border-right: 1.5px solid var(--maroon, #561023) !important;
        border-top: 1.5px solid var(--maroon, #561023) !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px rgba(86, 16, 35, 0.18) !important;
        padding: 20px 20px max(28px, calc(env(safe-area-inset-bottom) + 20px)) !important;
        transform: translate3d(0, 100%, 0) !important;
        opacity: 1 !important;
        transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .confirmation-modal.show .confirmation-modal-content {
        transform: translate3d(0, 0, 0) !important;
    }

    .confirmation-modal-buttons {
        flex-direction: row !important;
        gap: 10px !important;
    }

    .confirmation-modal-button {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* stale override block removed — rules above take precedence */

/* ================= Delete Wishlist Confirmation Modal ================ */
.delete-wishlist-confirmation-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 10000 !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.delete-wishlist-confirmation-modal.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.delete-wishlist-confirmation-popup {
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--cream, #ede6dc) !important;
    border: 0px !important;
    border-radius: 0px !important;
    padding: 36px 28px 28px !important;
    max-width: 400px !important;
    width: 90% !important;
    box-shadow: 6px 6px 0 0 var(--coral, #e45558), -8px -6px 20px rgb(8 8 8 / 20%) !important;
    font-family: 'Nanum Myeongjo', Georgia, serif !important;
    box-sizing: border-box !important;
    transform: translate3d(0, 14px, 0) scale(0.96);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.delete-wishlist-confirmation-modal.show .delete-wishlist-confirmation-popup {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1 !important;
}

.delete-wishlist-confirmation-popup h3 {
    margin: 0 0 10px 0 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--maroon, #561023) !important;
    letter-spacing: -0.01em !important;
}

.delete-wishlist-confirmation-popup p {
    margin: 0 0 20px 0 !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 0.78rem !important;
    color: color-mix(in oklab, var(--maroon, #561023) 80%, transparent) !important;
    line-height: 1.45 !important;
}

.delete-wishlist-confirmation-buttons {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.delete-wishlist-confirmation-button {
    padding: 9px 22px !important;
    border-radius: 0px !important;
    border: 1.5px solid var(--maroon, #561023) !important;
    font-family: 'DM Mono', ui-monospace, monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 2.5px 2.5px 0 0 #3f0c1a !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.delete-wishlist-confirmation-button.yes {
    background-color: var(--maroon, #561023) !important;
    color: #ffffff !important;
}

.delete-wishlist-confirmation-button.yes:hover {
    background-color: #3f0c1a !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 0 var(--coral, #e45558) !important;
}

.delete-wishlist-confirmation-button.no {
    background-color: #ffffff !important;
    color: var(--maroon, #561023) !important;
}

.delete-wishlist-confirmation-button.no:hover {
    background-color: var(--cream, #ede6dc) !important;
    transform: translateY(-1px) !important;
    box-shadow: 3.5px 3.5px 0 0 var(--maroon, #561023) !important;
}

/* Mobile: bottom sheet */
@media (max-width: 768px) {
    .delete-wishlist-confirmation-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .delete-wishlist-confirmation-popup {
        width: 100% !important;
        max-width: 100% !important;
        border-left: 1.5px solid var(--maroon, #561023) !important;
        border-right: 1.5px solid var(--maroon, #561023) !important;
        border-top: 1.5px solid var(--maroon, #561023) !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px rgba(86, 16, 35, 0.18) !important;
        padding: 20px 20px max(28px, calc(env(safe-area-inset-bottom) + 20px)) !important;
        transform: translate3d(0, 100%, 0) !important;
        opacity: 1 !important;
        transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .delete-wishlist-confirmation-modal.show .delete-wishlist-confirmation-popup {
        transform: translate3d(0, 0, 0) !important;
    }

    .delete-wishlist-confirmation-buttons {
        flex-direction: row !important;
    }

    .delete-wishlist-confirmation-button {
        flex: 1 !important;
    }

    /* Fix flex container for URL input on mobile */
    .customize-url-input-wrapper {
        flex-wrap: wrap !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .customize-url-prefix {
        font-size: 11px !important;
        padding: 10px 6px !important;
        white-space: normal !important;
        word-break: break-all !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .customize-url-input {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        font-size: 14px !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Stack prefix and input vertically on very small screens */
    @media (max-width: 400px) {
        .customize-url-input-wrapper {
            flex-direction: column !important;
        }

        .customize-url-prefix {
            width: 100% !important;
            border-radius: 0px;
            border-right: 1px solid #e3dcd6 !important;
            border-bottom: none !important;
            text-align: center;
        }

        .customize-url-input-cell {
            width: 100% !important;
        }

        .customize-url-input {
            width: 100% !important;
            border-radius: 0px;
            border-left: 1px solid #e3dcd6 !important;
        }
    }

    /* Mobile-friendly clear button: 44px min touch target */
    .customize-url-clear {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
        right: 4px;
        touch-action: manipulation;
    }

    .customize-url-input-cell .customize-url-input {
        padding-right: 52px !important;
    }
}

/* ================= Registry page overrides ================ */
body.registry-page .content-wrapper {
    height: auto !important;
    overflow-y: visible !important;
    min-height: 100vh;
}

body.registry-page .hero-section {
    margin-top: 60px;
}

/* ################################################# CRITICAL: NOTIFICATION PANEL ###################################################### */
/* activity_notification.css is deferred (media="print" -> "all" onload). Its hidden state for
     the server-rendered bell panel therefore does not apply on first paint, so the panel would
     flash open (and reflow the header) until the deferred sheet loads. These blocking rules hold
     the panel hidden + out of flow in the gap. Deferred .activity-panel.show (higher specificity)
     still wins to open it on click. */
.activity-bell-wrapper {
    position: relative;
}

.activity-panel {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

/* Prevent Chrome/Brave/Edge/Safari autofill from overriding background color & text color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--hzl-maroon, #561023) !important;
    caret-color: var(--hzl-maroon, #561023) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}