/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    color: #292724;
    background: #fdfcf9;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

.container {
    width: min(1180px, 90%);
    margin: 0 auto;
}

.section {
    padding: 120px 0;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(253, 252, 249, 0.92);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(41, 39, 36, 0.08);
}

.navbar-content {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 25px;
    font-weight: bold;

    letter-spacing: -1px;
}

.logo span {
    font-style: italic;
    font-weight: normal;
}

.nav-menu {
    display: flex;
    align-items: center;

    gap: 35px;
}

.nav-link {
    position: relative;

    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #666;

    transition: 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: #292724;
}

.nav-link.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 1px;

    background: #292724;
}

.nav-button {
    font-family: Arial, sans-serif;

    font-size: 12px;

    padding: 11px 20px;

    border: 1px solid #292724;

    transition: 0.3s;
}

.nav-button:hover {
    background: #292724;
    color: #fff;
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    min-height: 100vh;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(220, 210, 190, 0.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(205, 195, 175, 0.3),
            transparent 30%
        ),
        #f4f0e8;
}

.hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border: 1px solid rgba(41, 39, 36, 0.12);

    border-radius: 50%;

    top: 10%;
    right: -150px;
}

.hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(41, 39, 36, 0.1);

    border-radius: 50%;

    bottom: -150px;
    left: -100px;
}

.hero-content {
    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 850px;

    padding-top: 80px;
}

.hero-label {
    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 5px;

    color: #777;

    margin-bottom: 28px;
}

.hero h1 {
    font-size: clamp(48px, 7vw, 90px);

    font-weight: normal;

    line-height: 0.98;

    letter-spacing: -3px;

    margin-bottom: 35px;
}

.hero h1 span {
    display: block;

    font-style: italic;

    font-weight: normal;
}

.hero-description {
    max-width: 580px;

    margin: 0 auto 40px;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.8;

    color: #6d6962;
}

.hero-buttons {
    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


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

.btn {
    display: inline-flex;

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

    min-width: 165px;

    padding: 14px 25px;

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    transition: 0.3s;
}

.btn-primary {
    background: #292724;

    color: #fff;

    border: 1px solid #292724;
}

.btn-primary:hover {
    background: #4a4742;

    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;

    color: #292724;

    border: 1px solid #292724;
}

.btn-outline:hover {
    background: #292724;

    color: #fff;

    transform: translateY(-2px);
}

.btn-light {
    background: #fdfcf9;

    color: #292724;

    border: 1px solid #fdfcf9;
}

.btn-light:hover {
    background: transparent;

    color: #fff;

    transform: translateY(-2px);
}


/* =========================================
   HERO SCROLL
========================================= */

.hero-scroll {
    position: absolute;

    top: calc(100% + 50px);
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #888;

    white-space: nowrap;
}

.scroll-line {
    width: 1px;
    height: 35px;

    background: #aaa;
}


/* =========================================
   SECTION LABEL
========================================= */

.section-label {
    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #8b847a;

    margin-bottom: 20px;
}


/* =========================================
   INTRO
========================================= */

.intro {
    background: #fdfcf9;
}

.intro-content {
    max-width: 850px;

    text-align: center;
}

.intro h2 {
    font-size: clamp(40px, 6vw, 72px);

    font-weight: normal;

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 35px;
}

.intro h2 em {
    font-weight: normal;

    color: #81786d;
}

.intro p {
    max-width: 620px;

    margin: 0 auto;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.9;

    color: #777;
}


/* =========================================
   TEMPLATE
========================================= */

.template-section {
    background: #f0ede6;
}

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;
}

.section-heading h2 {
    font-size: clamp(35px, 5vw, 58px);

    font-weight: normal;

    line-height: 1;

    letter-spacing: -2px;
}

.section-heading-description {
    max-width: 330px;

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.8;

    color: #777;
}

.template-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.template-card {
    background: #fdfcf9;

    border: 1px solid rgba(41, 39, 36, 0.08);

    transition: 0.4s;
}

.template-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgba(41, 39, 36, 0.1);
}

.template-preview {
    height: 430px;

    display: flex;

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

    position: relative;

    overflow: hidden;
}

.template-preview::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 330px;

    border: 1px solid rgba(255,255,255,0.5);
}

.template-preview.elegant {
    background:
        linear-gradient(
            135deg,
            #c8baa5,
            #e5ded2
        );
}

.template-preview.modern {
    background:
        linear-gradient(
            135deg,
            #3f403d,
            #77766f
        );

    color: #fff;
}

.template-preview.floral {
    background:
        linear-gradient(
            135deg,
            #b6aa96,
            #e3ddd1
        );
}

.preview-content {
    position: relative;

    z-index: 2;

    text-align: center;
}

.preview-content small {
    display: block;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    margin: 12px 0;
}

.preview-content strong {
    display: block;

    font-size: 45px;

    font-weight: normal;

    line-height: 1;
}

.preview-content strong span {
    font-style: italic;

    margin: 0 8px;
}

.template-card-info {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 22px;
}

.template-card-info h3 {
    font-size: 22px;

    font-weight: normal;

    margin-bottom: 3px;
}

.template-card-info p {
    font-family: Arial, sans-serif;

    font-size: 11px;

    color: #888;
}

.template-button {
    padding: 9px 15px;

    background: transparent;

    border: 1px solid #aaa;

    font-family: Arial, sans-serif;

    font-size: 10px;

    cursor: pointer;

    transition: 0.3s;
}

.template-button:hover {
    background: #292724;

    border-color: #292724;

    color: #fff;
}

.template-more {
    text-align: center;

    margin-top: 50px;
}

.text-button {
    border: none;

    background: transparent;

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    color: #555;
}

.text-button span {
    margin-left: 10px;

    font-size: 16px;
}

.text-button:hover {
    color: #000;
}


/* =========================================
   FEATURES
========================================= */

.features-section {
    background: #fdfcf9;
}

.section-heading.centered {
    display: block;

    text-align: center;

    max-width: 700px;

    margin: 0 auto 65px;
}

.section-heading.centered h2 {
    margin-bottom: 20px;
}

.section-heading.centered > p:last-child {
    max-width: 500px;

    margin: 0 auto;

    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #777;
}

.features-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;
}

.feature-card {
    padding: 40px;

    border-top: 1px solid #ddd;

    border-right: 1px solid #ddd;
}

.feature-card:first-child {
    border-left: 1px solid #ddd;
}

.feature-number {
    font-family: Arial, sans-serif;

    font-size: 11px;

    color: #999;

    margin-bottom: 55px;
}

.feature-card h3 {
    font-size: 25px;

    font-weight: normal;

    margin-bottom: 15px;
}

.feature-card p {
    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.8;

    color: #777;
}


/* =========================================
   ABOUT
========================================= */

.about-section {
    background: #292724;

    color: #fdfcf9;
}

.about-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}

.about-section .section-label {
    color: #aaa;
}

.about-section h2 {
    font-size: clamp(45px, 6vw, 75px);

    font-weight: normal;

    line-height: 1;

    letter-spacing: -3px;
}

.about-text {
    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 2;

    color: #bdbab5;
}

.about-text p {
    margin-bottom: 25px;
}


/* =========================================
   CTA
========================================= */

.cta-section {
    padding: 150px 0;

    background:
        linear-gradient(
            rgba(112, 101, 87, 0.88),
            rgba(72, 65, 57, 0.95)
        );

    color: #fff;

    text-align: center;
}

.cta-content {
    max-width: 700px;
}

.cta-section .section-label {
    color: #d5d0c9;
}

.cta-section h2 {
    font-size: clamp(50px, 7vw, 85px);

    font-weight: normal;

    line-height: 0.95;

    letter-spacing: -3px;

    margin-bottom: 25px;
}

.cta-section p:not(.section-label) {
    font-family: Arial, sans-serif;

    font-size: 14px;

    color: #d7d3ce;

    margin-bottom: 35px;
}


/* =========================================
   FOOTER
========================================= */

.footer {
    padding: 55px 0 30px;

    background: #1c1b19;

    color: #aaa;
}

.footer-content {
    text-align: center;
}

.footer .logo {
    color: #fff;

    margin-bottom: 10px;
}

.footer p {
    font-family: Arial, sans-serif;

    font-size: 12px;

    color: #777;
}

.footer-line {
    width: 100%;

    height: 1px;

    background: #333;

    margin: 35px 0 25px;
}

.footer small {
    font-family: Arial, sans-serif;

    font-size: 10px;

    color: #666;
}

/* =========================================
   FOOTER CREDIT
========================================= */

.footer-credit {
    margin-top: 12px;

    font-family: Arial, sans-serif;

    font-size: 11px;

    color: #666;
}

.footer-credit a {
    color: #aaa;

    text-decoration: none;

    transition: 0.3s;
}

.footer-credit a:hover {
    color: #fff;

    text-decoration: underline;
}

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

.auth-page {
    min-height: 100vh;

    background: #fdfcf9;
}

.auth-container {
    min-height: 100vh;

    display: grid;

    grid-template-columns: 1fr 1fr;
}


/* =========================================
   AUTH VISUAL
========================================= */

