/* =========================================================
   AP DESIGNKU — TEMPLATE THEME SYSTEM
   Theme: Soft Botanical Garden

   PARENT UTAMA:
   ap-theme

   TEXT:
   Default Heading    = tanpa class
   Isi                = ap-text
   Muted              = ap-muted
   Accent             = ap-accent
   Champagne          = ap-champagne
   Blue               = ap-blue
   Pink               = ap-pink
   Lavender           = ap-lavender

   BUTTON:
   Default            = tanpa class
   Secondary          = ap-button-secondary
   Gradient           = ap-button-gradient

   BACKGROUND:
   Primary            = ap-bg / ap-bg-primary
   Secondary          = ap-bg-secondary
   Surface / Card     = ap-surface
   Gradient           = ap-bg-gradient

   BORDER:
   Default            = ap-border / ap-border-default
   Secondary          = ap-border-secondary
   Accent             = ap-border-accent

   LAINNYA:
   Primary Background = ap-primary-bg
   Light Background   = ap-primary-light-bg
   ========================================================= */

/* =========================================================
   1. THEME COLOR CONTROL

   CUKUP UBAH WARNA DI BAGIAN INI.
   SEMUA ELEMEN DI BAWAH AKAN MENGIKUTI OTOMATIS.
   ========================================================= */

.ap-theme {

    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    /* Heading utama */
    --ap-heading: #000000;

    /* Isi / informasi */
    --ap-text: #ffffff;

    /* Text sekunder / lebih lembut */
    --ap-muted: #646B54;

    /* =====================================================
       PRIMARY COLOR
       ===================================================== */

    --ap-primary: #869C98;

    --ap-primary-light: #A9B683;

    --ap-primary-hover: #767F70;

    /* =====================================================
       ACCENT COLORS
       ===================================================== */

    --ap-blue: #A9BBCB;

    --ap-pink: #E0B9B4;

    --ap-lavender: #C9B7D3;

    --ap-champagne: #D7BB83;

    /* =====================================================
       BACKGROUND
       ===================================================== */

    /* Background utama */
    --ap-bg-primary: #646B54;

    /* Background alternatif */
    --ap-bg-secondary: #EDE9E0;

    /* Card / surface */
    --ap-surface: #F8F8F2;

    /* Background Gradient */
    --ap-bg-gradient-1: #646B54;

    --ap-bg-gradient-2: #97a577;

    /* Background overlay palette; each container opts in separately. */
    --ap-overlay-gradient-1: #00000000;
    --ap-overlay-gradient-2: #D7BB83;

    /* =====================================================
       BORDER
       ===================================================== */

    /* Border default */
    --ap-border-default: #646B54;

    /* Border alternatif / champagne */
    --ap-border-secondary: #C4AE9C;

    /* Border warna primary */
    --ap-border-accent: #869C98;

    /* =====================================================
       BUTTON 1 — DEFAULT

       Tanpa CSS Class
       ===================================================== */

    --ap-button-default-bg: #646B54;

    --ap-button-default-hover: #6F827E;

    --ap-button-default-text: #F8F8F2;

    --ap-button-default-text-hover: #FFFFFF;

    /* =====================================================
       BUTTON 2 — SECONDARY

       CSS Class:
       ap-button-secondary
       ===================================================== */

    --ap-button-secondary-bg: #A9B683;

    --ap-button-secondary-hover: #909E70;

    --ap-button-secondary-text: #393F2F;

    --ap-button-secondary-text-hover: #FFFFFF;

    /* =====================================================
       BUTTON 3 — GRADIENT

       CSS Class:
       ap-button-gradient
       ===================================================== */

    --ap-button-gradient-1: #869C98;

    --ap-button-gradient-2: #A9B683;

    /* Gradient saat hover */

    --ap-button-gradient-hover-1: #748A85;

    --ap-button-gradient-hover-2: #909E70;

    /* Text */

    --ap-button-gradient-text: #FFFFFF;

    --ap-button-gradient-text-hover: #FFFFFF;

    /* =====================================================
       DEFAULT BACKGROUND PARENT
       ===================================================== */

    background-color: var(--ap-bg-primary);
}

/* =========================================================
   2. DEFAULT HEADING

   Semua Heading Elementor yang tidak memiliki
   class khusus otomatis menggunakan warna ini.
   ========================================================= */

