@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --vows-navy: #0A1A2F;
    --vows-navy-deep: #071424;
    --vows-navy-dark: #06111F;
    --vows-navy-2: #102744;
    --vows-gold: #C9A063;
    --vows-gold-2: #E8C777;
    --vows-gold-3: #AA7F3B;
    --vows-cream: #FAF8F5;
    --vows-cream-2: #F4ECDD;
    --vows-ink: #071424;
}

html,
body,
button,
input,
select,
textarea,
.btn,
.input,
.select,
.textarea,
.file-input,
.table,
.menu,
.modal,
.dropdown-content,
.wedding-body {
    font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Header avatar / brand circle */
.wedding-topbar .avatar > div,
.wedding-topbar .avatar .w-9,
.wedding-topbar .ring-rose-200 {
    overflow: hidden !important;
    border: 1px solid rgba(201, 160, 99, .45) !important;
    background: linear-gradient(135deg, var(--vows-navy), var(--vows-navy-2) 56%, var(--vows-gold)) !important;
    box-shadow: 0 0 0 2px rgba(201, 160, 99, .34), 0 12px 30px rgba(10, 26, 47, .20) !important;
    --tw-ring-color: rgba(201, 160, 99, .44) !important;
    --tw-ring-offset-color: var(--vows-cream) !important;
}

.wedding-topbar .avatar img {
    background: linear-gradient(135deg, var(--vows-navy), var(--vows-navy-2) 58%, var(--vows-gold)) !important;
}

.wedding-topbar .fa-ring,
.wedding-topbar .btn-ghost:hover,
.wedding-topbar .dropdown-content i {
    color: var(--vows-gold) !important;
}

/* Couple tabs / tabs hover */
.ux-tab-button:hover:not(.is-active),
.assistant-tab-button:hover:not(.is-active) {
    transform: translateY(-1px) !important;
    border-color: rgba(201, 160, 99, .36) !important;
    background: rgba(201, 160, 99, .13) !important;
    color: var(--vows-navy) !important;
    box-shadow: 0 12px 32px rgba(10, 26, 47, .08) !important;
}

html[data-theme="dark"] .ux-tab-button:hover:not(.is-active),
body[data-theme="dark"] .ux-tab-button:hover:not(.is-active),
html[data-theme="dark"] .assistant-tab-button:hover:not(.is-active),
body[data-theme="dark"] .assistant-tab-button:hover:not(.is-active) {
    border-color: rgba(201, 160, 99, .32) !important;
    background: rgba(201, 160, 99, .15) !important;
    color: var(--vows-gold-2) !important;
}

.ux-tab-button.is-active,
.assistant-tab-button.is-active {
    border-color: rgba(201, 160, 99, .55) !important;
    background: linear-gradient(135deg, var(--vows-navy), var(--vows-navy-2) 58%, var(--vows-gold)) !important;
    color: #fff !important;
    box-shadow: 0 18px 48px rgba(10, 26, 47, .22) !important;
}

/* Seating page: remove remaining old rose/pink visual residue */
#seatingPage .seating-top-command {
    border-color: rgba(201, 160, 99, .32) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(201, 160, 99, .20), transparent 26rem),
        linear-gradient(135deg, rgba(250, 248, 245, .92), rgba(244, 236, 221, .76)) !important;
    box-shadow: 0 24px 80px rgba(10, 26, 47, .13) !important;
}

#seatingPage .seating-tool-panel {
    border-color: rgba(201, 160, 99, .30) !important;
    background: linear-gradient(180deg, rgba(250, 248, 245, .92), rgba(244, 236, 221, .72)) !important;
    box-shadow: 0 24px 70px rgba(10, 26, 47, .12) !important;
}

#seatingPage .seating-stage-wrap {
    border-color: rgba(201, 160, 99, .34) !important;
    background:
        radial-gradient(circle at 50% 8%, rgba(201, 160, 99, .20), transparent 360px),
        radial-gradient(circle at 18% 88%, rgba(10, 26, 47, .10), transparent 300px),
        linear-gradient(135deg, rgba(250, 248, 245, .94), rgba(244, 236, 221, .84)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 30px 100px rgba(10,26,47,.15) !important;
}

#seatingPage .seating-stage-wrap:fullscreen {
    background:
        radial-gradient(circle at 50% 6%, rgba(201, 160, 99, .22), transparent 34rem),
        radial-gradient(circle at 10% 88%, rgba(10, 26, 47, .14), transparent 32rem),
        linear-gradient(135deg, #FAF8F5, #F4ECDD 45%, #EEF3FA) !important;
}

#seatingPage .seating-canvas {
    background-color: rgba(250, 248, 245, .64) !important;
    background-image:
        linear-gradient(rgba(201, 160, 99, .15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 160, 99, .15) 1px, transparent 1px),
        linear-gradient(rgba(10, 26, 47, .045) 2px, transparent 2px),
        linear-gradient(90deg, rgba(10, 26, 47, .045) 2px, transparent 2px),
        radial-gradient(circle at 50% 10%, rgba(201, 160, 99, .16), transparent 320px) !important;
}