.auth-visual {
    position: relative;

    min-height: 100vh;

    display: flex;

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

    padding: 60px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(220, 210, 190, 0.5),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(200, 190, 170, 0.4),
            transparent 35%
        ),
        #e8e1d5;
}

.auth-visual::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border: 1px solid rgba(41, 39, 36, 0.12);

    border-radius: 50%;
}

.auth-visual::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border: 1px solid rgba(41, 39, 36, 0.1);

    border-radius: 50%;
}

.auth-visual-content {
    position: relative;

    z-index: 2;

    max-width: 500px;

    text-align: center;
}

.auth-visual-content h1 {
    font-size: clamp(45px, 5vw, 70px);

    font-weight: normal;

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 30px;
}

.auth-visual-content h1 em {
    color: #766e64;

    font-weight: normal;
}

.auth-visual-content > p:last-child {
    max-width: 400px;

    margin: auto;

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.8;

    color: #777;
}


/* =========================================
   AUTH FORM
========================================= */

.auth-form-section {
    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px;
}

.auth-form-wrapper {
    width: 100%;

    max-width: 430px;
}

.auth-logo {
    display: inline-block;

    font-size: 25px;

    font-weight: bold;

    letter-spacing: -1px;

    margin-bottom: 70px;
}

.auth-logo span {
    font-style: italic;

    font-weight: normal;
}

.auth-heading {
    margin-bottom: 35px;
}

.auth-heading h2 {
    font-size: 42px;

    font-weight: normal;

    line-height: 1;

    letter-spacing: -1px;

    margin-bottom: 15px;
}

.auth-heading > p:last-child {
    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #777;
}


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

.auth-form {
    display: flex;

    flex-direction: column;

    gap: 22px;
}

.form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.form-group label,
.password-label label {
    font-family: Arial, sans-serif;

    font-size: 11px;

    color: #555;
}

.form-group input {
    width: 100%;

    height: 50px;

    padding: 0 15px;

    background: #fff;

    border: 1px solid #d8d5cf;

    outline: none;

    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #292724;

    transition: 0.3s;
}

.form-group input::placeholder {
    color: #aaa;
}

.form-group input:focus {
    border-color: #292724;

    box-shadow:
        0 0 0 3px rgba(41, 39, 36, 0.05);
}

.password-label {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.password-label a {
    font-family: Arial, sans-serif;

    font-size: 10px;

    color: #777;
}

.password-label a:hover {
    color: #292724;
}


/* =========================================
   AUTH BUTTON
========================================= */

.auth-submit {
    width: 100%;

    height: 52px;

    margin-top: 8px;

    border: 1px solid #292724;

    background: #292724;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition: 0.3s;
}

.auth-submit:hover {
    background: #4a4742;

    transform: translateY(-2px);
}


/* =========================================
   DIVIDER
========================================= */

.auth-divider {
    display: flex;

    align-items: center;

    gap: 15px;

    margin: 30px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #ddd;
}

.auth-divider span {
    font-family: Arial, sans-serif;

    font-size: 10px;

    color: #aaa;
}


/* =========================================
   REGISTER
========================================= */

.auth-register {
    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 12px;

    color: #777;
}

.auth-register a {
    color: #292724;

    font-weight: bold;
}

.auth-register a:hover {
    text-decoration: underline;
}


/* =========================================
   BACK HOME
========================================= */

.back-home {
    display: block;

    text-align: center;

    margin-top: 30px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 1px;

    color: #999;

    text-transform: uppercase;

    transition: 0.3s;
}

.back-home:hover {
    color: #292724;
}


/* =========================================
   AUTH RESPONSIVE
========================================= */

@media (max-width: 800px) {

    .auth-container {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        display: none;
    }

    .auth-form-section {
        min-height: 100vh;

        padding: 40px 25px;
    }

    .auth-logo {
        margin-bottom: 50px;
    }

}

/* =========================================================
   CUSTOMER DASHBOARD
========================================================= */

.dashboard-page {
    min-height: 100vh;
    background: #f8f6f2;
    color: #2d2a26;
}


/* =========================================================
   DASHBOARD NAVBAR
========================================================= */

.dashboard-navbar {
    width: 100%;
    min-height: 78px;

    padding: 0 6%;

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

    background: #ffffff;

    border-bottom: 1px solid #e8e3dc;
}


.dashboard-logo {
    font-family: Georgia, serif;

    font-size: 26px;
    font-weight: 500;

    color: #2d2a26;
}


.dashboard-logo span {
    font-style: italic;
    color: #9b8063;
}


.dashboard-user {
    display: flex;
    align-items: center;
    gap: 12px;
}


.user-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    background: #e8dfd3;

    color: #725b43;

    font-family: Georgia, serif;

    font-size: 17px;
}


.user-info {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.user-info strong {
    font-size: 14px;
    font-weight: 600;
}


.user-info small {
    font-size: 12px;
    color: #88827b;
}


.logout-button {
    margin-left: 12px;

    padding: 9px 16px;

    border: 1px solid #d8d0c6;

    background: transparent;

    border-radius: 4px;

    cursor: pointer;

    font-size: 12px;

    transition: 0.3s;
}


.logout-button:hover {
    background: #2d2a26;
    color: #ffffff;
}


/* =========================================================
   DASHBOARD MAIN
========================================================= */

.dashboard-main {
    width: 88%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 65px 0 90px;
}


/* =========================================================
   WELCOME
========================================================= */

.dashboard-welcome {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;
}


.dashboard-welcome h1 {
    margin: 10px 0;

    font-family: Georgia, serif;

    font-size: clamp(32px, 4vw, 52px);

    font-weight: 400;

    line-height: 1.1;
}


.dashboard-welcome h1 em {
    color: #9b8063;
}


.dashboard-welcome > div > p:last-child {
    color: #817a72;

    margin: 0;

    line-height: 1.7;
}


.dashboard-primary-button {
    padding: 14px 22px;

    border: none;

    background: #2d2a26;

    color: #ffffff;

    cursor: pointer;

    border-radius: 3px;

    font-size: 13px;

    letter-spacing: 0.04em;

    transition: 0.3s;

    white-space: nowrap;
}


.dashboard-primary-button:hover {
    background: #9b8063;

    transform: translateY(-2px);
}


/* =========================================================
   STATISTICS
========================================================= */

.dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin-bottom: 70px;
}


.dashboard-card {
    background: #ffffff;

    border: 1px solid #e9e4de;

    padding: 28px;

    min-height: 145px;
}


.dashboard-card-label {
    display: block;

    font-size: 10px;

    letter-spacing: 0.15em;

    color: #9b8063;

    margin-bottom: 12px;
}


.dashboard-card strong {
    display: block;

    font-family: Georgia, serif;

    font-size: 32px;

    font-weight: 400;

    margin-bottom: 5px;
}


.dashboard-card p {
    margin: 0;

    color: #8b857d;

    font-size: 13px;
}


/* =========================================================
   INVITATION SECTION
========================================================= */

.invitation-section {
    margin-top: 20px;
}


.section-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 25px;
}


.section-heading h2 {
    margin: 8px 0 0;

    font-family: Georgia, serif;

    font-size: 32px;

    font-weight: 400;
}


.text-button {
    border: none;

    background: transparent;

    cursor: pointer;

    color: #80694f;

    font-size: 13px;

    padding: 8px;
}


.text-button:hover {
    text-decoration: underline;
}


/* =========================================================
   EMPTY INVITATION
========================================================= */

.empty-invitation {
    background: #ffffff;

    border: 1px solid #e8e3dc;

    min-height: 350px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 40px;
}


.empty-icon {
    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: #f1ebe4;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    color: #9b8063;

    margin-bottom: 20px;
}


.empty-invitation h3 {
    font-family: Georgia, serif;

    font-size: 25px;

    font-weight: 400;

    margin: 0 0 10px;
}


.empty-invitation p {
    max-width: 430px;

    color: #88827b;

    font-size: 14px;

    line-height: 1.7;

    margin: 0 0 25px;
}


/* =========================================================
   FOOTER
========================================================= */

.dashboard-footer {
    border-top: 1px solid #e8e3dc;

    padding: 25px 20px;

    text-align: center;

    background: #ffffff;
}


.dashboard-footer p {
    margin: 0;

    color: #918a82;

    font-size: 12px;
}


.dashboard-footer a {
    color: #80694f;

    text-decoration: none;

    font-weight: 600;
}


.dashboard-footer a:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .dashboard-navbar {
        padding: 0 5%;
    }


    .dashboard-user {
        gap: 7px;
    }


    .user-info {
        display: none;
    }


    .logout-button {
        margin-left: 5px;
    }


    .dashboard-main {
        width: 90%;

        padding-top: 45px;
    }


    .dashboard-welcome {
        align-items: flex-start;

        flex-direction: column;
    }


    .dashboard-stats {
        grid-template-columns:
            1fr;
    }


    .section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .empty-invitation {
        min-height: 300px;
    }

}

/* =========================================================
   CREATE INVITATION
========================================================= */

.invitation-form-page {
    width: 88%;
    max-width: 900px;

    margin: 0 auto;

    padding: 55px 0 80px;
}


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

.invitation-form-header {
    margin-bottom: 40px;
}


.invitation-form-header .back-home {
    display: inline-block;

    margin-bottom: 35px;
}