.ap-theme h1,
.ap-theme h2,
.ap-theme h3,
.ap-theme h4,
.ap-theme h5,
.ap-theme h6,
.ap-theme .elementor-widget-heading .elementor-heading-title,
.ap-theme .elementor-heading-title {

    color: var(--ap-heading) !important;
}

/* =========================================================
   3. TEXT / ISI

   CSS Class:
   ap-text

   Contoh:
   tanggal
   jam
   lokasi
   alamat
   informasi
   nomor rekening
   ========================================================= */

.ap-theme .ap-text,
.ap-theme .ap-text .elementor-heading-title,
.ap-theme .ap-text .elementor-icon-box-title,
.ap-theme .ap-text .elementor-icon-box-title a,
.ap-theme .ap-text .elementor-icon-box-description,
.ap-theme .ap-text .elementor-icon-box-description a {

    color: var(--ap-text) !important;
}

/* =========================================================
   4. MUTED TEXT

   CSS Class:
   ap-muted

   Contoh:
   Kepada Yth.
   Dear Mr/Mrs
   subtitle
   label kecil
   ========================================================= */

.ap-theme .ap-muted,
.ap-theme .ap-muted .elementor-heading-title,
.ap-theme .ap-muted .elementor-icon-box-title,
.ap-theme .ap-muted .elementor-icon-box-title a,
.ap-theme .ap-muted .elementor-icon-box-description,
.ap-theme .ap-muted .elementor-icon-box-description a {

    color: var(--ap-muted) !important;
}

/* =========================================================
   5. PRIMARY ACCENT TEXT

   CSS Class:
   ap-accent
   ========================================================= */

.ap-theme .ap-accent,
.ap-theme .ap-accent .elementor-heading-title,
.ap-theme .ap-accent .elementor-icon-box-title,
.ap-theme .ap-accent .elementor-icon-box-title a,
.ap-theme .ap-accent .elementor-icon-box-description,
.ap-theme .ap-accent .elementor-icon-box-description a {

    color: var(--ap-primary) !important;
}

/* =========================================================
   6. CHAMPAGNE TEXT

   CSS Class:
   ap-champagne
   ========================================================= */

.ap-theme .ap-champagne,
.ap-theme .ap-champagne .elementor-heading-title,
.ap-theme .ap-champagne .elementor-icon-box-title,
.ap-theme .ap-champagne .elementor-icon-box-title a,
.ap-theme .ap-champagne .elementor-icon-box-description,
.ap-theme .ap-champagne .elementor-icon-box-description a {

    color: var(--ap-champagne) !important;
}

/* =========================================================
   7. BLUE TEXT

   CSS Class:
   ap-blue
   ========================================================= */

.ap-theme .ap-blue,
.ap-theme .ap-blue .elementor-heading-title,
.ap-theme .ap-blue .elementor-icon-box-title,
.ap-theme .ap-blue .elementor-icon-box-title a,
.ap-theme .ap-blue .elementor-icon-box-description,
.ap-theme .ap-blue .elementor-icon-box-description a {

    color: var(--ap-blue) !important;
}

/* =========================================================
   8. PINK TEXT

   CSS Class:
   ap-pink
   ========================================================= */

.ap-theme .ap-pink,
.ap-theme .ap-pink .elementor-heading-title,
.ap-theme .ap-pink .elementor-icon-box-title,
.ap-theme .ap-pink .elementor-icon-box-title a,
.ap-theme .ap-pink .elementor-icon-box-description,
.ap-theme .ap-pink .elementor-icon-box-description a {

    color: var(--ap-pink) !important;
}

/* =========================================================
   9. LAVENDER TEXT

   CSS Class:
   ap-lavender
   ========================================================= */

.ap-theme .ap-lavender,
.ap-theme .ap-lavender .elementor-heading-title,
.ap-theme .ap-lavender .elementor-icon-box-title,
.ap-theme .ap-lavender .elementor-icon-box-title a,
.ap-theme .ap-lavender .elementor-icon-box-description,
.ap-theme .ap-lavender .elementor-icon-box-description a {

    color: var(--ap-lavender) !important;
}

/* =========================================================
   10. BUTTON GLOBAL

   Transition berlaku untuk semua tipe button
   ========================================================= */

