:root {
    /* Generic */
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    /* Footer */
    --footer-bg: 0, 0, 0;
    /* Text */
    --text-default: 255, 255, 255;
    --text-contrast: 0, 0, 0;
    /* Navbar */
    --navbar-bg: 255, 255, 255;
    --navbar-text: 40, 40, 40;
    /* Background */
    --body-bg: 255, 255, 255;
    /* Colour Scheme (Danger) */
    --danger-1: 239, 68, 68;
    /* Colour Scheme (Disabled) */
    --disabled-1: 150, 150, 150;
}

/* Wrapper */

html, body, #main-wrapper {
    background: rgba(var(--body-bg), 1.0) !important;
}

.card {
    color: rgba(var(--black), 1.0) !important;
    background: rgba(var(--body-bg), 0.5) !important;
}

.modal .modal-content {
    background: rgba(var(--body-bg), 0.95) !important;
}

    .modal .modal-content .modal-header {
        border-bottom-color: rgba(var(--primary-1), 0.3) !important;
    }

/* Navbar */

.navbar {
    --bs-navbar-border-color: rgba(var(--navbar-bg), 1.0) !important;
    color: rgba(var(--navbar-text), 1.0) !important;
    background-color: rgba(var(--navbar-bg), 1.0) !important;
    box-shadow: 0 1px 3px 0 rgba(var(--primary-2), 0.1) !important;
}

    .navbar .navbar-title {
        color: rgba(var(--navbar-text), 1.0) !important;
    }

    .navbar .navbar-options i, .navbar .navbar-options svg {
        color: rgba(var(--primary-3), 1.0) !important;
    }

        .navbar .navbar-options i:hover, .navbar .navbar-options svg:hover {
            color: rgba(var(--primary-3), 0.8) !important;
        }

/* Tabs */

.nav-tabs, .nav-border-bottom {
    --bs-nav-tabs-border-color: rgba(var(--primary-3), 1.0) !important;
    border-color: rgba(var(--primary-3), 1.0) !important;
}

    .nav-tabs .nav-item .nav-link {
        color: rgba(var(--primary-2), 1.0) !important;
        background-color: rgba(var(--navbar-bg), 1.0) !important;
        border-color: rgba(var(--primary-3), 1.0) !important;
    }

        .nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item .nav-link.active:hover {
            color: rgba(var(--primary-2), 1.0) !important;
            background-color: rgba(var(--primary-3), 0.3) !important;
            border-color: rgba(var(--primary-3), 1.0) !important;
        }

        .nav-tabs .nav-item .nav-link:hover {
            color: rgba(var(--primary-2), 1.0) !important;
            background-color: rgba(var(--primary-3), 0.1) !important;
            border-color: rgba(var(--primary-3), 1.0) !important;
        }

/* Footer */

footer {
    color: rgba(var(--text-default), 1.0) !important;
    background-color: rgba(var(--footer-bg), 0.9) !important;
}

    footer a, footer a:active, footer a:visited, footer a:hover {
        color: rgba(var(--text-default), 1.0) !important;
    }

/* Headers */