.invitation-form-header h1 {
    font-family: Georgia, serif;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 400;

    margin: 10px 0;
}


.invitation-form-header > p:last-child {
    color: #817a72;

    line-height: 1.7;

    margin: 0;
}


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

.invitation-form {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


.invitation-form-card {
    background: #ffffff;

    border: 1px solid #e7e1da;

    padding: 35px;
}


.form-card-heading {
    display: flex;

    gap: 20px;

    align-items: flex-start;

    margin-bottom: 30px;

    padding-bottom: 22px;

    border-bottom: 1px solid #eee9e3;
}


.form-card-heading > span {
    font-family: Georgia, serif;

    font-size: 18px;

    color: #9b8063;
}


.form-card-heading h2 {
    font-family: Georgia, serif;

    font-size: 25px;

    font-weight: 400;

    margin: 0 0 5px;
}


.form-card-heading p {
    margin: 0;

    font-size: 13px;

    color: #8b857d;
}


/* =========================================================
   FORM GRID
========================================================= */

.form-grid {
    display: grid;

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

    gap: 20px;
}


.invitation-form .form-group {
    margin-bottom: 20px;
}


.invitation-form .form-group:last-child {
    margin-bottom: 0;
}


.invitation-form label {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 600;

    color: #4b4742;
}


.invitation-form input,
.invitation-form textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dcd5cc;

    background: #fbfaf8;

    padding: 13px 14px;

    border-radius: 2px;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    color: #2d2a26;

    transition: 0.25s;
}


.invitation-form input:focus,
.invitation-form textarea:focus {
    border-color: #9b8063;

    background: #ffffff;
}


.invitation-form textarea {
    resize: vertical;

    line-height: 1.6;
}


.form-help {
    display: block;

    margin-top: 7px;

    font-size: 11px;

    color: #99928a;
}


/* =========================================================
   SLUG
========================================================= */

.slug-input {
    display: flex;

    align-items: stretch;

    border: 1px solid #dcd5cc;

    background: #fbfaf8;
}


.slug-input span {
    display: flex;

    align-items: center;

    padding: 0 12px;

    color: #8f887f;

    font-size: 13px;

    background: #f1ece6;

    border-right: 1px solid #dcd5cc;

    white-space: nowrap;
}


.slug-input input {
    border: none;

    background: transparent;

    flex: 1;
}


.slug-input input:focus {
    border: none;
}


/* =========================================================
   ACTIONS
========================================================= */

.invitation-form-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    padding-top: 10px;
}


.cancel-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border: 1px solid #d8d0c6;

    background: transparent;

    color: #5f5952;

    text-decoration: none;

    border-radius: 3px;

    font-size: 13px;

    transition: 0.3s;
}


.cancel-button:hover {
    background: #ffffff;

    border-color: #9b8063;

    color: #80694f;
}


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

#saveInvitationButton:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}


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

@media (max-width: 700px) {

    .invitation-form-page {
        width: 90%;

        padding-top: 35px;
    }


    .invitation-form-card {
        padding: 25px 20px;
    }


    .form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .form-card-heading {
        gap: 13px;
    }


    .form-card-heading h2 {
        font-size: 22px;
    }


    .slug-input span {
        padding: 0 8px;

        font-size: 11px;
    }


    .invitation-form-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .invitation-form-actions
    .dashboard-primary-button,
    .cancel-button {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

}

/* =========================================================
   INVITATION LIST
========================================================= */

.invitation-list {
    display: grid;

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

    gap: 22px;
}


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

.invitation-card {
    background: #ffffff;

    border: 1px solid #e7e1da;

    overflow: hidden;

    transition: 0.3s;
}


.invitation-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(50, 40, 30, 0.08);
}


/* =========================================================
   IMAGE / COVER
========================================================= */

.invitation-card-image {
    height: 220px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e9e0d5,
            #f7f3ee
        );

    overflow: hidden;
}


.invitation-card-image::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    border: 1px solid
        rgba(130, 105, 80, 0.35);

    border-radius: 50%;
}


.invitation-card-image::after {
    content: "";

    position: absolute;

    width: 165px;
    height: 165px;

    border: 1px solid
        rgba(130, 105, 80, 0.25);

    border-radius: 50%;
}


.invitation-card-monogram {
    position: relative;

    z-index: 2;

    font-family: Georgia, serif;

    font-size: 42px;

    font-style: italic;

    color: #735d47;

    letter-spacing: 5px;
}


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

.invitation-card-overlay {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 3;
}


.invitation-card-overlay span {
    display: inline-block;

    padding: 6px 9px;

    background: rgba(
        255,
        255,
        255,
        0.85
    );

    color: #80694f;

    font-size: 9px;

    letter-spacing: 0.12em;
}


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

.invitation-card-content {
    padding: 25px;
}


.invitation-card-label {
    margin: 0 0 10px;

    font-size: 9px;

    letter-spacing: 0.16em;

    color: #9b8063;
}


.invitation-card-content h3 {
    margin: 0 0 18px;

    font-family: Georgia, serif;

    font-size: 27px;

    font-weight: 400;

    line-height: 1.2;
}


.invitation-card-content h3 span {
    color: #a78c70;

    font-style: italic;

    padding: 0 5px;
}


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

.invitation-card-detail {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 8px;

    font-size: 12px;

    color: #817a72;
}


.invitation-card-detail span {
    color: #9b8063;

    font-size: 14px;
}


/* =========================================================
   ACTIONS
========================================================= */

.invitation-card-actions {
    display: flex;

    gap: 10px;

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid #eee9e3;
}


.card-action-button {
    flex: 1;

    padding: 10px 12px;

    cursor: pointer;

    border-radius: 2px;

    font-size: 12px;

    transition: 0.25s;
}


.preview-button {
    border: 1px solid #2d2a26;

    background: #2d2a26;

    color: #ffffff;
}


.preview-button:hover {
    background: #9b8063;

    border-color: #9b8063;
}


.edit-button {
    border: 1px solid #d8d0c6;

    background: transparent;

    color: #5f5952;
}


.edit-button:hover {
    border-color: #9b8063;

    color: #80694f;
}


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

@media (max-width: 700px) {

    .invitation-list {
        grid-template-columns: 1fr;
    }


    .invitation-card-image {
        height: 200px;
    }


    .invitation-card-content h3 {
        font-size: 24px;
    }

}

/* =========================================================
   PUBLIC INVITATION
========================================================= */

.public-invitation {
    margin: 0;

    background: #f8f5f0;

    color: #3a342e;
}


/* =========================================================
   OPENING
========================================================= */

.invitation-opening {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            #f8f2e9 0%,
            #e9ded0 100%
        );

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


.invitation-opening.hide {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.opening-content {
    width: 90%;

    max-width: 700px;
}


.opening-label {
    font-size: 10px;

    letter-spacing: 0.25em;

    color: #9a8063;

    margin-bottom: 25px;
}


.opening-content h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(
        45px,
        9vw,
        90px
    );

    font-weight: 400;

    font-style: italic;

    line-height: 1.05;

    color: #4b4035;
}


.opening-content > p:not(.opening-label) {
    margin: 25px 0 35px;

    font-family: Georgia, serif;

    color: #81705e;

    letter-spacing: 0.1em;
}


.open-invitation-button {
    border: 1px solid #9b8063;

    background: transparent;

    color: #735d47;

    padding: 14px 25px;

    cursor: pointer;

    font-size: 11px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transition: 0.3s;
}


.open-invitation-button:hover {
    background: #735d47;

    color: white;
}


/* =========================================================
   HERO
========================================================= */

.invitation-hero {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;

    box-sizing: border-box;

    background:
        linear-gradient(
            rgba(255,255,255,0.25),
            rgba(235,225,214,0.6)
        );
}


.invitation-hero-inner {
    width: 90%;

    max-width: 1000px;
}


.invitation-label {
    margin: 0 0 18px;

    font-size: 10px;

    letter-spacing: 0.25em;

    color: #9a8063;
}


.invitation-hero h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(
        48px,
        8vw,
        105px
    );

    font-weight: 400;

    line-height: 1;

    color: #463c33;
}


.invitation-hero h1 span {
    display: inline-block;
}


.invitation-hero h1 small {
    display: inline-block;

    margin: 0 15px;

    font-size: 0.35em;

    font-style: italic;

    color: #a08363;
}


.hero-divider {
    margin: 30px 0 20px;

    color: #a08363;

    font-size: 24px;
}


.hero-date {
    margin: 0 0 10px;

    font-family: Georgia, serif;

    font-size: 20px;

    color: #5f5245;
}


.hero-venue {
    margin: 0;

    font-size: 12px;

    letter-spacing: 0.08em;

    color: #8b7b6b;
}


/* =========================================================
   COUPLE
========================================================= */

.couple-section {
    padding: 110px 20px;

    text-align: center;

    background: #ffffff;
}


.couple-section h2,
.story-section h2,
.event-section h2,
.countdown-section h2 {
    margin: 0 0 20px;

    font-family: Georgia, serif;

    font-size: clamp(
        30px,
        5vw,
        50px
    );

    font-weight: 400;

    color: #4b4035;
}