.ap-theme .elementor-button {

    transition:
        background 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* =========================================================
   11. BUTTON DEFAULT

   Tidak perlu CSS Class
   ========================================================= */

.ap-theme .elementor-button {

    background:
        var(--ap-button-default-bg) !important;

    border-color:
        var(--ap-button-default-bg) !important;

    color:
        var(--ap-button-default-text) !important;
}

/* DEFAULT BUTTON TEXT */

.ap-theme .elementor-button .elementor-button-text {

    color:
        var(--ap-button-default-text) !important;
}

/* DEFAULT BUTTON ICON */

.ap-theme .elementor-button .elementor-button-icon,
.ap-theme .elementor-button .elementor-button-icon i {

    color:
        var(--ap-button-default-text) !important;
}

.ap-theme .elementor-button .elementor-button-icon svg {

    color:
        var(--ap-button-default-text) !important;

    fill:
        currentColor;
}

/* DEFAULT BUTTON HOVER */

.ap-theme .elementor-button:hover,
.ap-theme .elementor-button:focus {

    background:
        var(--ap-button-default-hover) !important;

    border-color:
        var(--ap-button-default-hover) !important;

    color:
        var(--ap-button-default-text-hover) !important;
}

/* DEFAULT TEXT HOVER */

.ap-theme .elementor-button:hover .elementor-button-text,
.ap-theme .elementor-button:focus .elementor-button-text {

    color:
        var(--ap-button-default-text-hover) !important;
}

/* DEFAULT ICON HOVER */

.ap-theme .elementor-button:hover .elementor-button-icon,
.ap-theme .elementor-button:focus .elementor-button-icon,
.ap-theme .elementor-button:hover .elementor-button-icon i,
.ap-theme .elementor-button:focus .elementor-button-icon i {

    color:
        var(--ap-button-default-text-hover) !important;
}

.ap-theme .elementor-button:hover .elementor-button-icon svg,
.ap-theme .elementor-button:focus .elementor-button-icon svg {

    color:
        var(--ap-button-default-text-hover) !important;

    fill:
        currentColor;
}

/* =========================================================
   12. BUTTON SECONDARY

   CSS Class:
   ap-button-secondary
   ========================================================= */

.ap-theme .ap-button-secondary .elementor-button,
.ap-theme .elementor-button.ap-button-secondary {

    background:
        var(--ap-button-secondary-bg) !important;

    border-color:
        var(--ap-button-secondary-bg) !important;

    color:
        var(--ap-button-secondary-text) !important;
}

/* SECONDARY TEXT */

.ap-theme .ap-button-secondary .elementor-button .elementor-button-text,
.ap-theme .elementor-button.ap-button-secondary .elementor-button-text {

    color:
        var(--ap-button-secondary-text) !important;
}

/* SECONDARY ICON */

.ap-theme .ap-button-secondary .elementor-button .elementor-button-icon,
.ap-theme .ap-button-secondary .elementor-button .elementor-button-icon i,
.ap-theme .elementor-button.ap-button-secondary .elementor-button-icon,
.ap-theme .elementor-button.ap-button-secondary .elementor-button-icon i {

    color:
        var(--ap-button-secondary-text) !important;
}

.ap-theme .ap-button-secondary .elementor-button .elementor-button-icon svg,
.ap-theme .elementor-button.ap-button-secondary .elementor-button-icon svg {

    color:
        var(--ap-button-secondary-text) !important;

    fill:
        currentColor;
}

/* SECONDARY HOVER */

.ap-theme .ap-button-secondary .elementor-button:hover,
.ap-theme .ap-button-secondary .elementor-button:focus,
.ap-theme .elementor-button.ap-button-secondary:hover,
.ap-theme .elementor-button.ap-button-secondary:focus {

    background:
        var(--ap-button-secondary-hover) !important;

    border-color:
        var(--ap-button-secondary-hover) !important;

    color:
        var(--ap-button-secondary-text-hover) !important;
}

/* SECONDARY TEXT HOVER */

.ap-theme .ap-button-secondary .elementor-button:hover .elementor-button-text,
.ap-theme .ap-button-secondary .elementor-button:focus .elementor-button-text,
.ap-theme .elementor-button.ap-button-secondary:hover .elementor-button-text,
.ap-theme .elementor-button.ap-button-secondary:focus .elementor-button-text {

    color:
        var(--ap-button-secondary-text-hover) !important;
}

/* SECONDARY ICON HOVER */

.ap-theme .ap-button-secondary .elementor-button:hover .elementor-button-icon,
.ap-theme .ap-button-secondary .elementor-button:focus .elementor-button-icon,
.ap-theme .ap-button-secondary .elementor-button:hover .elementor-button-icon i,
.ap-theme .ap-button-secondary .elementor-button:focus .elementor-button-icon i,
.ap-theme .elementor-button.ap-button-secondary:hover .elementor-button-icon,
.ap-theme .elementor-button.ap-button-secondary:focus .elementor-button-icon,
.ap-theme .elementor-button.ap-button-secondary:hover .elementor-button-icon i,
.ap-theme .elementor-button.ap-button-secondary:focus .elementor-button-icon i {

    color:
        var(--ap-button-secondary-text-hover) !important;
}

.ap-theme .ap-button-secondary .elementor-button:hover .elementor-button-icon svg,
.ap-theme .ap-button-secondary .elementor-button:focus .elementor-button-icon svg,
.ap-theme .elementor-button.ap-button-secondary:hover .elementor-button-icon svg,
.ap-theme .elementor-button.ap-button-secondary:focus .elementor-button-icon svg {

    color:
        var(--ap-button-secondary-text-hover) !important;

    fill:
        currentColor;
}

/* =========================================================
   13. BUTTON GRADIENT

   CSS Class:
   ap-button-gradient
   ========================================================= */

.ap-theme .ap-button-gradient .elementor-button,
.ap-theme .elementor-button.ap-button-gradient {

    background:
        linear-gradient(
            135deg,
            var(--ap-button-gradient-1) 0%,
            var(--ap-button-gradient-2) 100%
        ) !important;

    border-color:
        transparent !important;

    color:
        var(--ap-button-gradient-text) !important;
}

/* GRADIENT TEXT */

.ap-theme .ap-button-gradient .elementor-button .elementor-button-text,
.ap-theme .elementor-button.ap-button-gradient .elementor-button-text {

    color:
        var(--ap-button-gradient-text) !important;
}

/* GRADIENT ICON */

.ap-theme .ap-button-gradient .elementor-button .elementor-button-icon,
.ap-theme .ap-button-gradient .elementor-button .elementor-button-icon i,
.ap-theme .elementor-button.ap-button-gradient .elementor-button-icon,
.ap-theme .elementor-button.ap-button-gradient .elementor-button-icon i {

    color:
        var(--ap-button-gradient-text) !important;
}

.ap-theme .ap-button-gradient .elementor-button .elementor-button-icon svg,
.ap-theme .elementor-button.ap-button-gradient .elementor-button-icon svg {

    color:
        var(--ap-button-gradient-text) !important;

    fill:
        currentColor;
}

/* GRADIENT HOVER */

.ap-theme .ap-button-gradient .elementor-button:hover,
.ap-theme .ap-button-gradient .elementor-button:focus,
.ap-theme .elementor-button.ap-button-gradient:hover,
.ap-theme .elementor-button.ap-button-gradient:focus {

    background:
        linear-gradient(
            135deg,
            var(--ap-button-gradient-hover-1) 0%,
            var(--ap-button-gradient-hover-2) 100%
        ) !important;

    border-color:
        transparent !important;

    color:
        var(--ap-button-gradient-text-hover) !important;
}

/* GRADIENT TEXT HOVER */

.ap-theme .ap-button-gradient .elementor-button:hover .elementor-button-text,
.ap-theme .ap-button-gradient .elementor-button:focus .elementor-button-text,
.ap-theme .elementor-button.ap-button-gradient:hover .elementor-button-text,
.ap-theme .elementor-button.ap-button-gradient:focus .elementor-button-text {

    color:
        var(--ap-button-gradient-text-hover) !important;
}

/* GRADIENT ICON HOVER */

.ap-theme .ap-button-gradient .elementor-button:hover .elementor-button-icon,
.ap-theme .ap-button-gradient .elementor-button:focus .elementor-button-icon,
.ap-theme .ap-button-gradient .elementor-button:hover .elementor-button-icon i,
.ap-theme .ap-button-gradient .elementor-button:focus .elementor-button-icon i,
.ap-theme .elementor-button.ap-button-gradient:hover .elementor-button-icon,
.ap-theme .elementor-button.ap-button-gradient:focus .elementor-button-icon,
.ap-theme .elementor-button.ap-button-gradient:hover .elementor-button-icon i,
.ap-theme .elementor-button.ap-button-gradient:focus .elementor-button-icon i {

    color:
        var(--ap-button-gradient-text-hover) !important;
}

.ap-theme .ap-button-gradient .elementor-button:hover .elementor-button-icon svg,
.ap-theme .ap-button-gradient .elementor-button:focus .elementor-button-icon svg,
.ap-theme .elementor-button.ap-button-gradient:hover .elementor-button-icon svg,
.ap-theme .elementor-button.ap-button-gradient:focus .elementor-button-icon svg {

    color:
        var(--ap-button-gradient-text-hover) !important;

    fill:
        currentColor;
}

/* =========================================================
   14. ICON WIDGET

   Elementor Icon otomatis menggunakan primary
   ========================================================= */

.ap-theme .elementor-widget-icon .elementor-icon {

    color:
        var(--ap-primary) !important;
}

.ap-theme .elementor-widget-icon .elementor-icon i {

    color:
        var(--ap-primary) !important;
}

.ap-theme .elementor-widget-icon .elementor-icon svg {

    color:
        var(--ap-primary) !important;

    fill:
        currentColor;
}

/* =========================================================
   15. ICON LIST
   ========================================================= */

.ap-theme .elementor-icon-list-icon i {

    color:
        var(--ap-primary) !important;
}

.ap-theme .elementor-icon-list-icon svg {

    color:
        var(--ap-primary) !important;

    fill:
        currentColor;
}

.ap-theme .elementor-icon-list-text {

    color:
        var(--ap-text);
}

/* =========================================================
   16. LINKS
   ========================================================= */

.ap-theme a:not(.elementor-button) {

    color:
        var(--ap-primary);
}

.ap-theme a:not(.elementor-button):hover {

    color:
        var(--ap-primary-hover);
}

/* =========================================================
   17. BACKGROUND PRIMARY

   CSS Class:
   ap-bg
   ATAU:
   ap-bg-primary
   ========================================================= */

.ap-theme .ap-bg,
.ap-theme .ap-bg-primary {

    background-color:
        var(--ap-bg-primary) !important;
}

/* =========================================================
   18. BACKGROUND SECONDARY

   CSS Class:
   ap-bg-secondary
   ========================================================= */

.ap-theme .ap-bg-secondary {

    background-color:
        var(--ap-bg-secondary) !important;
}

/* =========================================================
   19. SURFACE / CARD BACKGROUND

   CSS Class:
   ap-surface
   ========================================================= */

.ap-theme .ap-surface {

    background-color:
        var(--ap-surface) !important;
}

/* =========================================================
   20. BACKGROUND GRADIENT

   CSS Class:
   ap-bg-gradient
   ========================================================= */

.ap-theme .ap-bg-gradient {

    background:
        linear-gradient(
            135deg,
            var(--ap-bg-gradient-1) 0%,
            var(--ap-bg-gradient-2) 100%
        ) !important;
}

/* =========================================================
   21. BORDER DEFAULT

   CSS Class:
   ap-border
   ATAU:
   ap-border-default

   Border width / style tetap mengikuti Elementor.
   CSS ini hanya mengatur WARNANYA.
   ========================================================= */

.ap-theme .ap-border,
.ap-theme .ap-border-default {

    border-color:
        var(--ap-border-default) !important;
}

/* =========================================================
   22. BORDER SECONDARY

   CSS Class:
   ap-border-secondary

   Cocok untuk:
   champagne
   card
   divider
   frame
   ========================================================= */

.ap-theme .ap-border-secondary {

    border-color:
        var(--ap-border-secondary) !important;
}

/* =========================================================
   23. BORDER ACCENT

   CSS Class:
   ap-border-accent
   ========================================================= */

.ap-theme .ap-border-accent {

    border-color:
        var(--ap-border-accent) !important;
}

/* =========================================================
   24. PRIMARY BACKGROUND

   CSS Class:
   ap-primary-bg

   Cocok untuk:
   badge
   circle
   box
   card kecil
   ========================================================= */

.ap-theme .ap-primary-bg {

    background-color:
        var(--ap-primary) !important;
}

/* TEXT DI DALAM PRIMARY BACKGROUND */

.ap-theme .ap-primary-bg,
.ap-theme .ap-primary-bg .elementor-heading-title,
.ap-theme .ap-primary-bg .elementor-icon-box-title,
.ap-theme .ap-primary-bg .elementor-icon-box-title a,
.ap-theme .ap-primary-bg .elementor-icon-box-description,
.ap-theme .ap-primary-bg .elementor-icon-box-description a {

    color:
        #FFFFFF !important;
}

/* =========================================================
   25. PRIMARY LIGHT BACKGROUND

   CSS Class:
   ap-primary-light-bg
   ========================================================= */

.ap-theme .ap-primary-light-bg {

    background-color:
        var(--ap-primary-light) !important;
}

/* =========================================================
   26. FORM

   Input
   Textarea
   Select
   RSVP
   Wishes
   ========================================================= */

.ap-theme input,
.ap-theme textarea,
.ap-theme select {

    color:
        var(--ap-text) !important;

    border-color:
        var(--ap-border-default) !important;
}

/* =========================================================
   27. FORM FOCUS
   ========================================================= */

.ap-theme input:focus,
.ap-theme textarea:focus,
.ap-theme select:focus {

    border-color:
        var(--ap-primary) !important;

    outline-color:
        var(--ap-primary);
}

/* =========================================================
   28. PLACEHOLDER
   ========================================================= */

.ap-theme input::placeholder,
.ap-theme textarea::placeholder {

    color:
        var(--ap-muted) !important;

    opacity:
        1;
}

/* =========================================================
   29. HR
   ========================================================= */

.ap-theme hr {

    border-color:
        var(--ap-border-default);
}

/* =========================================================
   30. ELEMENTOR DIVIDER
   ========================================================= */

.ap-theme .elementor-divider-separator {

    border-color:
        var(--ap-border-default) !important;
}

/* WeddingSaaS buttons: color only; preserve native layout and form states. */
.ap-theme {
    --ap-wds-button-bg: var(--ap-button-default-bg);
    --ap-wds-button-border: var(--ap-button-default-bg);
    --ap-wds-button-text: var(--ap-button-default-text);
    --ap-wds-button-hover-bg: var(--ap-button-default-hover);
    --ap-wds-button-hover-border: var(--ap-button-default-hover);
    --ap-wds-button-hover-text: var(--ap-button-default-text-hover);
}

.ap-theme.ap-button-secondary,
.ap-theme .ap-button-secondary {
    --ap-wds-button-bg: var(--ap-button-secondary-bg);
    --ap-wds-button-border: var(--ap-button-secondary-bg);
    --ap-wds-button-text: var(--ap-button-secondary-text);
    --ap-wds-button-hover-bg: var(--ap-button-secondary-hover);
    --ap-wds-button-hover-border: var(--ap-button-secondary-hover);
    --ap-wds-button-hover-text: var(--ap-button-secondary-text-hover);
}

.ap-theme.ap-button-gradient,
.ap-theme .ap-button-gradient {
    --ap-wds-button-bg: linear-gradient(135deg, var(--ap-button-gradient-1) 0%, var(--ap-button-gradient-2) 100%);
    --ap-wds-button-border: transparent;
    --ap-wds-button-text: var(--ap-button-gradient-text);
    --ap-wds-button-hover-bg: linear-gradient(135deg, var(--ap-button-gradient-hover-1) 0%, var(--ap-button-gradient-hover-2) 100%);
    --ap-wds-button-hover-border: transparent;
    --ap-wds-button-hover-text: var(--ap-button-gradient-text-hover);
}

.ap-theme .wds-rsvp-only :is(.wds-rsvp-only__submit, .wds-rsvp-only__edit),
.ap-theme .elementor-widget-wds_rsvp .saic-wrapper .saic-wrap-submit input[type="submit"] {
    background: var(--ap-wds-button-bg) !important;
    border-color: var(--ap-wds-button-border) !important;
    color: var(--ap-wds-button-text) !important;
}

.ap-theme .wds-rsvp-only :is(.wds-rsvp-only__submit, .wds-rsvp-only__edit):is(:hover, :focus),
.ap-theme .elementor-widget-wds_rsvp .saic-wrapper .saic-wrap-submit input[type="submit"]:is(:hover, :focus) {
    background: var(--ap-wds-button-hover-bg) !important;
    border-color: var(--ap-wds-button-hover-border) !important;
    color: var(--ap-wds-button-hover-text) !important;
}

/* Labels and icons inherit the active button color, including loading labels.
   Do not change spinner borders, animation, display, opacity or visibility. */
.ap-theme .wds-rsvp-only :is(.wds-rsvp-only__submit, .wds-rsvp-only__edit) :is(span, i, svg) {
    color: inherit !important;
}

.ap-theme .wds-rsvp-only :is(.wds-rsvp-only__submit-icon, .wds-rsvp-only__edit-icon) svg {
    fill: currentColor;
}