.card .card-header {
    background-color: rgba(var(--primary-1), 0.03) !important;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 {
    color: rgba(var(--primary-1), 0.8) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: rgba(var(--primary-1), 0.8) !important;
}

.modal .modal-header {
    background-color: rgba(var(--primary-1), 0.01) !important;
}

    .modal .modal-header .modal-title {
        color: rgba(var(--primary-1), 0.8) !important;
    }

.modal-body {
    color: rgba(var(--text-contrast), 1.0) !important;
}

    .modal .modal-body h5 {
        color: rgba(var(--primary-1), 0.8) !important;
    }

    .modal .modal-body p {
        color: rgba(var(--text-contrast), 1.0);
    }

/* Text */

.text-primary-1 {
    color: rgba(var(--primary-1), 0.8) !important;
}

.text-primary-2 {
    color: rgba(var(--primary-2), 0.8) !important;
}

.text-primary-3 {
    color: rgba(var(--primary-3), 0.8) !important;
}

.text-secondary-1 {
    color: rgba(var(--secondary-1), 0.8) !important;
}

.text-secondary-2 {
    color: rgba(var(--secondary-2), 0.8) !important;
}

.text-danger {
    color: rgba(var(--danger-1), 0.8) !important;
}

.text-disabled {
    color: rgba(var(--disabled-1), 0.5) !important;
}

.text-contrast {
    color: rgba(var(--text-contrast), 1.0) !important;
}

/* Borders */
.border-primary-1 {
    border-color: rgba(var(--primary-1), 0.8) !important;
}

.border-primary-2 {
    border-color: rgba(var(--primary-2), 0.8) !important;
}

.border-primary-3 {
    border-color: rgba(var(--primary-3), 0.8) !important;
}

.border-secondary-1 {
    border-color: rgba(var(--secondary-1), 0.8) !important;
}

.border-secondary-2 {
    border-color: rgba(var(--secondary-2), 0.8) !important;
}

.border-danger {
    border-color: rgba(var(--danger-1), 0.8) !important;
}

.border-disabled {
    border-color: rgba(var(--disabled-1), 0.5) !important;
}

/* Links */

a, a:active, a:visited {
    color: rgba(var(--primary-1), 0.8) !important;
}

    a:hover {
        color: rgba(var(--primary-1), 1.0) !important;
    }

.link-primary-1 {
    color: rgba(var(--primary-1), 0.8) !important;
}

    .link-primary-1:hover, .link-primary-1:active {
        color: rgba(var(--primary-1), 1.0) !important;
    }

.link-primary-2 {
    color: rgba(var(--primary-2), 0.8) !important;
}

    .link-primary-2:hover, .link-primary-2:active {
        color: rgba(var(--primary-2), 1.0) !important;
    }

.link-primary-3 {
    color: rgba(var(--primary-3), 0.8) !important;
}

    .link-primary-3:hover, .link-primary-3:active {
        color: rgba(var(--primary-3), 1.0) !important;
    }

.link-secondary-1 {
    color: rgba(var(--secondary-1), 0.8) !important;
}

    .link-secondary-1:hover, .link-secondary-1:active {
        color: rgba(var(--secondary-1), 1.0) !important;
    }

.link-secondary-2 {
    color: rgba(var(--secondary-2), 0.8) !important;
}

    .link-secondary-2:hover, .link-secondary-2:active {
        color: rgba(var(--secondary-2), 1.0) !important;
    }

.link-danger, .link-danger * {
    color: rgba(var(--danger-1), 0.8) !important;
}

    .link-danger:hover, .link-danger:hover *, .link-danger:active, .link-danger:hover * {
        color: rgba(var(--danger-1), 1.0) !important;
    }

.link-disabled {
    color: rgba(var(--disabled-1), 0.5) !important;
}

    .link-disabled:hover, .link-disabled:active {
        color: rgba(var(--disabled-1), 1.0) !important;
    }

/* Buttons */

.btn-primary-1 {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--primary-1), 0.8) !important;
    --bs-btn-border-color: rgba(var(--primary-1), 0.8) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--primary-1), 1.0) !important;
    --bs-btn-hover-border-color: rgba(var(--primary-1), 1.0) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--primary-1), 1.0) !important;
    --bs-btn-active-border-color: rgba(var(--primary-1), 1.0) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--primary-1), 0.8) !important;
}

.btn-primary-2 {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--primary-2), 0.8) !important;
    --bs-btn-border-color: rgba(var(--primary-2), 0.8) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--primary-2), 1.0) !important;
    --bs-btn-hover-border-color: rgba(var(--primary-2), 1.0) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--primary-2), 1.0) !important;
    --bs-btn-active-border-color: rgba(var(--primary-2), 1.0) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--primary-2), 0.8) !important;
}