.couple-description {
    max-width: 650px;

    margin: 0 auto;

    color: #83796f;

    font-size: 14px;

    line-height: 1.9;
}


.couple-names {
    max-width: 850px;

    margin: 60px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 45px;
}


.couple-person {
    width: 250px;
}


.person-photo {
    width: 150px;
    height: 150px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e7dbcd,
            #f5eee7
        );

    border: 5px solid #ffffff;

    box-shadow:
        0 0 0 1px #ded3c7;

    font-family: Georgia, serif;

    font-size: 48px;

    font-style: italic;

    color: #80694f;
}


.couple-person h3 {
    margin: 0 0 5px;

    font-family: Georgia, serif;

    font-size: 25px;

    font-weight: 400;
}


.couple-person p {
    margin: 0;

    color: #9a9188;

    font-size: 11px;

    letter-spacing: 0.08em;
}


.couple-and {
    font-family: Georgia, serif;

    font-size: 35px;

    font-style: italic;

    color: #a08363;
}


/* =========================================================
   STORY
========================================================= */

.story-section {
    padding: 110px 20px;

    text-align: center;

    background: #f5f0e9;
}


.story-inner {
    max-width: 760px;

    margin: auto;
}


.story-text {
    margin: 35px auto 0;

    max-width: 680px;

    color: #746b62;

    line-height: 2;

    font-size: 15px;

    white-space: pre-line;
}


/* =========================================================
   EVENT
========================================================= */

.event-section {
    padding: 110px 20px;

    text-align: center;

    background: #ffffff;
}


.event-inner {
    max-width: 900px;

    margin: auto;
}


.event-card {
    margin: 50px auto 30px;

    max-width: 750px;

    display: grid;

    grid-template-columns:
        180px 1fr;

    background: #f8f4ee;

    border: 1px solid #e5ddd3;

    text-align: left;
}


.event-date-box {
    padding: 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ebe1d5;
}


.event-day {
    font-family: Georgia, serif;

    font-size: 55px;

    line-height: 1;

    color: #655443;
}


.event-month {
    margin-top: 10px;

    font-size: 11px;

    letter-spacing: 0.15em;

    color: #856d54;
}


.event-year {
    margin-top: 5px;

    font-size: 12px;

    color: #8f8378;
}


.event-details {
    padding: 35px;

    display: grid;

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

    gap: 25px;
}


.event-details div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.event-details span {
    font-size: 9px;

    letter-spacing: 0.15em;

    color: #a08363;
}


.event-details strong {
    font-size: 13px;

    font-weight: 500;

    color: #5c534a;

    line-height: 1.5;
}


.map-button {
    padding: 13px 24px;

    border: 1px solid #8d7458;

    background: transparent;

    color: #735d47;

    cursor: pointer;

    font-size: 11px;

    letter-spacing: 0.08em;

    transition: 0.3s;
}


.map-button:hover {
    background: #735d47;

    color: white;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown-section {
    padding: 100px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #e8ddd0,
            #f5efe8
        );
}


.countdown-container {
    max-width: 700px;

    margin: 50px auto 0;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;
}


.countdown-item {
    padding: 25px 10px;

    background: rgba(
        255,
        255,
        255,
        0.5
    );

    border: 1px solid
        rgba(
            140,
            115,
            90,
            0.2
        );
}


.countdown-item strong {
    display: block;

    font-family: Georgia, serif;

    font-size: 40px;

    font-weight: 400;

    color: #594b3d;
}


.countdown-item span {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    letter-spacing: 0.12em;

    color: #8b7967;
}


/* =========================================================
   CLOSING
========================================================= */

.closing-section {
    min-height: 70vh;

    padding: 100px 20px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ffffff;
}


.closing-section h2 {
    margin: 10px 0 20px;

    font-family: Georgia, serif;

    font-size: clamp(
        40px,
        7vw,
        75px
    );

    font-style: italic;

    font-weight: 400;
}


.closing-section p:not(.invitation-label) {
    color: #887d73;

    font-size: 13px;
}


.closing-heart {
    margin-top: 30px;

    font-size: 30px;

    color: #a08363;
}


/* =========================================================
   FOOTER
========================================================= */

.invitation-footer {
    padding: 25px;

    text-align: center;

    background: #302a24;

    color: #aaa097;

    font-size: 11px;
}


.invitation-footer a {
    color: #d2bda4;

    text-decoration: none;

    font-weight: 600;
}


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

@media (max-width: 700px) {

    .invitation-hero {
        min-height: 90vh;
    }


    .invitation-hero h1 small {
        margin: 0 5px;
    }


    .couple-names {
        flex-direction: column;

        gap: 20px;
    }


    .couple-and {
        font-size: 28px;
    }


    .event-card {
        grid-template-columns: 1fr;
    }


    .event-date-box {
        padding: 25px;
    }


    .event-details {
        grid-template-columns: 1fr;

        padding: 25px;
    }


    .countdown-container {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .countdown-item strong {
        font-size: 32px;
    }

}

/* =========================================================
   CREATE INVITATION
========================================================= */

.create-invitation-main {
    width: 92%;

    max-width: 900px;

    margin: auto;

    padding:
        70px 0
        100px;
}


.create-header {
    margin-bottom: 50px;

    text-align: center;
}


.create-header h1 {
    margin: 10px 0 15px;

    font-family: Georgia, serif;

    font-size: clamp(
        35px,
        6vw,
        55px
    );

    font-weight: 400;

    color: #4b4035;
}


.create-header p:not(.section-label) {
    color: #857b72;

    font-size: 13px;
}


/* =========================================================
   FORM SECTION
========================================================= */

.form-section {
    margin-bottom: 25px;

    padding: 35px;

    background: #ffffff;

    border: 1px solid #e6dfd7;
}


.form-section-title {
    display: flex;

    gap: 18px;

    margin-bottom: 30px;
}


.form-section-title > span {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d5c6b6;

    color: #967b5e;

    font-family: Georgia, serif;

    font-size: 13px;
}


.form-section-title h2 {
    margin: 0 0 5px;

    font-family: Georgia, serif;

    font-size: 23px;

    font-weight: 400;

    color: #4b4035;
}


.form-section-title p {
    margin: 0;

    color: #958b82;

    font-size: 11px;
}


/* =========================================================
   FORM GRID
========================================================= */

.form-grid {
    display: grid;

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

    gap: 20px;
}


.form-group {
    margin-bottom: 20px;
}


.form-grid .form-group {
    margin-bottom: 0;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #62594f;

    font-size: 11px;

    font-weight: 600;
}


.form-group input,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ddd4ca;

    background: #fcfaf8;

    color: #4d453e;

    padding: 13px 14px;

    outline: none;

    font-family: inherit;

    font-size: 13px;

    transition: 0.25s;
}


.form-group textarea {
    resize: vertical;

    min-height: 100px;
}


.form-group input:focus,
.form-group textarea:focus {
    border-color: #9b8063;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(
            155,
            128,
            99,
            0.08
        );
}


.form-group small {
    display: block;

    margin-top: 8px;

    color: #a0958b;

    font-size: 10px;
}


/* =========================================================
   SLUG
========================================================= */

.slug-input {
    display: flex;

    align-items: stretch;

    border: 1px solid #ddd4ca;

    background: #fcfaf8;
}


.slug-input span {
    display: flex;

    align-items: center;

    padding: 0 12px;

    background: #f1ebe4;

    border-right: 1px solid #ddd4ca;

    color: #8e8174;

    font-size: 11px;

    white-space: nowrap;
}


.slug-input input {
    border: none;

    background: transparent;

    flex: 1;

    min-width: 0;
}


.slug-input input:focus {
    box-shadow: none;
}


/* =========================================================
   FORM ACTION
========================================================= */

.form-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 15px;

    margin-top: 30px;
}


.form-cancel-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 43px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid #d7cec4;

    color: #6e665e;

    background: #ffffff;

    text-decoration: none;

    font-size: 12px;
}


.form-cancel-button:hover {
    border-color: #9b8063;

    color: #80694f;
}


.form-message {
    margin: 20px 0 0;

    text-align: right;

    font-size: 12px;

    color: #80694f;
}


/* =========================================================
   BACK DASHBOARD
========================================================= */

.back-dashboard {
    color: #796b5d;

    text-decoration: none;

    font-size: 12px;
}


.back-dashboard:hover {
    color: #9b8063;
}


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

@media (max-width: 700px) {

    .create-invitation-main {
        padding-top: 45px;
    }


    .form-section {
        padding: 25px 20px;
    }


    .form-grid {
        grid-template-columns: 1fr;
    }


    .form-grid .form-group {
        margin-bottom: 20px;
    }


    .slug-input {
        flex-direction: column;
    }


    .slug-input span {
        padding: 10px;

        border-right: none;

        border-bottom: 1px solid #ddd4ca;
    }


    .form-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .form-cancel-button,
    .form-actions button {
        width: 100%;
    }

}

/* =========================================================
   CUSTOMER DASHBOARD
========================================================= */

.dashboard-page {
    margin: 0;

    min-height: 100vh;

    background: #f8f5f0;

    color: #403830;
}


/* =========================================================
   NAVBAR
========================================================= */

.dashboard-navbar {
    min-height: 70px;

    padding:
        0 5%;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    border-bottom:
        1px solid #e8e0d8;
}