#seatingPage .seating-node.is-selected {
    filter: drop-shadow(0 0 24px rgba(201, 160, 99, .52)) !important;
}

#seatingPage .scene-table,
#seatingPage .scene-chair,
#seatingPage .scene-note,
#seatingPage .scene-aisle,
#seatingPage .scene-lounge,
#seatingPage .scene-dj,
#seatingPage .scene-photo,
#seatingPage .scene-gift,
#seatingPage .scene-entrance,
#seatingPage .scene-restroom,
#seatingPage .scene-kids,
#seatingPage .scene-security,
#seatingPage .scene-emergency {
    border-color: rgba(201, 160, 99, .35) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,236,221,.84)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 22px 52px rgba(10,26,47,.14) !important;
}

#seatingPage .scene-table::before,
#seatingPage .scene-chair::after,
#seatingPage .scene-aisle::before {
    border-color: rgba(201, 160, 99, .42) !important;
}

#seatingPage .scene-table-chair-dot,
#seatingPage .scene-chair::before {
    border-color: #fff !important;
    background: linear-gradient(135deg, var(--vows-gold-2), var(--vows-gold)) !important;
    box-shadow: 0 10px 24px rgba(201,160,99,.28) !important;
}

#seatingPage .scene-aisle {
    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.48)),
        repeating-linear-gradient(180deg, rgba(201,160,99,.30) 0 28px, rgba(10,26,47,.08) 28px 56px) !important;
    box-shadow: 0 0 0 10px rgba(201,160,99,.08), 0 24px 60px rgba(10,26,47,.13) !important;
}

#seatingPage .scene-aisle::after,
#seatingPage .scene-icon,
#seatingPage .scene-chip,
#seatingPage [class*="text-rose-"],
#seatingPage [class*="text-pink-"] {
    color: var(--vows-gold) !important;
}

#seatingPage [class*="bg-rose-"],
#seatingPage [class*="bg-pink-"] {
    background-color: rgba(201, 160, 99, .14) !important;
}

#seatingPage [class*="border-rose-"],
#seatingPage [class*="border-pink-"] {
    border-color: rgba(201, 160, 99, .34) !important;
}

#seatingPage [class*="shadow-rose-"],
#seatingPage [class*="shadow-pink-"] {
    --tw-shadow-color: rgba(10, 26, 47, .16) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

/* Budget modal: keep footer actions visible and responsive */
#createModal.modal {
    padding: .75rem !important;
}

#createModal .budget-modal {
    width: min(96vw, 72rem) !important;
    max-width: 72rem !important;
    max-height: min(92vh, 920px) !important;
    overflow: hidden !important;
}

#createModal .budget-modal-grid {
    height: min(92vh, 920px) !important;
    max-height: inherit !important;
    min-height: 0 !important;
}

#createModal .budget-modal-grid > section {
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
}

#createModal .budget-modal-grid > section > .max-h-\[76vh\] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

#createModal .budget-modal-grid > section > .border-t {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    flex-shrink: 0 !important;
    border-color: rgba(201, 160, 99, .24) !important;
    background: rgba(250, 248, 245, .96) !important;
    box-shadow: 0 -18px 45px rgba(10, 26, 47, .10) !important;
}

#createModal #itemSubmitButton {
    min-width: 11rem !important;
    background-image: linear-gradient(135deg, var(--vows-navy), var(--vows-navy-2) 58%, var(--vows-gold)) !important;
}

@media (max-width: 1024px) {
    #createModal .budget-modal {
        width: min(96vw, 46rem) !important;
        max-height: 94vh !important;
    }

    #createModal .budget-modal-grid {
        height: 94vh !important;
        grid-template-columns: 1fr !important;
    }

    #createModal .budget-modal-rail {
        min-height: auto !important;
        padding: 1.25rem !important;
    }

    #createModal .budget-modal-rail h3 {
        font-size: 1.75rem !important;
    }

    #createModal .budget-modal-rail p:last-child {
        display: none !important;
    }
}

@media (max-width: 640px) {
    #createModal.modal {
        padding: .35rem !important;
        align-items: stretch !important;
    }

    #createModal .budget-modal {
        width: calc(100vw - .7rem) !important;
        max-width: calc(100vw - .7rem) !important;
        max-height: calc(100vh - .7rem) !important;
        border-radius: 1.1rem !important;
    }

    #createModal .budget-modal-grid {
        height: calc(100vh - .7rem) !important;
    }

    #createModal .budget-modal-rail {
        display: none !important;
    }

    #createModal .budget-modal-grid > section > .flex.items-start {
        padding: 1rem !important;
    }

    #createModal .budget-modal-grid > section > .max-h-\[76vh\] {
        padding: 1rem !important;
    }

    #createModal .budget-modal-grid > section > .border-t {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: .75rem !important;
        padding: 1rem !important;
    }

    #createModal .budget-modal-grid > section > .border-t .btn,
    #createModal #itemSubmitButton {
        width: 100% !important;
        min-height: 3rem !important;
    }
}