.btn-primary-3 {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--primary-3), 0.8) !important;
    --bs-btn-border-color: rgba(var(--primary-3), 0.8) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--primary-3), 1.0) !important;
    --bs-btn-hover-border-color: rgba(var(--primary-3), 1.0) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--primary-3), 1.0) !important;
    --bs-btn-active-border-color: rgba(var(--primary-3), 1.0) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--primary-3), 0.8) !important;
}

.btn-secondary-1 {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--secondary-1), 0.8) !important;
    --bs-btn-border-color: rgba(var(--secondary-1), 0.8) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--secondary-1), 1.0) !important;
    --bs-btn-hover-border-color: rgba(var(--secondary-1), 1.0) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--secondary-1), 1.0) !important;
    --bs-btn-active-border-color: rgba(var(--secondary-1), 1.0) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--secondary-1), 0.8) !important;
}

.btn-danger {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--danger-1), 0.8) !important;
    --bs-btn-border-color: rgba(var(--danger-1), 0.8) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--danger-1), 1.0) !important;
    --bs-btn-hover-border-color: rgba(var(--danger-1), 1.0) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--danger-1), 1.0) !important;
    --bs-btn-active-border-color: rgba(var(--danger-1), 1.0) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--danger-1), 0.8) !important;
}

.btn-cancel {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--disabled-1), 1.0) !important;
    --bs-btn-hover-border-color: rgba(var(--disabled-1), 1.0) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--disabled-1), 1.0) !important;
    --bs-btn-active-border-color: rgba(var(--disabled-1), 1.0) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 1.0) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 1.0) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--disabled-1), 1.0) !important;
}

.btn-disabled, .btn-disabled:active, .btn-disabled:hover {
    --bs-btn-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-hover-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-hover-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-hover-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-active-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-color: rgba(var(--text-default), 1.0) !important;
    --bs-btn-disabled-bg: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-disabled-border-color: rgba(var(--disabled-1), 0.5) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-focus-shadow-rgb: rgba(var(--disabled-1), 0.5) !important;
}

/* Tables */

table {
    --bs-table-border-color: rgba(var(--primary-2), 1.0) !important;
    outline-color: rgba(var(--primary-2), 1.0) !important;
}

    table th {
        color: rgba(var(--primary-2), 1.0) !important;
        background-color: rgba(var(--primary-2), 0.1) !important;
    }

    table td {
        color: rgba(var(--text-contrast), 1.0) !important;
        background-color: rgba(var(--primary-2), 0.02) !important;
    }

/* Accordions */

.accordion {
    --bs-accordion-color: rgba(var(--primary-2), 1.0) !important;
    --bs-accordion-border-color: rgba(var(--primary-2), 1.0) !important
}

    .accordion .accordion-item {
        background: rgba(var(--navbar-bg), 0.02) !important;
    }

        .accordion .accordion-item .accordion-button {
            color: rgba(var(--primary-2), 1.0) !important;
            background-color: rgba(var(--primary-2), 0.1) !important;
        }

        .accordion .accordion-item:hover .accordion-button {
            color: rgba(var(--primary-2), 1.0) !important;
            background-color: rgba(var(--primary-2), 0.3) !important;
        }

        .accordion .accordion-item .accordion-button:not(.collapsed) {
            color: rgba(var(--primary-2), 1.0) !important;
            background-color: rgba(var(--primary-2), 0.2) !important;
        }

/* Forms */

.form-text {
    color: rgba(var(--text-contrast), 1.0) !important;
}

/* Inputs */
select option {
    color: rgba(var(--text-contrast), 1.0) !important;
    background-color: rgba(var(--body-bg), 0.9) !important;
}

    select option:hover, select option:checked, select option:focus, select option:active {
        color: rgba(var(--white), 1.0) !important;
        background-color: rgba(var(--primary-3), 0.8) !important;
    }