.dashboard-logo {
    color: #4c4034;

    text-decoration: none;

    font-family: Georgia, serif;

    font-size: 27px;

    font-style: italic;
}


.dashboard-logo span {
    color: #a08363;
}


.dashboard-user {
    display: flex;

    align-items: center;

    gap: 20px;
}


.dashboard-user span {
    color: #8a8077;

    font-size: 11px;
}


.logout-button {
    padding: 9px 15px;

    border:
        1px solid #d9d0c7;

    background: transparent;

    color: #756b62;

    cursor: pointer;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.logout-button:hover {
    border-color: #9b8063;

    color: #80694f;
}


/* =========================================================
   DASHBOARD MAIN
========================================================= */

.dashboard-main {
    width: 90%;

    max-width: 1100px;

    margin: auto;

    padding:
        60px 0
        100px;
}


.dashboard-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;
}


.dashboard-header h1 {
    margin: 8px 0 12px;

    font-family: Georgia, serif;

    font-size: clamp(
        35px,
        5vw,
        55px
    );

    font-weight: 400;

    color: #4a3f35;
}


.dashboard-header p:not(.section-label) {
    margin: 0;

    color: #8a8078;

    font-size: 13px;
}


.section-label {
    margin: 0;

    color: #a08363;

    font-size: 9px;

    letter-spacing: 0.2em;

    font-weight: 600;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.dashboard-primary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 43px;

    padding:
        0 20px;

    box-sizing: border-box;

    border: 1px solid #80694f;

    background: #80694f;

    color: #ffffff;

    text-decoration: none;

    cursor: pointer;

    font-size: 11px;

    letter-spacing: 0.06em;

    transition: 0.25s;
}


.dashboard-primary-button:hover {
    background: #66533e;

    border-color: #66533e;
}


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

.dashboard-loading {
    min-height: 250px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #958a80;
}


.loading-spinner {
    width: 30px;

    height: 30px;

    margin-bottom: 15px;

    border:
        2px solid #ded5cb;

    border-top-color:
        #80694f;

    border-radius: 50%;

    animation:
        dashboardSpin 0.8s linear infinite;
}


@keyframes dashboardSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   INVITATION LIST
========================================================= */

.invitation-list {
    display: grid;

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

    gap: 25px;
}


.invitation-card {
    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e5ddd4;
}


.invitation-card-preview {
    min-height: 230px;

    padding: 30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f0e6da,
            #faf7f3
        );
}


.invitation-card-label {
    margin-bottom: 18px;

    color: #a08363;

    font-size: 9px;

    letter-spacing: 0.2em;
}


.invitation-card-names {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 35px;

    font-weight: 400;

    font-style: italic;

    color: #514439;
}


.invitation-card-date {
    margin: 18px 0 0;

    color: #8a7a6a;

    font-size: 11px;

    letter-spacing: 0.05em;
}


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

.invitation-card-body {
    padding: 25px;
}


.invitation-card-info {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin-bottom: 20px;
}


.card-info-item {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.card-info-item span {
    color: #a0958b;

    font-size: 9px;

    letter-spacing: 0.1em;
}


.card-info-item strong {
    color: #5b5149;

    font-size: 12px;

    font-weight: 500;
}


/* =========================================================
   INVITATION URL
========================================================= */

.invitation-url-box {
    display: flex;

    align-items: center;

    margin-bottom: 20px;

    border:
        1px solid #e2dad1;

    background: #faf8f5;
}


.invitation-url {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    padding: 11px;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #8c8177;

    font-size: 10px;
}


.copy-link-button {
    flex-shrink: 0;

    padding: 11px 14px;

    border: none;

    border-left:
        1px solid #e2dad1;

    background: transparent;

    color: #80694f;

    cursor: pointer;

    font-size: 10px;
}


.copy-link-button:hover {
    background: #eee7df;
}


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

.invitation-card-actions {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}


.invitation-action {
    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border:
        1px solid #ddd4ca;

    background: #ffffff;

    color: #70665d;

    text-decoration: none;

    cursor: pointer;

    font-size: 10px;

    transition: 0.2s;
}


.invitation-action:hover {
    border-color: #9b8063;

    color: #80694f;

    background: #faf7f3;
}


.invitation-action.whatsapp {
    border-color: #b6a28b;

    color: #80694f;
}


/* =========================================================
   EMPTY
========================================================= */

.empty-invitation {
    max-width: 550px;

    margin: 60px auto;

    padding: 60px 30px;

    text-align: center;

    background: #ffffff;

    border:
        1px solid #e5ddd4;
}


.empty-icon {
    margin-bottom: 20px;

    font-family: Georgia, serif;

    font-size: 45px;

    color: #a08363;
}


.empty-invitation h2 {
    margin: 0 0 12px;

    font-family: Georgia, serif;

    font-size: 30px;

    font-weight: 400;
}


.empty-invitation p {
    margin: 0 auto 25px;

    max-width: 400px;

    color: #8b8178;

    line-height: 1.8;

    font-size: 13px;
}


/* =========================================================
   FOOTER
========================================================= */

.dashboard-footer {
    padding: 25px;

    text-align: center;

    background: #302a24;

    color: #aaa097;

    font-size: 11px;
}


.dashboard-footer a {
    color: #d2bda4;

    text-decoration: none;

    font-weight: 600;
}


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

@media (max-width: 750px) {

    .dashboard-navbar {
        padding: 0 20px;
    }


    .dashboard-user span {
        display: none;
    }


    .dashboard-main {
        width: 92%;

        padding-top: 40px;
    }


    .dashboard-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .invitation-list {
        grid-template-columns: 1fr;
    }


    .invitation-card-info {
        grid-template-columns: 1fr;
    }


    .invitation-card-actions {
        grid-template-columns: 1fr;
    }


    .invitation-url-box {
        flex-direction: column;

        align-items: stretch;
    }


    .copy-link-button {
        border-left: none;

        border-top:
            1px solid #e2dad1;
    }

}

/* =========================================================
   CUSTOMER DASHBOARD
========================================================= */

.dashboard-page {
    margin: 0;

    min-height: 100vh;

    background: #f8f5f0;

    color: #403830;
}


/* =========================================================
   NAVBAR
========================================================= */

.dashboard-navbar {
    min-height: 70px;

    padding:
        0 5%;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    border-bottom:
        1px solid #e8e0d8;
}


.dashboard-logo {
    color: #4c4034;

    text-decoration: none;

    font-family: Georgia, serif;

    font-size: 27px;

    font-style: italic;
}


.dashboard-logo span {
    color: #a08363;
}


.dashboard-user {
    display: flex;

    align-items: center;

    gap: 20px;
}


.dashboard-user span {
    color: #8a8077;

    font-size: 11px;
}


.logout-button {
    padding: 9px 15px;

    border:
        1px solid #d9d0c7;

    background: transparent;

    color: #756b62;

    cursor: pointer;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.logout-button:hover {
    border-color: #9b8063;

    color: #80694f;
}


/* =========================================================
   DASHBOARD MAIN
========================================================= */

.dashboard-main {
    width: 90%;

    max-width: 1100px;

    margin: auto;

    padding:
        60px 0
        100px;
}


.dashboard-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;
}


.dashboard-header h1 {
    margin: 8px 0 12px;

    font-family: Georgia, serif;

    font-size: clamp(
        35px,
        5vw,
        55px
    );

    font-weight: 400;

    color: #4a3f35;
}


.dashboard-header p:not(.section-label) {
    margin: 0;

    color: #8a8078;

    font-size: 13px;
}


.section-label {
    margin: 0;

    color: #a08363;

    font-size: 9px;

    letter-spacing: 0.2em;

    font-weight: 600;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.dashboard-primary-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 43px;

    padding:
        0 20px;

    box-sizing: border-box;

    border: 1px solid #80694f;

    background: #80694f;

    color: #ffffff;

    text-decoration: none;

    cursor: pointer;

    font-size: 11px;

    letter-spacing: 0.06em;

    transition: 0.25s;
}


.dashboard-primary-button:hover {
    background: #66533e;

    border-color: #66533e;
}


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

.dashboard-loading {
    min-height: 250px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #958a80;
}


.loading-spinner {
    width: 30px;

    height: 30px;

    margin-bottom: 15px;

    border:
        2px solid #ded5cb;

    border-top-color:
        #80694f;

    border-radius: 50%;

    animation:
        dashboardSpin 0.8s linear infinite;
}


@keyframes dashboardSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   INVITATION LIST
========================================================= */

.invitation-list {
    display: grid;

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

    gap: 25px;
}


.invitation-card {
    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e5ddd4;
}


.invitation-card-preview {
    min-height: 230px;

    padding: 30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f0e6da,
            #faf7f3
        );
}


.invitation-card-label {
    margin-bottom: 18px;

    color: #a08363;

    font-size: 9px;

    letter-spacing: 0.2em;
}


.invitation-card-names {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 35px;

    font-weight: 400;

    font-style: italic;

    color: #514439;
}


.invitation-card-date {
    margin: 18px 0 0;

    color: #8a7a6a;

    font-size: 11px;

    letter-spacing: 0.05em;
}


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

.invitation-card-body {
    padding: 25px;
}


.invitation-card-info {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin-bottom: 20px;
}


.card-info-item {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.card-info-item span {
    color: #a0958b;

    font-size: 9px;

    letter-spacing: 0.1em;
}


.card-info-item strong {
    color: #5b5149;

    font-size: 12px;

    font-weight: 500;
}


/* =========================================================
   INVITATION URL
========================================================= */

.invitation-url-box {
    display: flex;

    align-items: center;

    margin-bottom: 20px;

    border:
        1px solid #e2dad1;

    background: #faf8f5;
}


.invitation-url {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    padding: 11px;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #8c8177;

    font-size: 10px;
}


.copy-link-button {
    flex-shrink: 0;

    padding: 11px 14px;

    border: none;

    border-left:
        1px solid #e2dad1;

    background: transparent;

    color: #80694f;

    cursor: pointer;

    font-size: 10px;
}


.copy-link-button:hover {
    background: #eee7df;
}


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

.invitation-card-actions {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}


.invitation-action {
    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border:
        1px solid #ddd4ca;

    background: #ffffff;

    color: #70665d;

    text-decoration: none;

    cursor: pointer;

    font-size: 10px;

    transition: 0.2s;
}


.invitation-action:hover {
    border-color: #9b8063;

    color: #80694f;

    background: #faf7f3;
}


.invitation-action.whatsapp {
    border-color: #b6a28b;

    color: #80694f;
}


/* =========================================================
   EMPTY
========================================================= */

.empty-invitation {
    max-width: 550px;

    margin: 60px auto;

    padding: 60px 30px;

    text-align: center;

    background: #ffffff;

    border:
        1px solid #e5ddd4;
}


.empty-icon {
    margin-bottom: 20px;

    font-family: Georgia, serif;

    font-size: 45px;

    color: #a08363;
}


.empty-invitation h2 {
    margin: 0 0 12px;

    font-family: Georgia, serif;

    font-size: 30px;

    font-weight: 400;
}


.empty-invitation p {
    margin: 0 auto 25px;

    max-width: 400px;

    color: #8b8178;

    line-height: 1.8;

    font-size: 13px;
}


/* =========================================================
   FOOTER
========================================================= */

.dashboard-footer {
    padding: 25px;

    text-align: center;

    background: #302a24;

    color: #aaa097;

    font-size: 11px;
}


.dashboard-footer a {
    color: #d2bda4;

    text-decoration: none;

    font-weight: 600;
}


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

@media (max-width: 750px) {

    .dashboard-navbar {
        padding: 0 20px;
    }


    .dashboard-user span {
        display: none;
    }


    .dashboard-main {
        width: 92%;

        padding-top: 40px;
    }


    .dashboard-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .invitation-list {
        grid-template-columns: 1fr;
    }


    .invitation-card-info {
        grid-template-columns: 1fr;
    }


    .invitation-card-actions {
        grid-template-columns: 1fr;
    }


    .invitation-url-box {
        flex-direction: column;

        align-items: stretch;
    }


    .copy-link-button {
        border-left: none;

        border-top:
            1px solid #e2dad1;
    }

}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .nav-menu {
        gap: 20px;
    }

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

    .template-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        border-left: 1px solid #ddd;

        border-bottom: 1px solid #ddd;
    }

    .about-content {
        gap: 50px;
    }

}


@media (max-width: 700px) {

    .container {
        width: min(92%, 1180px);
    }

    .section {
        padding: 85px 0;
    }

    .navbar-content {
        min-height: 65px;
    }

    .nav-menu {
        display: none;
    }

    .nav-button {
        padding: 9px 13px;

        font-size: 10px;
    }

    .hero {
        min-height: 90vh;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .hero-scroll {
        display: none;
    }

    .section-heading {
        display: block;
    }

    .section-heading-description {
        margin-top: 25px;
    }

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

    .template-card:last-child {
        grid-column: auto;

        max-width: none;
    }

    .template-preview {
        height: 380px;
    }

    .about-content {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .cta-section {
        padding: 100px 0;
    }

}
/* =========================================================
   CLOUDINARY PHOTO UI
========================================================= */

.media-preview {
    margin-top: 12px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    border: 1px dashed rgba(0,0,0,.12);
    background: rgba(255,255,255,.55);
}

.media-preview img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
}

.gallery-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.gallery-preview-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    background: #f4f1ed;
}

.gallery-preview-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.public-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.public-gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 18px;
    background: #f4f1ed;
}

.public-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}

.public-gallery-item:hover img {
    transform: scale(1.04);
}

.person-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.empty-gallery {
    grid-column: 1 / -1;
    text-align: center;
    opacity: .65;
}