input, select {
    color: rgba(var(--text-contrast), 1.0) !important;
    background-color: rgba(var(--primary-1), 0.1) !important;
    border-color: rgba(var(--primary-1), 0.1) !important;
}

    input::placeholder {
        color: rgba(var(--text-contrast), 0.5) !important;
    }

    input:focus, select:focus {
        outline: 3px solid rgba(var(--primary-1), 0.5) !important;
    }

    input[type="file"]::file-selector-button {
        color: rgba(var(--white), 1.0);
        background-color: rgba(var(--primary-2), 0.8);
        border: none;
        cursor: pointer;
    }

        input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::-ms-browse:hover {
            color: rgba(var(--text-contrast), 1.0);
            background-color: rgba(var(--primary-2), 1.0);
        }

label {
    color: rgba(var(--primary-1), 0.8) !important;
}

/* Misc */

.media-viewer-options .media-viewer-download {
    color: rgba(var(--text-default), 1.0) !important;
    background-color: rgba(var(--disabled-1), 0.5) !important;
}

    .media-viewer-options .media-viewer-download:hover {
        color: rgba(var(--text-default), 1.0) !important;
        background-color: rgba(var(--secondary-1), 0.8) !important;
    }

.media-viewer-options .media-viewer-close {
    color: rgba(var(--text-default), 1.0) !important;
    background-color: rgba(var(--disabled-1), 0.5) !important;
}

    .media-viewer-options .media-viewer-close:hover {
        color: rgba(var(--text-default), 1.0) !important;
        background-color: rgba(var(--danger-1), 0.8) !important;
    }

.file-uploader-form, .upload_drop {
    outline-color: rgba(var(--primary-3), 0.8) !important;
}

.upload_drop {
    color: rgba(var(--primary-3), 1.0) !important;
}

    .upload_drop .upload_svg {
        outline-color: rgba(var(--primary-3), 1.0) !important;
        fill: rgba(var(--primary-3), 1.0) !important;
    }

    .upload_drop h2 {
        color: rgba(var(--primary-3), 1.0) !important;
    }

    .upload_drop p {
        color: rgba(var(--primary-3), 1.0) !important;
    }

    .upload_drop.highlight {
        color: rgba(var(--primary-3), 0.8) !important;
        outline: 2px dashed rgba(var(--primary-3), 0.8) !important;
    }

        .upload_drop.highlight .upload_svg {
            outline-color: rgba(var(--primary-3), 0.8) !important;
            fill: rgba(var(--primary-3), 0.8) !important;
        }

        .upload_drop.highlight h2 {
            color: rgba(var(--primary-3), 0.8) !important;
        }

        .upload_drop.highlight p {
            color: rgba(var(--primary-3), 0.8) !important;
        }

.quote {
    color: rgba(var(--primary-1), 0.8) !important;
    background-color: rgba(var(--primary-1), 0.05) !important;
}

.pagination .page-item.active .page-link {
    background-color: rgba(var(--primary-1), 0.5) !important;
    border-color: rgba(var(--primary-1), 0.75) !important;
}

.pagination .page-item:hover .page-link {
    background-color: rgba(var(--primary-1), 0.2) !important;
    border-color: rgba(var(--primary-1), 0.75) !important;
}

:root {
    /* Colour Scheme (Primary) */
    --primary-1: 4, 120, 87;
    --primary-2: 5, 150, 105;
    --primary-3: 16, 185, 129;
    /* Colour Scheme (Secondary) */
    --secondary-1: 37, 99, 235;
    --secondary-2: 59, 130, 246;
}

/* Jessi & Alex wedding CI overrides.
   Keep this appended to Memtly's stock green theme so app updates remain easy
   to rebase: replace the stock file, then append this block again. */

@font-face {
    font-family: "JA Cormorant";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./wedding-fonts/cormorant-garamond-400.ttf") format("truetype");
}

@font-face {
    font-family: "JA Cormorant";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("./wedding-fonts/cormorant-garamond-500.ttf") format("truetype");
}

@font-face {
    font-family: "JA Cormorant";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./wedding-fonts/cormorant-garamond-600.ttf") format("truetype");
}

@font-face {
    font-family: "JA Cormorant";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("./wedding-fonts/cormorant-garamond-700.ttf") format("truetype");
}

@font-face {
    font-family: "JA Script";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./wedding-fonts/great-vibes-400.ttf") format("truetype");
}