@media (max-width: 700px) {
    .public-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gallery-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* WeddingKu v2 enhancements */
:root{--wk-accent:#9b7b58}
.music-toggle{position:fixed;right:18px;bottom:18px;z-index:1000;width:46px;height:46px;border:0;border-radius:50%;background:var(--wk-accent);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:pointer}
.guest-greeting-section{text-align:center;padding:28px 18px 10px}
.guest-greeting{display:inline-block;padding:18px 28px;border:1px solid color-mix(in srgb,var(--wk-accent) 35%,#fff);border-radius:16px;background:rgba(255,255,255,.72);font-size:14px;line-height:1.8}
.guest-greeting strong{font-size:20px;color:var(--wk-accent)}
.public-invitation[data-template="midnight"],.public-invitation[data-template="mono"]{background:#101014;color:#f5f5f5}
.public-invitation[data-template="botanical"]{--wk-accent:#657a5f}
.public-invitation[data-template="blush"]{--wk-accent:#b96f7c}
.public-invitation[data-template="royal"]{--wk-accent:#b08a45}
.public-invitation[data-template="terracotta"]{--wk-accent:#b65d42}
.public-invitation[data-template="nusantara"]{--wk-accent:#8a5b3e}
.public-invitation[data-template="lavender"]{--wk-accent:#8c72a8}

/* =========================================================
   ALL TEMPLATE MODAL
========================================================= */
.template-all-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left;max-height:62vh;overflow:auto;padding:4px}
.template-all-item{border:1px solid #e7e0d8;border-radius:16px;background:#fff;padding:0;overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.template-all-item:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08);border-color:#cbb7a0}
.template-swatch{height:115px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:22px;position:relative}
.template-swatch b{font-weight:500}
.template-swatch.elegant{background:#f3eee6;color:#5f5044}.template-swatch.minimal{background:#f5f5f2;color:#1f1f1f}.template-swatch.botanical{background:#e2eadf;color:#405443}.template-swatch.blush{background:#f5e0df;color:#744e51}.template-swatch.mono{background:#181818;color:#f7f7f7}.template-swatch.royal{background:#ded0aa;color:#44361c}.template-swatch.midnight{background:#171c2b;color:#e9d9ad}.template-swatch.terracotta{background:#b96f52;color:#fff3e8}.template-swatch.nusantara{background:#7a624d;color:#f6ead4}.template-swatch.lavender{background:#ddd5eb;color:#55466c}
.template-all-item strong{padding:10px 12px 2px;font-size:15px}.template-all-item small{padding:0 12px 12px;color:#777;font-size:12px}
.template-swal-preview{border-radius:18px;min-height:190px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:Georgia,serif;font-size:30px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.template-swal-preview small{font-family:inherit;font-size:13px;margin-top:8px;opacity:.8}
.template-swal-preview.elegant{background:#f3eee6;color:#5f5044}.template-swal-preview.minimal{background:#f5f5f2;color:#1f1f1f}.template-swal-preview.botanical{background:#e2eadf;color:#405443}.template-swal-preview.blush{background:#f5e0df;color:#744e51}.template-swal-preview.mono{background:#181818;color:#f7f7f7}.template-swal-preview.royal{background:#ded0aa;color:#44361c}.template-swal-preview.midnight{background:#171c2b;color:#e9d9ad}.template-swal-preview.terracotta{background:#b96f52;color:#fff3e8}.template-swal-preview.nusantara{background:#7a624d;color:#f6ead4}.template-swal-preview.lavender{background:#ddd5eb;color:#55466c}
@media(max-width:640px){.template-all-grid{grid-template-columns:1fr}.template-swatch{height:95px}}

/* WeddingKu v5 - template previews */
.template-preview.minimal{background:linear-gradient(135deg,#f5f5f2,#dcdedb);color:#202020}
.template-preview.botanical{background:linear-gradient(135deg,#dfe9dd,#8fa38b);color:#304332}
.template-preview.blush{background:linear-gradient(135deg,#f6dddd,#d99da3);color:#633e44}
.template-preview.mono{background:linear-gradient(135deg,#171717,#555);color:#fff}
.template-preview.royal{background:linear-gradient(135deg,#e8dfc4,#a98a4e);color:#3d2d14}
.template-preview.midnight{background:linear-gradient(135deg,#151a2b,#444d75);color:#f2e5bd}
.template-preview.terracotta{background:linear-gradient(135deg,#d49374,#9d4e39);color:#fff4e8}
.template-preview.nusantara{background:linear-gradient(135deg,#9a7b5b,#543d2d);color:#fff1d8}
.template-preview.lavender{background:linear-gradient(135deg,#e6dff0,#9d88b7);color:#493d5a}
.template-preview-ornament{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.22em;margin-bottom:14px;opacity:.72}
.template-preview-date{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.16em;margin-top:10px;opacity:.8}
.template-swatch{gap:4px;flex-direction:column}
.template-swatch-kicker{font-family:system-ui,sans-serif;font-size:8px;letter-spacing:.18em;opacity:.7}
.template-swatch small{padding:0!important;color:inherit!important;opacity:.72}


/* =========================================================
   WEDDINGKU ADMIN — PREMIUM DASHBOARD UI
========================================================= */
.admin-page {
    min-height: 100vh;
    background: #f6f2ec;
    color: #352f2a;
}
.admin-page::selection { background:#d9c5aa; color:#2f2924; }
.admin-navbar {
    position:sticky; top:0; z-index:100;
    min-height:76px; padding:0 clamp(20px,5vw,72px);
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:rgba(255,253,249,.94); backdrop-filter:blur(16px);
    border-bottom:1px solid #e8dfd4;
}
.admin-brand-wrap,.admin-userbar{display:flex;align-items:center}
.admin-brand-wrap{gap:14px}.admin-brand{font:italic 700 28px/1 Georgia,serif;color:#3c342e}.admin-brand span{font-weight:400;color:#a17f5d}
.admin-badge{font:700 9px/1 Arial,sans-serif;letter-spacing:.16em;color:#866a4c;background:#f1e8dd;border:1px solid #dfd0bf;border-radius:999px;padding:7px 10px}
.admin-userbar{gap:12px}.admin-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#80694f;color:#fff;font:600 14px Arial,sans-serif;box-shadow:0 5px 16px rgba(79,61,43,.18)}
.admin-usercopy{display:flex;flex-direction:column;min-width:140px}.admin-usercopy strong{font:600 13px Arial,sans-serif;color:#3d3732}.admin-usercopy span{margin-top:3px;font:11px Arial,sans-serif;color:#91867c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.admin-nav-link{font:600 11px Arial,sans-serif;color:#776a5e;padding:10px 13px;border:1px solid #e1d7cc;border-radius:8px}.admin-nav-link:hover{background:#f5efe8;color:#3d342d}
.admin-logout{border:1px solid #dbcfc3;background:#fff;color:#7c6b5b;border-radius:8px;padding:10px 15px;font:600 10px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.admin-logout:hover{border-color:#a98a68;background:#f8f2eb;color:#5d4938}
.admin-main{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:58px 0 90px}
.admin-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;padding:18px 0 38px;border-bottom:1px solid #e4dbd1}
.admin-eyebrow,.admin-section-kicker{font:700 9px/1 Arial,sans-serif;letter-spacing:.22em;color:#a07e5c}
.admin-hero h1{margin:12px 0 9px;font:400 clamp(42px,6vw,68px)/.98 Georgia,serif;letter-spacing:-.04em;color:#3b342e}
.admin-hero p{max-width:650px;color:#8b8178;font:15px/1.7 Georgia,serif}
.admin-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.admin-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:8px;font:600 10px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}.admin-btn-light{border:1px solid #d9cec1;background:#fff;color:#66584b}.admin-btn-dark{border:1px solid #80694f;background:#80694f;color:#fff}.admin-btn-dark:hover{background:#66533e}.admin-btn-light:hover{background:#f7f1ea}
.admin-state{margin:28px 0;padding:22px;border-radius:12px;border:1px solid #e4d9ce;background:#fff}.admin-loading-state{display:flex;align-items:center;gap:14px;color:#64594f}.admin-loading-state small{display:block;color:#9a8e84;margin-top:3px;font:12px Arial,sans-serif}.admin-spinner{width:25px;height:25px;border:2px solid #e3d9ce;border-top-color:#80694f;border-radius:50%;animation:adminSpin .8s linear infinite}@keyframes adminSpin{to{transform:rotate(360deg)}}
.admin-error{color:#8d4338;background:#fff6f4;border-color:#ebc9c2}
.admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
.admin-stat-card{min-height:145px;padding:23px;border:1px solid #e5dcd2;border-radius:14px;background:#fff;display:flex;align-items:flex-start;gap:16px;box-shadow:0 6px 24px rgba(63,48,35,.035)}
.admin-stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(63,48,35,.07);transition:.2s}.admin-stat-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:11px;background:#f2eae0;color:#80694f;font:700 13px Arial,sans-serif}.admin-stat-card span{display:block;color:#867a70;font:600 10px Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}.admin-stat-card strong{display:block;margin-top:7px;color:#3c342e;font:400 34px/1 Georgia,serif}.admin-stat-card small{display:block;margin-top:7px;color:#a1968c;font:11px Arial,sans-serif}.admin-stat-featured{background:#40372f;border-color:#40372f}.admin-stat-featured .admin-stat-icon{background:#5a4c40;color:#f2dfc6}.admin-stat-featured span,.admin-stat-featured small{color:#cbbbad}.admin-stat-featured strong{color:#fff8f0}
.admin-panel{margin-top:22px;border:1px solid #e3d9ce;border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 7px 26px rgba(63,48,35,.035)}
.admin-panel-heading{padding:24px 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid #eee7df}.admin-panel-heading h2{margin:8px 0 4px;font:400 28px/1.1 Georgia,serif;color:#413830}.admin-panel-heading p{color:#948980;font:12px Arial,sans-serif}.admin-panel-count{align-self:center;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#f5f0ea;color:#8b7866;font:600 9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.admin-table-wrap{width:100%;overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;min-width:760px}.admin-table th{padding:13px 18px;text-align:left;background:#faf7f3;color:#9a8d82;font:700 9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid #ece4db}.admin-table td{padding:15px 18px;color:#5e554d;font:12px Arial,sans-serif;border-bottom:1px solid #f0eae4;vertical-align:middle}.admin-table tbody tr:hover{background:#fcfaf7}.admin-table tbody tr:last-child td{border-bottom:0}.admin-table td:first-child{font-weight:600;color:#40372f}.admin-table .secondary-button{display:inline-flex!important;align-items:center;justify-content:center;min-height:32px!important;padding:0 11px!important;border-radius:7px!important;font:600 9px Arial,sans-serif!important;text-decoration:none}.admin-table .admin-role,.admin-table .admin-template-edit{border:1px solid #dacdbf;background:#fff;color:#79644f}.admin-table .admin-role:hover,.admin-table .admin-template-edit:hover{background:#f5eee6}.admin-table .admin-delete-inv{border:1px solid #e3c7c1;background:#fff7f5;color:#9a5045}.admin-table a.secondary-button{margin-right:6px}
.admin-table td:nth-child(3){max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-template-note{margin:16px 18px 0;padding:12px 14px;border-radius:9px;background:#f8f3ed;color:#8c7d6e;font:11px/1.6 Arial,sans-serif}.admin-template-note strong{color:#6f5a45}
.admin-footer{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:20px 0 32px;display:flex;justify-content:space-between;color:#a0958b;font:10px Arial,sans-serif;letter-spacing:.04em;border-top:1px solid #e4dbd1}
@media(max-width:900px){.admin-stats-grid{grid-template-columns:repeat(2,1fr)}.admin-hero{align-items:flex-start;flex-direction:column}.admin-hero-actions{justify-content:flex-start}.admin-usercopy{display:none}}
@media(max-width:640px){.admin-navbar{padding:0 16px}.admin-brand{font-size:23px}.admin-badge,.admin-nav-link{display:none}.admin-main{width:calc(100% - 28px);padding-top:34px}.admin-hero h1{font-size:43px}.admin-hero p{font-size:14px}.admin-hero-actions{width:100%}.admin-btn{flex:1}.admin-stats-grid{grid-template-columns:1fr 1fr;gap:10px}.admin-stat-card{min-height:125px;padding:16px;gap:10px}.admin-stat-icon{width:34px;height:34px;flex-basis:34px}.admin-stat-card strong{font-size:29px}.admin-panel-heading{padding:19px 17px;align-items:flex-start;flex-direction:column}.admin-panel-count{align-self:flex-start}.admin-table{min-width:700px}.admin-footer{width:calc(100% - 28px);font-size:9px}}

/* =========================================================
   CREATE INVITATION — V7 POLISHED UI
========================================================= */
.dashboard-page {
    background:
        radial-gradient(circle at 8% 0%, rgba(184, 154, 119, .10), transparent 28%),
        linear-gradient(180deg, #fbf9f6 0%, #f5f0e9 100%);
}

.dashboard-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 72px;
    padding: 0 clamp(18px, 5vw, 72px);
    background: rgba(255, 253, 249, .92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #e9e0d6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-logo {
    font: 700 28px/1 Georgia, serif;
    font-style: italic;
    color: #3e352e;
    letter-spacing: -.04em;
}
.dashboard-logo span {
    font-weight: 400;
    color: #9b7b58;
}
.back-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ded3c8;
    border-radius: 9px;
    background: #fff;
    color: #6f6256;
    transition: .2s ease;
}
.back-dashboard:hover {
    transform: translateX(-2px);
    border-color: #b99b78;
    color: #80694f;
}

.create-invitation-main {
    width: min(960px, calc(100% - 32px));
    padding: 68px 0 90px;
}

.create-header {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}
.create-header .section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #9a7958;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .24em;
}
.create-header .section-label::before,
.create-header .section-label::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #cdb9a3;
}
.create-header h1 {
    margin: 15px 0 12px;
    font-size: clamp(42px, 6vw, 64px);
    letter-spacing: -.045em;
    color: #3d352f;
}
.create-header p:not(.section-label) {
    margin: 0;
    color: #8f847a;
    font-size: 14px;
    line-height: 1.8;
}

.invitation-form {
    display: block;
}

.form-section {
    position: relative;
    margin-bottom: 18px;
    padding: 30px 32px;
    background: rgba(255,255,255,.94);
    border: 1px solid #e5ddd4;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(66, 49, 33, .045);
}
.form-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d8c5af, transparent);
    opacity: .7;
}
.form-section-featured {
    background: linear-gradient(135deg, #fffdf9, #f8f1e9);
    border-color: #dfd0c0;
}

.form-section-title {
    align-items: center;
    margin-bottom: 26px;
}
.form-section-title > span {
    border-radius: 10px;
    background: #f5eee7;
    border-color: #ddcdbb;
    color: #876c50;
    font-weight: 700;
}
.form-section-title h2 {
    font-size: 25px;
    letter-spacing: -.02em;
}
.form-section-title p {
    line-height: 1.6;
}

.form-grid {
    gap: 18px;
}
.form-group {
    margin-bottom: 18px;
}
.form-group label {
    margin-bottom: 9px;
    color: #534940;
    font-size: 11px;
    letter-spacing: .01em;
}
.form-group input,
.form-group textarea,
.form-group select {
    min-height: 48px;
    border: 1px solid #ded5cc;
    border-radius: 10px;
    background: #fbfaf8;
    padding: 12px 14px;
    color: #443d37;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(63, 46, 31, .025);
}
.form-group textarea {
    min-height: 118px;
}
.form-group select {
    width: 100%;
    box-sizing: border-box;
    appearance: auto;
}
.form-group input[type="file"] {
    min-height: auto;
    padding: 10px;
    cursor: pointer;
    background: #faf7f3;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #ad8d6c;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(173, 141, 108, .09);
}

.form-group small {
    margin-top: 7px;
    line-height: 1.55;
}
.form-group small code,
.guest-setting-tip code {
    padding: 2px 5px;
    border-radius: 5px;
    background: #eee7df;
    color: #775e47;
    font-family: Consolas, monospace;
}

.input-with-icon {
    position: relative;
}
.input-with-icon .input-icon {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9a7a59;
    font-size: 17px;
    pointer-events: none;
}
.input-with-icon input {
    padding-left: 40px;
}

.optional-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #f0e8de;
    color: #94775a;
    font: 700 8px Arial, sans-serif;
    letter-spacing: .08em;
    vertical-align: 2px;
}

.guest-setting-tip {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 6px;
    padding: 13px 15px;
    border-radius: 10px;
    background: rgba(239, 231, 222, .68);
    color: #7f7165;
}
.guest-setting-tip > span {
    color: #9a7958;
    font-size: 17px;
}
.guest-setting-tip strong {
    display: block;
    margin-bottom: 3px;
    color: #5b4c3e;
    font-size: 11px;
}
.guest-setting-tip p {
    margin: 0;
    font: 10px/1.6 Arial, sans-serif;
}

.slug-input {
    overflow: hidden;
    border-radius: 10px;
}
.slug-input span {
    background: #f0e9e1;
    color: #817367;
}
.slug-input input {
    border-radius: 0;
}

.media-preview:empty,
.gallery-preview:empty {
    display: none;
}
.media-preview:not(:empty),
.gallery-preview:not(:empty) {
    margin-top: 12px;
    padding: 10px;
    border-radius: 12px;
    background: #f7f3ee;
    border: 1px dashed #d9cbbd;
}

.form-actions {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    margin-top: 26px;
    padding: 12px;
    border: 1px solid #e4d9ce;
    border-radius: 14px;
    background: rgba(255,253,249,.93);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(55, 41, 29, .10);
}
.form-cancel-button,
.form-actions button {
    min-height: 46px;
    border-radius: 9px;
    font-weight: 700;
}
.form-cancel-button {
    padding: 0 24px;
}
.form-actions .dashboard-primary-button {
    padding: 0 28px;
    border: 1px solid #80694f;
    background: #80694f;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(128, 105, 79, .18);
    transition: .2s ease;
}
.form-actions .dashboard-primary-button:hover {
    background: #69543f;
    transform: translateY(-1px);
}

.form-message {
    text-align: center;
    margin: 12px 0 0;
}

.dashboard-footer {
    border-top: 1px solid #e6ddd4;
    background: #302a25;
    color: #cfc3b7;
}
.dashboard-footer a {
    color: #f3e2cd;
}

@media (max-width: 700px) {
    .dashboard-navbar {
        min-height: 64px;
        padding: 0 16px;
    }
    .dashboard-logo {
        font-size: 24px;
    }
    .back-dashboard {
        padding: 9px 11px;
        font-size: 10px;
    }
    .create-invitation-main {
        width: calc(100% - 20px);
        padding: 42px 0 70px;
    }
    .create-header {
        margin-bottom: 28px;
    }
    .create-header h1 {
        font-size: 42px;
    }
    .form-section {
        padding: 24px 18px;
        border-radius: 14px;
    }
    .form-section::after {
        left: 18px;
        right: 18px;
    }
    .form-section-title {
        gap: 12px;
    }
    .form-section-title h2 {
        font-size: 22px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-grid .form-group {
        margin-bottom: 18px;
    }
    .slug-input {
        flex-direction: column;
    }
    .slug-input span {
        min-height: 40px;
        justify-content: center;
        border-right: 0;
        border-bottom: 1px solid #ddd4ca;
    }
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        bottom: 8px;
    }
    .form-cancel-button,
    .form-actions button {
        width: 100%;
    }
}

/* =========================================================
   CUSTOMER — RSVP MANAGEMENT
========================================================= */
.rsvp-dashboard {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e9e0d7;
}
.rsvp-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.rsvp-dashboard-head .invitation-card-label { margin: 0 0 3px; }
.rsvp-dashboard-head strong { color: #4c4239; font-size: 12px; }
.rsvp-live-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: #edf5ec;
    color: #547351;
    font: 700 8px Arial, sans-serif;
    letter-spacing: .12em;
}
.rsvp-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.rsvp-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 8px;
    padding: 9px 10px;
    border: 1px solid #e8dfd6;
    border-radius: 9px;
    background: #fbfaf8;
}
.rsvp-stat span { grid-row: 1 / 3; align-self: center; font-size: 17px; }
.rsvp-stat strong { font-size: 15px; color: #4b423b; line-height: 1; }
.rsvp-stat small { color: #8b7e72; font-size: 9px; }
.rsvp-hadir span { color: #688764; }
.rsvp-tidak span { color: #a76860; }
.rsvp-pending span { color: #a0805c; }
.rsvp-guest-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 3px;
}
.rsvp-guest-row {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid #eee7df;
    border-radius: 9px;
    background: #fff;
}
.rsvp-guest-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eee6dd;
    color: #80684f;
    font: 700 11px Georgia, serif;
}
.rsvp-guest-info { min-width: 0; }
.rsvp-guest-info strong,
.rsvp-guest-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsvp-guest-info strong { color: #51463d; font-size: 11px; }
.rsvp-guest-info small { margin-top: 2px; color: #91847a; font-size: 9px; }
.rsvp-status {
    padding: 5px 7px;
    border-radius: 999px;
    font: 700 8px Arial, sans-serif;
    white-space: nowrap;
}
.rsvp-status.hadir { background: #eaf3e8; color: #55764f; }
.rsvp-status.tidak-hadir { background: #f6e9e7; color: #985d57; }
.rsvp-status.belum-pasti { background: #f5eee2; color: #98764f; }
.rsvp-empty {
    padding: 18px 10px;
    border: 1px dashed #ddd1c5;
    border-radius: 9px;
    text-align: center;
    color: #94877b;
}
.rsvp-empty span { font-size: 22px; color: #b59a7b; }
.rsvp-empty p { margin: 5px 0 0; font-size: 10px; }
@media (max-width: 650px) {
    .rsvp-summary-grid { grid-template-columns: 1fr; }
    .rsvp-guest-row { grid-template-columns: 30px minmax(0,1fr); }
    .rsvp-status { grid-column: 2; justify-self: start; margin-top: -4px; }
}


/* Music dropdown */
.select-with-icon select {
    width: 100%;
    padding-left: 40px !important;
    padding-right: 40px !important;
    cursor: pointer;
    appearance: auto;
}
.select-with-icon .input-icon {
    z-index: 2;
}

/* FINAL POLISH */
.select-with-icon select {
    width: 100%;
    min-height: 48px;
    padding: 12px 42px 12px 40px;
    border: 1px solid #ded5cc;
    border-radius: 10px;
    background: #fbfaf8;
    color: #443d37;
    font-size: 13px;
    cursor: pointer;
}
.select-with-icon select:focus {
    outline: none;
    border-color: #ad8d6c;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(173,141,108,.09);
}