:root {
    --white: 255, 255, 255;
    --black: 38, 40, 31;
    --footer-bg: 103, 113, 78;
    --text-default: 255, 252, 246;
    --text-contrast: 52, 58, 43;
    --navbar-bg: 247, 244, 239;
    --navbar-text: 109, 124, 72;
    --body-bg: 232, 230, 224;
    --primary-1: 109, 124, 72;
    --primary-2: 103, 113, 78;
    --primary-3: 201, 201, 174;
    --secondary-1: 148, 56, 11;
    --secondary-2: 216, 178, 175;
    --danger-1: 142, 24, 32;
    --disabled-1: 166, 162, 148;
    --ja-paper: 232, 230, 224;
    --ja-paper-warm: 247, 245, 238;
    --ja-ink: 63, 68, 48;
    --ja-olive: 109, 124, 72;
    --ja-olive-soft: 201, 201, 174;
    --ja-rust: 148, 56, 11;
    --ja-orange: 255, 127, 0;
    --ja-gold: 201, 201, 174;
    --ja-blush: 216, 178, 175;
    --ja-bordeaux: 142, 24, 32;
}

html,
body,
#main-wrapper {
    color: rgb(var(--ja-ink)) !important;
    background-color: rgb(var(--ja-paper)) !important;
    background-image:
        radial-gradient(circle at 12px 14px, rgba(var(--ja-olive), 0.055) 0 1px, transparent 1.5px),
        radial-gradient(circle at 33px 31px, rgba(var(--ja-bordeaux), 0.045) 0 0.8px, transparent 1.4px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(var(--ja-paper), 0.92)) !important;
    background-size: 42px 42px, 54px 54px, 100% 100% !important;
    font-family: "JA Cormorant", Georgia, "Times New Roman", serif !important;
    letter-spacing: 0 !important;
    overflow-x: hidden !important;
}

html,
body {
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
}

#main-wrapper {
    padding-top: 0 !important;
}

body,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.modal-content,
.btn,
button {
    font-family: "JA Cormorant", Georgia, "Times New Roman", serif !important;
}

.navbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1020 !important;
    width: 100% !important;
    transform: none !important;
    min-height: unset !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px solid rgba(var(--ja-olive), 0.16) !important;
    background: rgba(var(--ja-paper), 0.94) !important;
    box-shadow: 0 10px 28px rgba(var(--ja-olive), 0.08) !important;
    backdrop-filter: blur(8px);
}

.navbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
}

.navbar .navbar-logo {
    display: none !important;
}

.navbar .navbar-brand::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background-image: url("./wedding-carnation.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    filter: drop-shadow(0 3px 5px rgba(var(--ja-ink), 0.16));
}

.navbar .navbar-title {
    color: rgb(var(--ja-olive)) !important;
    font-size: 1.38rem !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    white-space: normal !important;
}

.navbar .navbar-options i,
.navbar .navbar-options svg {
    color: rgba(var(--ja-olive), 0.82) !important;
}

.navbar .navbar-options i:hover,
.navbar .navbar-options svg:hover {
    color: rgba(var(--ja-bordeaux), 0.72) !important;
}

#main-content {
    color: rgb(var(--ja-ink)) !important;
    padding-top: calc(3.25rem + 1vh) !important;
}

#main-content > .container:first-child {
    padding-top: 0 !important;
}

.file-uploader {
    margin-top: 0 !important;
}

.card,
.modal .modal-content,
.dropdown-menu {
    color: rgb(var(--ja-ink)) !important;
    background:
        linear-gradient(180deg, rgba(var(--ja-paper-warm), 0.93), rgba(var(--ja-paper), 0.88)) !important;
    border: 1px solid rgba(var(--ja-olive), 0.18) !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 38px rgba(var(--ja-ink), 0.10) !important;
}

.card .card-header,
.modal .modal-header {
    border-bottom: 1px solid rgba(var(--ja-gold), 0.24) !important;
    background: rgba(var(--ja-olive-soft), 0.08) !important;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.display-7,
h1,
h2,
h3,
h4,
h5,
h6,
.modal .modal-header .modal-title {
    color: rgb(var(--ja-olive)) !important;
    font-family: "JA Cormorant", Georgia, "Times New Roman", serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.035em !important;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    text-transform: uppercase !important;
}

.quote {
    color: rgb(var(--ja-olive)) !important;
    background: rgba(var(--ja-gold), 0.13) !important;
    border-left: 3px solid rgba(var(--ja-gold), 0.65) !important;
    font-family: "JA Script", "JA Cormorant", Georgia, serif !important;
    font-size: 2.35rem !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
}

.quote p,
.review-counter h6 {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

a,
.link-primary-1,
.link-primary-2,
.link-primary-3 {
    color: rgb(var(--ja-olive)) !important;
}

a:hover,
.link-primary-1:hover,
.link-primary-2:hover,
.link-primary-3:hover {
    color: rgb(var(--ja-bordeaux)) !important;
}

.btn,
.btn-primary,
.btn-primary-1,
.btn-primary-2,
.btn-primary-3,
.btn-secondary-1,
.btn-secondary-2 {
    --bs-btn-color: rgb(var(--ja-paper-warm)) !important;
    --bs-btn-bg: rgba(var(--ja-olive), 0.92) !important;
    --bs-btn-border-color: rgba(var(--ja-olive), 0.92) !important;
    --bs-btn-hover-color: rgb(var(--ja-paper-warm)) !important;
    --bs-btn-hover-bg: rgb(var(--ja-bordeaux)) !important;
    --bs-btn-hover-border-color: rgb(var(--ja-bordeaux)) !important;
    --bs-btn-active-color: rgb(var(--ja-paper-warm)) !important;
    --bs-btn-active-bg: rgb(var(--ja-bordeaux)) !important;
    --bs-btn-active-border-color: rgb(var(--ja-bordeaux)) !important;
    border-radius: 4px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
}

.btnDownloadGallery {
    font-size: 0 !important;
}

.btnDownloadGallery::after {
    content: "Herunterladen";
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.btn-multi-select.fa-square-check {
    color: transparent !important;
    background-color: rgba(var(--ja-paper-warm), 0.96) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%238E1820' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 82% 82% !important;
    border: 2px solid rgba(var(--ja-olive-soft), 0.95) !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 8px rgba(var(--ja-ink), 0.12) !important;
}

.btn-multi-select.fa-square-check path {
    fill: transparent !important;
}

.form-control,
.form-select {
    color: rgb(var(--ja-ink)) !important;
    background-color: rgba(var(--ja-paper-warm), 0.86) !important;
    border-color: rgba(var(--ja-olive), 0.28) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--ja-olive), 0.72) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--ja-olive), 0.16) !important;
}

input[type="checkbox"] {
    accent-color: rgb(var(--ja-bordeaux)) !important;
}

.form-check-input[type="checkbox"],
input[type="checkbox"].form-check-input {
    background-color: rgba(var(--ja-paper-warm), 0.92) !important;
    border-color: rgba(var(--ja-olive), 0.42) !important;
}

.form-check-input[type="checkbox"]:checked,
input[type="checkbox"].form-check-input:checked {
    background-color: rgba(var(--ja-paper-warm), 0.96) !important;
    border-color: rgba(var(--ja-olive), 0.52) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%238E1820' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-7'/%3e%3c/svg%3e") !important;
}

.form-check-input[type="checkbox"]:focus,
input[type="checkbox"].form-check-input:focus {
    border-color: rgba(var(--ja-bordeaux), 0.55) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--ja-bordeaux), 0.15) !important;
}

.form-text,
.text-muted,
.text-secondary {
    color: rgba(var(--ja-ink), 0.66) !important;
}

.review-counter {
    border-bottom: 1px solid rgba(var(--ja-olive), 0.58) !important;
    padding-bottom: 0.85rem !important;
}

.badge,
.alert,
.toast {
    border-radius: 4px !important;
}

.nav-tabs,
.nav-border-bottom {
    border-color: rgba(var(--ja-gold), 0.35) !important;
}

.nav-tabs .nav-item .nav-link {
    color: rgb(var(--ja-olive)) !important;
    background-color: rgba(var(--ja-paper-warm), 0.76) !important;
    border-color: rgba(var(--ja-gold), 0.35) !important;
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link.active:hover {
    color: rgb(var(--ja-bordeaux)) !important;
    background-color: rgba(var(--ja-blush), 0.20) !important;
}

.gallery-item,
.gallery-card,
.gallery-item-wrapper,
.media-item,
.media-card {
    border-radius: 6px !important;
    box-shadow: 0 12px 30px rgba(var(--ja-ink), 0.10) !important;
}

.gallery-item img,
.gallery-card img,
.media-item img,
.media-card img {
    border-radius: 6px !important;
}

.file-uploader-form,
.upload_drop {
    color: rgb(var(--ja-olive)) !important;
    border-color: rgba(var(--ja-olive), 0.24) !important;
    outline-color: rgba(var(--ja-olive), 0.52) !important;
    background: rgba(var(--ja-paper-warm), 0.70) !important;
    border-radius: 6px !important;
}

.upload_drop .upload_svg,
.upload_drop h2,
.upload_drop p {
    color: rgb(var(--ja-olive)) !important;
    fill: rgb(var(--ja-olive)) !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.upload_drop.highlight {
    color: rgb(var(--ja-bordeaux)) !important;
    outline-color: rgba(var(--ja-bordeaux), 0.62) !important;
    background: rgba(var(--ja-blush), 0.16) !important;
}

.qrcode-wrapper canvas,
.qrcode-wrapper img {
    background: rgb(var(--ja-paper-warm)) !important;
    border: 10px solid rgb(var(--ja-paper-warm)) !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px rgba(var(--ja-ink), 0.12) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
    color: rgb(var(--ja-paper-warm)) !important;
    background-color: rgba(var(--ja-olive), 0.86) !important;
    border-color: rgba(var(--ja-olive), 0.86) !important;
}

footer,
.btn-show-sponsors,
.fa-sponsor-badge,
a[href*="github.com/sponsors/Memtly"],
a[href*="buymeacoffee.com/memtly"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 699px) {
    html,
    body,
    #main-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
    }

    #main-wrapper {
        padding-top: 0 !important;
    }

    section,
    .container,
    .row,
    #main-gallery {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #main-gallery {
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .navbar {
        min-height: unset !important;
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    #main-content {
        padding-top: calc(3rem + 1vh) !important;
    }

    .file-uploader {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .file-uploader .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar .navbar-brand::before {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        background-size: 32px 32px;
    }

    .navbar .navbar-title {
        font-size: 1.02rem !important;
        letter-spacing: 0.035em !important;
    }

    .quote {
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
    }

    .quote p {
        margin: 1.2rem 0.75rem !important;
    }

    .review-counter {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        column-gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .review-counter .col-4 {
        display: block !important;
        flex: initial !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .review-counter h6 {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .file-uploader-form,
    .upload_drop {
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .file-uploader-form {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem auto 1.15rem auto !important;
    }

    .upload_drop {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .upload_drop h2 {
        font-size: 1.42rem !important;
    }

    .upload_drop p {
        font-size: 0.92rem !important;
        line-height: 1.25 !important;
    }

    .upload_drop p:first-of-type {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .upload_drop p:first-of-type::after {
        content: "Bilder hier ablegen oder antippen";
        display: block;
        font-size: 0.92rem !important;
        line-height: 1.25 !important;
    }

    .btnDownloadGallery::after {
        font-size: 1rem !important;
    }

    #main-gallery + .col-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #main-gallery + .col-12 .row,
    #main-gallery + .col-12 .col-12 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    #main-gallery + .col-12 .btn-group,
    #main-gallery + .col-12 .btnDownloadGallery {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .card {
        border-radius: 4px !important;
    }
}