/* assets/css/prayer-pop.css */

/* Global Variables */
:root {
    --pp-bg-color: #2755AA; /* Default global color for bubble and button */
    --pp-font-color: #ffffff; /* White for text */
    --pp-label-color: #333333; /* Dark gray for label text */
    --pp-button-hover-color: #1F4A99; /* Hover color for button and bubble */
    --pp-textarea-bg-color: #f9f9f9; /* Light gray for textarea background */
    --pp-border-color: #ddd; /* Border color for inputs */
    --pp-border-radius: 8px; /* Global border radius */
    --pp-panel-border-radius: 20px; /* The popup panel's radius is deliberately larger than the shared control radius above */
    /* Target width of every popup/chat panel — the default form popup, the
       classic-footer chat host, and the Messenger layout. One token so they
       stay the same size; each still clamps to the viewport on small screens
       via min(var(--pp-popup-width), calc(100vw - 32px)). */
    --pp-popup-width: 400px;
    --pp-padding: 15px; /* Global padding */
    /* Distance from the widget's edge to a screen's content. One value for
       every shell: the popup panel and the chat shell's screens previously
       used 15px and 18px respectively, so the same screen sat at a different
       inset depending on the layout. */
    --pp-screen-inset: 20px;

    /* Panel header geometry. These used to be written out as separate numbers
       in each rule that needed them, so a control could be resized without the
       header padding or the title's centring following it — which is how the
       close ended up 46x28 and titles ended up a few pixels off centre. */
    --pp-header-height: 56px;
    --pp-control-size: 28px;              /* back and close hit area */
    --pp-control-inset: 12px;             /* panel edge to control */
    /* Space a header reserves at each end so a control never collides with the
       title. Derived, so resizing a control moves the title with it. */
    --pp-header-gutter: calc(var(--pp-control-inset) + var(--pp-control-size) + 8px);
    /* Vertical centring of a control in the header bar. */
    --pp-control-offset: calc((var(--pp-header-height) - var(--pp-control-size)) / 2);
    --pp-control-glyph: 16px;             /* drawn width of the close cross */
    /* The conversation notice band. One appearance for every layout; it is a
       standing message from the team, not an error, so it reads as a quiet
       note rather than an alarm. */
    --pp-notice-bg: #fdf6e6;
    --pp-notice-color: #8a6d33;

    /* Header navigation controls (back and close) share one colour. They are
       peers in the same bar, so a different weight on either made one of them
       read as the primary action. */
    --pp-control-color: #687181;

    /* The composer sits on top of the message list by this much, and the list
       pads its bottom by the overlap plus one message gap so the last message
       still rests clear of it. Two rules that must move together. */
    --pp-composer-overlap: 20px;
    --pp-message-gap: 14px;
    --pp-margin: 15px; /* Global margin */

    /* Spacing scale: 4px base, 8pt-aligned.
       Vertical space carries grouping information, it is not decoration.
       Things that belong together sit closer than things that do not, and the
       space inside a group is never larger than the space around it. The
       submission form previously used one value (--pp-margin) for every gap,
       which read as a flat list of unrelated rows and made the panel taller
       than its content needed. */
    --pp-space-2xs: 4px;   /* a heading and the sentence that belongs to it */
    --pp-space-xs: 8px;    /* within a group: stacked fields, a pair of checkboxes */
    --pp-space-md: 16px;   /* between groups */

    /* The padding inside a field. */
    --pp-field-padding-y: 12px;
    --pp-field-padding-x: 14px;
    --pp-font-size: 16px; /* Global font size */
    --pp-bold-font-weight: bold; /* Global bold font weight */
    --pp-font-family: system-ui; /* Global font family */
    
    /* Heading-specific variables */
    --pp-heading-font-family: var(--pp-font-family); /* Heading font family */
    --pp-heading-font-size: 24px; /* Heading font size */
    --pp-heading-font-weight: 600; /* Heading font weight */
    
    /* Bubble-specific variables */
    --pp-bubble-padding: 15px; /* Bubble padding */
    --pp-bubble-margin: 20px; /* Bubble margin */
    --pp-bubble-height: 60px; /* Bubble height */
    
    /* Overlay stacking */
    --prayerpop-z-bubble: 1099000;
    --prayerpop-z-dropdown: 1099500;
    --prayerpop-z-modal: 1100000;
    --prayerpop-z-modal-dialog: 1100001;

}

.prayer-pop-preview-document,
.prayer-pop-preview-document body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent !important;
}

.prayer-pop-preview-document #wpadminbar {
    display: none !important;
}

/* Apply global font family to all elements */
#prayer-pop-bubble,
#prayer-pop-form-container,
#prayer-pop-form textarea,
#prayer-pop-form input[type="text"],
#prayer-pop-form input[type="email"],
#prayer-pop-form button[type="submit"],
#prayer-pop-new-request,
.prayer-pop-button,
#prayer-pop-success,
#prayer-pop-error,
#prayer-pop-header h2,
#prayer-pop-description p,
.prayer-pop-popup-intro,
#prayer-pop-faq .prayer-pop-faq-title,
#prayer-pop-faq .prayer-pop-faq-question,
#prayer-pop-faq .prayer-pop-faq-answer,
#prayer-pop-last-time,
.prayer-pop-request-content,
.prayer-pop-request-meta,
.prayer-pop-request-author,
.prayer-pop-request-time,
.prayer-pop-i-prayed-button,
.prayer-pop-i-prayed-count {
    font-family: var(--pp-font-family);
}

/* Shared Pro bubble and popup motion. */
@keyframes prayerpop-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes prayerpop-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes prayerpop-slide-in { from { opacity: .15; transform: translate3d(0, 64px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes prayerpop-slide-out { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 48px, 0); } }
@keyframes prayerpop-gentle-rise-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes prayerpop-gentle-rise-out { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes prayerpop-soft-scale-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes prayerpop-soft-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.9); } }
@keyframes prayerpop-pop-in {
    0% { opacity: 0; transform: scale(.76); }
    62% { opacity: 1; transform: scale(1.045); }
    82% { transform: scale(.992); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes prayerpop-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.84); } }
@keyframes prayerpop-bubble-slide-in { from { opacity: .1; transform: translateY(48px) scale(var(--prayerpop-bubble-scale, 1)); } to { opacity: 1; transform: translateY(0) scale(var(--prayerpop-bubble-scale, 1)); } }
@keyframes prayerpop-bubble-gentle-rise-in { from { opacity: 0; transform: translateY(11px) scale(var(--prayerpop-bubble-scale, 1)); } to { opacity: 1; transform: translateY(0) scale(var(--prayerpop-bubble-scale, 1)); } }
@keyframes prayerpop-bubble-soft-scale-in { from { opacity: 0; transform: scale(.68); } to { opacity: 1; transform: scale(var(--prayerpop-bubble-scale, 1)); } }
@keyframes prayerpop-bubble-pop-in {
    0% { opacity: 0; transform: scale(.55); }
    60% { opacity: 1; transform: scale(1.09); }
    80% { transform: scale(.975); }
    100% { opacity: 1; transform: scale(var(--prayerpop-bubble-scale, 1)); }
}

#prayer-pop-bubble.none { opacity: 1; transform: scale(var(--prayerpop-bubble-scale, 1)); }
#prayer-pop-bubble.fade-in { animation: prayerpop-fade-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.38,.9) both; }
#prayer-pop-bubble.gentle-rise { animation: prayerpop-bubble-gentle-rise-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.38,.9) both; }
#prayer-pop-bubble.soft-scale { animation: prayerpop-bubble-soft-scale-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.3,1) both; }
#prayer-pop-bubble.slide-up { animation: prayerpop-bubble-slide-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.3,1) both; }
#prayer-pop-bubble.bounce-in { animation: prayerpop-bubble-pop-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,.8,.2,1) both; }

#prayer-pop-form-container,
.ppfc-panel,
.prayer-pop-messenger { transform-origin: bottom right; }
#prayer-pop-modal[data-bubble-position="left"] #prayer-pop-form-container,
.ppfc-panel[data-position="left"],
.prayer-pop-messenger[data-bubble-position="left"] { transform-origin: bottom left; }

#prayer-pop-form-container.prayerpop-motion-enter.fade-in,
.ppfc-panel.prayerpop-motion-enter.fade-in,
.prayer-pop-messenger.prayerpop-motion-enter.fade-in { animation: prayerpop-fade-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.38,.9) both; }
#prayer-pop-form-container.prayerpop-motion-enter.gentle-rise,
.ppfc-panel.prayerpop-motion-enter.gentle-rise,
.prayer-pop-messenger.prayerpop-motion-enter.gentle-rise { animation: prayerpop-gentle-rise-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.38,.9) both; }
#prayer-pop-form-container.prayerpop-motion-enter.soft-scale,
.ppfc-panel.prayerpop-motion-enter.soft-scale,
.prayer-pop-messenger.prayerpop-motion-enter.soft-scale { animation: prayerpop-soft-scale-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.3,1) both; }
#prayer-pop-form-container.prayerpop-motion-enter.slide-up,
.ppfc-panel.prayerpop-motion-enter.slide-up,
.prayer-pop-messenger.prayerpop-motion-enter.slide-up { animation: prayerpop-slide-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(0,0,.3,1) both; }
#prayer-pop-form-container.prayerpop-motion-enter.bounce-in,
.ppfc-panel.prayerpop-motion-enter.bounce-in,
.prayer-pop-messenger.prayerpop-motion-enter.bounce-in { animation: prayerpop-pop-in var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,.8,.2,1) both; }
#prayer-pop-form-container.prayerpop-motion-exit.fade-in,
.ppfc-panel.prayerpop-motion-exit.fade-in,
.prayer-pop-messenger.prayerpop-motion-exit.fade-in { animation: prayerpop-fade-out var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,0,1,.9) both; }
#prayer-pop-form-container.prayerpop-motion-exit.gentle-rise,
.ppfc-panel.prayerpop-motion-exit.gentle-rise,
.prayer-pop-messenger.prayerpop-motion-exit.gentle-rise { animation: prayerpop-gentle-rise-out var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,0,1,.9) both; }
#prayer-pop-form-container.prayerpop-motion-exit.soft-scale,
.ppfc-panel.prayerpop-motion-exit.soft-scale,
.prayer-pop-messenger.prayerpop-motion-exit.soft-scale { animation: prayerpop-soft-scale-out var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,0,1,.9) both; }
#prayer-pop-form-container.prayerpop-motion-exit.slide-up,
.ppfc-panel.prayerpop-motion-exit.slide-up,
.prayer-pop-messenger.prayerpop-motion-exit.slide-up { animation: prayerpop-slide-out var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,0,1,.9) both; }
#prayer-pop-form-container.prayerpop-motion-exit.bounce-in,
.ppfc-panel.prayerpop-motion-exit.bounce-in,
.prayer-pop-messenger.prayerpop-motion-exit.bounce-in { animation: prayerpop-pop-out var(--prayerpop-motion-duration, 240ms) cubic-bezier(.2,0,1,.9) both; }

@media (prefers-reduced-motion: reduce) {
    #prayer-pop-bubble,
    #prayer-pop-form-container,
    .ppfc-panel,
    .prayer-pop-messenger { animation: none !important; }

    #prayer-pop-bubble[data-bubble-design="prayer_pill"].prayerpop-pill-reveal {
        width: auto;
    }
}

/* Bubble Styles */
#prayer-pop-bubble {
    --prayerpop-bubble-current-padding: var(--prayerpop-bubble-padding, var(--pp-bubble-padding));
    --prayerpop-bubble-content-size: max(12px, calc(var(--pp-bubble-height) - (var(--prayerpop-bubble-current-padding) * 2)));
    position: fixed;
    bottom: calc(var(--pp-bubble-margin) + var(--pp-bubble-offset-y, 0px));
    right: calc(var(--pp-bubble-margin) + var(--pp-bubble-offset-x, 0px));
    z-index: var(--prayerpop-z-bubble);
    background-color: var(--pp-bubble-bg-color, var(--pp-bg-color));
    color: var(--pp-font-color);
    border-radius: var(--pp-bubble-border-radius, var(--pp-border-radius));
    padding: var(--prayerpop-bubble-current-padding);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pp-bubble-height);
    height: var(--pp-bubble-height);
    font-size: var(--pp-font-size);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    transform: scale(var(--prayerpop-bubble-scale, 1));
    transform-origin: bottom right;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    outline-offset: 3px;
}

#prayer-pop-bubble[data-bubble-position="left"] {
    left: calc(var(--pp-bubble-margin) + var(--pp-bubble-offset-x, 0px));
    right: auto;
    transform-origin: bottom left;
}

#prayer-pop-bubble[data-bubble-shape="adaptive"],
#prayer-pop-bubble[data-bubble-shape="dynamic"] {
    width: auto;
    height: var(--pp-bubble-height);
    min-width: max(var(--pp-bubble-height), calc(var(--pp-bubble-height) * var(--prayerpop-icon-scale, 1)));
}

#prayer-pop-bubble[data-bubble-shape="fixed_square"],
#prayer-pop-bubble[data-bubble-shape="square"] {
    width: var(--pp-bubble-height);
    min-width: var(--pp-bubble-height);
    height: var(--pp-bubble-height);
}

#prayer-pop-bubble[data-bubble-shape="fixed_circle"],
#prayer-pop-bubble[data-bubble-shape="circle"] {
    width: var(--pp-bubble-height);
    min-width: var(--pp-bubble-height);
    height: var(--pp-bubble-height);
    border-radius: 9999px;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
}

/* When form container is visible, adjust bubble position */
#prayer-pop-modal:not([style*="display: none"]) ~ #prayer-pop-bubble {
    transform: translateY(0) scale(var(--prayerpop-bubble-scale, 1));
}

/* Hover Animation */
#prayer-pop-bubble:hover {
    transform: scale(var(--prayerpop-bubble-hover-scale, 1.03));
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Unread Chat replies remain visible on the launcher while its panel is closed. */
#prayer-pop-bubble .prayer-pop-chat-unread-badge {
    position: absolute;
    z-index: 2;
    top: -7px;
    right: -7px;
    display: grid;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    box-sizing: border-box;
    place-items: center;
    border: 2px solid var(--pp-bubble-bg-color, var(--pp-bg-color, #2755aa));
    border-radius: 999px;
    background: #fff;
    color: var(--pp-bubble-bg-color, var(--pp-bg-color, #2755aa));
    box-shadow: 0 2px 7px rgba(15, 23, 42, .2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

#prayer-pop-bubble[data-bubble-position="left"] .prayer-pop-chat-unread-badge {
    right: auto;
    left: -7px;
}

#prayer-pop-bubble .prayer-pop-chat-unread-badge[hidden] {
    display: none;
}

#prayer-pop-bubble:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pp-bg-color) 55%, #ffffff);
    outline-offset: 3px;
}

/* Chat Bubble Icon */
#prayer-pop-icon {
    font-size: var(--pp-font-size);
    font-weight: bold;
    color: var(--pp-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    gap: clamp(8px, calc(8px * var(--prayerpop-icon-scale, 1)), 14px);
    white-space: nowrap;
    overflow: visible;
}

/* Bubble Icon Text */
.prayer-pop-icon-text {
    font-size: var(--pp-font-size);
    font-weight: bold;
    color: var(--pp-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.prayer-pop-visual-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
    font-size: calc(clamp(12px, calc(var(--prayerpop-bubble-content-size) * 0.52), 56px) * var(--prayerpop-icon-scale, 1));
}

.prayer-pop-tabler-icon-wrap,
.prayer-pop-brand-icon-wrap {
    width: 1em;
    height: 1em;
    min-width: 1em;
    max-width: 1em;
    min-height: 1em;
    max-height: 1em;
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    flex: 0 0 1em;
}

#prayer-pop-bubble[data-bubble-shape="fixed_square"] #prayer-pop-icon,
#prayer-pop-bubble[data-bubble-shape="square"] #prayer-pop-icon,
#prayer-pop-bubble[data-bubble-shape="fixed_circle"] #prayer-pop-icon,
#prayer-pop-bubble[data-bubble-shape="circle"] #prayer-pop-icon {
    font-size: clamp(20px, calc(var(--prayerpop-bubble-content-size) * 0.66), 44px);
    width: 1em;
    height: 1em;
    min-width: 1em;
    max-width: 1em;
    gap: 0;
    flex: 0 0 1em;
    overflow: visible;
}

#prayer-pop-bubble[data-bubble-shape="fixed_square"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="square"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="fixed_circle"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="circle"] .prayer-pop-icon-text {
    font-size: inherit;
}

#prayer-pop-bubble[data-bubble-shape="fixed_square"][data-bubble-display="icon_text"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="fixed_square"][data-bubble-display="text_icon"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="square"][data-bubble-display="icon_text"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="square"][data-bubble-display="text_icon"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="fixed_circle"][data-bubble-display="icon_text"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="fixed_circle"][data-bubble-display="text_icon"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="circle"][data-bubble-display="icon_text"] .prayer-pop-icon-text,
#prayer-pop-bubble[data-bubble-shape="circle"][data-bubble-display="text_icon"] .prayer-pop-icon-text {
    display: none;
}

#prayer-pop-bubble[data-bubble-shape="fixed_square"] .prayer-pop-visual-icon,
#prayer-pop-bubble[data-bubble-shape="square"] .prayer-pop-visual-icon,
#prayer-pop-bubble[data-bubble-shape="fixed_circle"] .prayer-pop-visual-icon,
#prayer-pop-bubble[data-bubble-shape="circle"] .prayer-pop-visual-icon {
    font-size: calc(1em * var(--prayerpop-icon-scale, 1));
}

#prayer-pop-bubble[data-bubble-display="icon"] .prayer-pop-icon-text {
    display: none;
}

#prayer-pop-bubble[data-bubble-display="text"] .prayer-pop-visual-icon {
    display: none;
}

#prayer-pop-bubble[data-bubble-display="text_icon"] #prayer-pop-icon {
    flex-direction: row-reverse;
}

/* Prayer Pill preset: fixed pill geometry with the globally selected icon and editable label. */
#prayer-pop-bubble[data-bubble-design="prayer_pill"] {
    box-sizing: border-box;
    width: auto;
    max-width: calc(100vw - 44px);
    min-width: 0;
    height: 54px;
    min-height: 54px;
    padding: 7px 18px 7px 7px;
    border-radius: 999px;
    overflow: visible;
    clip-path: none;
    -webkit-clip-path: none;
    box-shadow: 0 15px 35px rgba(25, 53, 108, 0.30);
}

/*
 * Prayer Pill entrance: pop in as the selected icon, hold long enough to be
 * noticed, then grow into the full call-to-action. This intentionally belongs
 * only to the Prayer Pill; Classic bubble motion uses the saved Bubble Animation.
 */
#prayer-pop-bubble[data-bubble-design="prayer_pill"].prayerpop-pill-reveal {
    width: 54px;
    min-width: 54px;
    padding-right: 7px;
    overflow: hidden;
    will-change: width, padding-right, transform, opacity;
    animation:
        prayerpop-pill-pop var(--prayerpop-pill-motion-duration, 240ms) cubic-bezier(.45, 0, .55, 1) both,
        prayerpop-pill-expand var(--prayerpop-pill-expand-duration, 480ms) cubic-bezier(.8, 0, .2, 1) var(--prayerpop-pill-expand-delay, 4240ms) both;
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"].prayerpop-pill-reveal #prayer-pop-icon {
    animation: prayerpop-pill-content-reveal var(--prayerpop-pill-expand-duration, 480ms) cubic-bezier(.8, 0, .2, 1) var(--prayerpop-pill-expand-delay, 4240ms) both;
    will-change: width, max-width, flex-basis, gap;
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"].prayerpop-pill-reveal .prayer-pop-icon-text {
    animation: prayerpop-pill-label-reveal var(--prayerpop-pill-expand-duration, 480ms) cubic-bezier(.8, 0, .2, 1) var(--prayerpop-pill-expand-delay, 4240ms) both;
    white-space: nowrap;
    word-break: normal;
}

@keyframes prayerpop-pill-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.72);
    }
    70% {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes prayerpop-pill-expand {
    0% {
        width: 54px;
        padding-right: 7px;
    }
    100% {
        width: var(--prayerpop-pill-reveal-width);
        padding-right: 18px;
    }
}

@keyframes prayerpop-pill-content-reveal {
    0% {
        width: 40px;
        max-width: 40px;
        flex-basis: 40px;
        gap: 0;
    }
    100% {
        width: var(--prayerpop-pill-reveal-content-width);
        max-width: var(--prayerpop-pill-reveal-content-width);
        flex-basis: var(--prayerpop-pill-reveal-content-width);
        gap: 10px;
    }
}

@keyframes prayerpop-pill-label-reveal {
    0% {
        opacity: 0;
        transform: translateX(12px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"] #prayer-pop-icon {
    width: auto;
    height: 40px;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden;
    font-size: var(--pp-font-size, 16px);
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"][data-bubble-shape] .prayer-pop-icon-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--pp-font-color, #ffffff);
    font-size: var(--pp-font-size, 16px);
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.prayer-pop-pill-icon {
    align-items: center;
    box-sizing: border-box;
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--pp-font-color, #ffffff);
    background: rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    overflow: hidden;
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"] .prayer-pop-pill-icon .prayer-pop-visual-icon {
    align-items: center;
    color: inherit;
    display: inline-grid;
    font-size: clamp(14px, calc(16px * var(--prayerpop-icon-scale, 1)), 30px);
    height: 1em;
    justify-content: center;
    line-height: 1;
    min-height: 1em;
    min-width: 1em;
    place-items: center;
    width: 1em;
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"] .prayer-pop-pill-icon .prayer-pop-dashicon::before {
    display: block;
    line-height: 1;
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"]:hover {
    box-shadow: 0 18px 40px rgba(25, 53, 108, 0.36);
}

#prayer-pop-bubble[data-bubble-design="prayer_pill"][data-icon-type="none"] {
    padding-left: 18px;
}

/* Bubble Chat Label */
.prayer-pop-chat-label {
    position: fixed;
    left: var(--prayerpop-label-left, 50%);
    top: var(--prayerpop-label-top, 50%);
    transform: translateX(-100%) translateY(-50%) translateX(-6px);
    background: var(--pp-bg-color, #ffffff);
    color: var(--pp-font-color, #333333);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: var(--prayerpop-z-bubble);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.prayer-pop-chat-label--visible {
    opacity: 1;
    transform: translateX(-100%) translateY(-50%);
}

.prayer-pop-chat-label-arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--pp-bg-color, #ffffff);
}

.prayer-pop-chat-label[data-bubble-position="left"] {
    transform: translateY(-50%) translateX(6px);
}

.prayer-pop-chat-label[data-bubble-position="left"].prayer-pop-chat-label--visible {
    transform: translateY(-50%);
}

.prayer-pop-chat-label[data-bubble-position="left"] .prayer-pop-chat-label-arrow {
    right: 100%;
    left: auto;
    border-right: 7px solid var(--pp-bg-color, #ffffff);
    border-left: 0;
}

/* Keep the label readable on narrow screens without disabling the feature. */
@media (max-width: 480px) {
    .prayer-pop-chat-label {
        max-width: calc(100vw - 32px);
        white-space: normal;
        text-align: center;
    }
}

/* Dashicon Styling */
.prayer-pop-dashicon {
    font-size: 1em;
    width: 1em;
    height: 1em;
    line-height: 1;
    color: var(--pp-font-color);
    transition: transform 0.3s ease;
    font-family: dashicons;
    font-weight: normal;
    font-style: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.prayer-pop-tabler-icon-wrap .prayer-pop-tabler-icon {
    width: 1em;
    height: 1em;
    display: block;
    stroke: currentColor;
    fill: none;
    margin: auto;
    flex: 0 0 1em;
}

.prayer-pop-brand-icon-wrap .prayer-pop-brand-icon {
    width: 1em;
    height: 1em;
    display: block;
}

/* Mobile Responsive Optimizations */
@media screen and (max-width: 768px) {
    /* Dashicon adjustments */
    .prayer-pop-dashicon {
        font-size: 1em;
        width: 1em;
        height: 1em;
    }
    
    /* Optimize modal positioning and spacing for mobile */
    #prayer-pop-form-container {
        width: calc(100vw - 40px);
        max-width: var(--pp-popup-width);
        right: 20px;
        bottom: calc(var(--pp-bubble-height) + var(--pp-bubble-margin) + 10px);
        padding: 15px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    #prayer-pop-faq-wrapper {
        max-height: calc(100vh - 120px);
    }

    #prayer-pop-faq {
        max-height: calc(100vh - 220px);
    }
    
    /* Reduce spacing between elements on mobile */
    #prayer-pop-initial-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* Optimize button padding */
    .prayer-pop-option-button,
    .prayer-pop-custom-button {
        padding: 12px 15px;
        font-size: 16px;
    }
    
    /* The spacing scale is already compact enough to use unchanged on a
       phone, so the pile of mobile-only margin overrides that used to sit
       here is gone. They had drifted anyway: they tightened the name field
       but not the email field below it. */

    /* Optimize bubble for mobile */
    #prayer-pop-bubble {
        bottom: calc(20px + var(--pp-bubble-offset-y, 0px));
        right: calc(20px + var(--pp-bubble-offset-x, 0px));
    }

    #prayer-pop-modal[data-bubble-position="left"] #prayer-pop-form-container {
        left: calc(20px + var(--pp-bubble-offset-x, 0px));
        right: auto;
    }

    #prayer-pop-bubble[data-bubble-position="left"] {
        left: calc(20px + var(--pp-bubble-offset-x, 0px));
        right: auto;
    }
}

/* Form Container bottom: calc(var(--pp-bubble-height) + var(--pp-bubble-margin) + 20px); */
#prayer-pop-form-container {
    position: fixed;
    right: calc(var(--pp-bubble-margin) + var(--pp-bubble-offset-x, 0px));
    box-sizing: border-box;
    width: min(var(--pp-popup-width), calc(100vw - 32px));
    background-color: #ffffff;
    border-radius: var(--pp-panel-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: var(--pp-screen-inset);
    border: none;
    font-size: var(--pp-font-size);
    opacity: 1;
    z-index: 999998;
    transition: transform 0.3s ease, opacity 0.3s ease, height 180ms cubic-bezier(.2, .8, .2, 1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    
}

@media (prefers-reduced-motion: reduce) {
    #prayer-pop-form-container {
        transition: none;
    }
}

#prayer-pop-modal[data-bubble-position="left"] #prayer-pop-form-container {
    left: calc(var(--pp-bubble-margin) + var(--pp-bubble-offset-x, 0px));
    right: auto;
}

.prayer-pop-popup-intro {
    margin: 0 0 var(--pp-margin);
    color: var(--pp-label-color);
}

/* Simple Popup gets a proper branded welcome area even before an image is chosen. */
.prayer-pop-popup-intro--simple:not(.prayer-pop-popup-intro--has-image) {
    margin: calc(var(--pp-screen-inset) * -1) calc(var(--pp-screen-inset) * -1) var(--pp-margin);
    padding: 26px;
    /* This surface is flush against the popup panel's own top edge (the
       negative margin above cancels the panel's padding), so its top
       corners have to follow the panel's own radius token, not the smaller
       one shared controls use — otherwise they show up short of the
       panel's actual corner and a sliver of the panel's background peeks
       through. */
    border-radius: var(--pp-panel-border-radius) var(--pp-panel-border-radius) 0 0;
    background: var(--pp-bg-color, #2755aa);
    color: var(--pp-font-color, #fff);
}

.prayer-pop-popup-intro--simple:not(.prayer-pop-popup-intro--has-image) .prayer-pop-popup-intro__title {
    color: var(--pp-font-color, #fff);
}

.prayer-pop-popup-intro--simple:not(.prayer-pop-popup-intro--has-image) .prayer-pop-popup-intro__description {
    color: var(--pp-font-color, #fff);
    opacity: 0.9;
}

.prayer-pop-popup-intro--has-image {
    position: relative;
    min-height: 155px;
    margin: calc(var(--pp-screen-inset) * -1) calc(var(--pp-screen-inset) * -1) var(--pp-margin);
    overflow: hidden;
    color: #fff;
    /* This surface is flush against the popup panel's own top edge (the
       negative margin above cancels the panel's padding), so its top
       corners have to follow the panel's own radius token, not the smaller
       one shared controls use — otherwise they show up short of the
       panel's actual corner and a sliver of the panel's background peeks
       through. */
    border-radius: var(--pp-panel-border-radius) var(--pp-panel-border-radius) 0 0;
    background: var(--pp-bg-color);
}

.prayer-pop-popup-intro--has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--prayerpop-popup-intro-overlay-color, #000);
    opacity: var(--prayerpop-popup-intro-overlay-opacity, 0.35);
}

.prayer-pop-popup-intro__media {
    width: 100%;
    aspect-ratio: 16 / 7;
    margin: 0 0 calc(var(--pp-margin) * 0.75);
    overflow: hidden;
    border-radius: var(--pp-border-radius);
    background: var(--pp-textarea-bg-color);
}

.prayer-pop-popup-intro--has-image .prayer-pop-popup-intro__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    margin: 0;
    border-radius: 0;
}

.prayer-pop-popup-intro__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prayer-pop-popup-intro__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prayer-pop-popup-intro--has-image .prayer-pop-popup-intro__content {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    min-height: 155px;
    padding: 24px 26px 30px;
    box-sizing: border-box;
}

.prayer-pop-popup-intro__title {
    margin: 0;
    color: var(--pp-label-color);
    font-family: var(--popup-intro-title-font-family, var(--pp-heading-font-family));
    font-size: var(--popup-intro-title-font-size, 22px);
    font-style: var(--popup-intro-title-font-style, normal);
    font-weight: var(--popup-intro-title-font-weight, var(--pp-heading-font-weight));
    line-height: 1.2;
}

.prayer-pop-popup-intro--has-image .prayer-pop-popup-intro__title {
    color: #fff;
    font-family: var(--popup-intro-title-font-family, var(--pp-heading-font-family));
    font-size: var(--popup-intro-title-font-size, 22px);
    font-style: var(--popup-intro-title-font-style, normal);
    font-weight: var(--popup-intro-title-font-weight, var(--pp-heading-font-weight));
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.prayer-pop-popup-intro__description {
    margin: 0;
    padding-top: 4px;
    color: var(--pp-label-color);
    font-family: var(--popup-intro-description-font-family, var(--pp-font-family));
    font-size: var(--popup-intro-description-font-size, 18px);
    font-style: var(--popup-intro-description-font-style, normal);
    font-weight: var(--popup-intro-description-font-weight, 400);
    line-height: 1.45;
}

.prayer-pop-popup-intro--has-image .prayer-pop-popup-intro__description {
    max-width: 24ch;
    padding: 4px 2px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--popup-intro-description-font-family, var(--pp-font-family));
    font-size: var(--popup-intro-description-font-size, 18px);
    font-style: var(--popup-intro-description-font-style, normal);
    font-weight: var(--popup-intro-description-font-weight, 400);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

/* Compact, chat-style Classic home. Messenger keeps its existing presentation. */
.prayer-pop-popup-intro--hero {
	--prayerpop-classic-intro-overlap: 24px;
    position: relative;
    min-height: 0;
    margin: calc(var(--pp-screen-inset) * -1) calc(var(--pp-screen-inset) * -1) var(--pp-margin);
	padding-top: 16px;
    overflow: visible;
    /* This surface is flush against the popup panel's own top edge (the
       negative margin above cancels the panel's padding), so its top
       corners have to follow the panel's own radius token, not the smaller
       one shared controls use — otherwise they show up short of the
       panel's actual corner and a sliver of the panel's background peeks
       through. */
    border-radius: var(--pp-panel-border-radius) var(--pp-panel-border-radius) 0 0;
    background: transparent;
    color: var(--pp-label-color, #172033);
}

.prayer-pop-popup-intro--hero::after {
    display: none;
}

.prayer-pop-popup-intro--hero:not(.prayer-pop-popup-intro--has-image)::before {
    content: "";
    position: absolute;
    /* Keep the welcome card visibly overlapping the header at every text length. */
    inset: 0 0 var(--prayerpop-classic-intro-overlap);
    /* This surface is flush against the popup panel's own top edge (the
       negative margin above cancels the panel's padding), so its top
       corners have to follow the panel's own radius token, not the smaller
       one shared controls use — otherwise they show up short of the
       panel's actual corner and a sliver of the panel's background peeks
       through. */
    border-radius: var(--pp-panel-border-radius) var(--pp-panel-border-radius) 0 0;
    background: var(--pp-bg-color);
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__media {
    position: absolute;
    inset: 0 0 var(--prayerpop-classic-intro-overlap);
    width: 100%;
	height: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    /* This surface is flush against the popup panel's own top edge (the
       negative margin above cancels the panel's padding), so its top
       corners have to follow the panel's own radius token, not the smaller
       one shared controls use — otherwise they show up short of the
       panel's actual corner and a sliver of the panel's background peeks
       through. */
    border-radius: var(--pp-panel-border-radius) var(--pp-panel-border-radius) 0 0;
    background: var(--pp-bg-color);
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__media img {
	transform: scale(1.12);
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--prayerpop-popup-intro-overlay-color, #000);
    opacity: var(--prayerpop-popup-intro-overlay-opacity, 0.35);
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__content {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 0;
    margin: 0 14px;
    padding: 14px;
	box-sizing: border-box;
	align-content: end;
	gap: 6px;
    border: 1px solid var(--pp-border-color, #dfe2e7);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(23, 32, 51, 0.1);
}

/* The welcome/home screen has no 56px header bar to centre a close control
   on — it's the hero welcome card instead, with its own 14px padding
   rhythm. Shared by every layout's close button while the welcome card is
   what's showing (plain Classic's #prayer-pop-panel-close and the shell's
   single .ppm-close), so the offset only has to be tuned once. Lines the
   button's centre up with the church-name row (card padding-top 16 + card
   content padding 14 + half the 34px avatar, minus half the 28px button) and
   gives it the same 28px clearance from the right edge that the avatar gets
   on the left (content's 14px margin + 14px padding). */
.pp-close--on-welcome-card {
	/* !important: this state class has to outrank both the plain
	   .prayer-pop-classic-close rule below (same specificity, comes later
	   in the cascade) and the shell's own .prayer-pop-messenger > .ppm-close
	   rule, on whichever of the two buttons it's applied to. */
	top: 33px !important;
	right: 28px !important;
}

/* Simple layout's welcome screen: no header either, just a big title sitting
   directly in the card's own padding (26px, or 24px when a background photo
   is set — see .prayer-pop-popup-intro--has-image). Lines the close up with
   that title and mirrors its inset on the right, the same idea as
   .pp-close--on-welcome-card above but for this card's own rhythm. */
.pp-close--on-simple-intro {
	top: 25px !important;
	right: 25px !important;
	color: var(--pp-font-color, #fff) !important;
}

/* The background here is a photo the admin can swap at any time, so unlike
   every other close button — which can safely use the theme's configured
   colors — this one can't assume anything about what's behind it. It takes
   the same fix the title text already uses for the same reason: force
   white, and add a shadow so it still reads against a light patch of image. */
.pp-close--on-simple-intro.pp-close--on-image {
	color: #fff !important;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Centred in the 56px screen-header bar so it pairs with the back control
   opposite it, the same way the footer shell's close does. */
.prayer-pop-classic-close {
	position: absolute;
	top: var(--pp-control-offset, 14px);
	right: var(--pp-control-inset, 12px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--pp-control-size, 28px);
	height: var(--pp-control-size, 28px);
	min-width: var(--pp-control-size, 28px);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pp-control-color, #687181);
	font: inherit;
	/* The cross is drawn from two bars rather than typed as a glyph, so it is
	   the same shape and weight as the chat shell's close instead of whatever
	   the theme's font renders for a multiplication sign. */
	font-size: 0;
	line-height: 1;
	cursor: pointer;
}

.prayer-pop-classic-close::before,
.prayer-pop-classic-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--pp-control-glyph, 16px);
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.prayer-pop-classic-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.prayer-pop-popup-intro__sender {
	display: flex;
	align-items: center;
	gap: 9px;
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__sender strong {
	font-weight: 600;
}

.prayer-pop-popup-intro__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--pp-bg-color);
    color: var(--pp-font-color, #fff);
    font-size: 23px;
    object-fit: cover;
}

.prayer-pop-popup-intro__sender > span:last-child {
    display: grid;
	align-content: center;
    gap: 1px;
}

.prayer-pop-popup-intro__sender strong {
	margin: 0;
    color: #172033;
    font-size: calc(var(--pp-font-size) * 0.875);
    font-weight: 500;
	line-height: 1.1;
}

.prayer-pop-popup-intro__sender small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #737b89;
    font-size: calc(var(--pp-font-size) * 0.75);
    line-height: 1.1;
}

.prayer-pop-popup-intro__sender small i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pp-bg-color);
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__message {
	margin: 0;
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__title {
	margin: 0;
	color: #172033;
	/* Classic's compact welcome card starts at 22px, but the Title Size
	 * control must remain authoritative for larger or smaller values. */
	font-size: var(--popup-intro-title-font-size, 22px);
	text-shadow: none;
}

.prayer-pop-popup-intro--hero .prayer-pop-popup-intro__description {
    max-width: none;
    margin: 3px 0 0;
    padding: 0;
    color: #4f5663;
    line-height: 1.45;
    text-shadow: none;
}

/* Initial Options */
#prayer-pop-initial-options {
    display: flex;
    flex-direction: column;
    gap: var(--pp-margin);
}

/* Option and Custom Buttons */
.prayer-pop-option-button,
.prayer-pop-custom-button {
    width: 100%;
    background-color: var(--pp-bg-color);
    color: var(--pp-font-color);
    border: none;
    border-radius: var(--pp-border-radius);
    padding: var(--pp-padding);
    font-size: var(--pp-font-size);
    font-weight: var(--pp-bold-font-weight);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.prayer-pop-option-button:hover,
.prayer-pop-custom-button:hover {
    background-color: var(--pp-button-hover-color);
}

/* Custom destination buttons are real links now, not buttons wired up by JS,
   so the anchor defaults (inline display, underline) need resetting. */
.prayer-pop-custom-button {
    display: block;
    text-decoration: none;
}

.prayer-pop-option-button--menu,
.prayer-pop-custom-button--menu {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--pp-border-color, #dfe2e7);
    border-radius: 12px;
    background: #fff;
    color: #172033;
    font-family: var(--pp-font-family);
    font-size: calc(var(--pp-font-size) * 0.92);
    font-weight: var(--pp-bold-font-weight);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.prayer-pop-option-button--menu:hover,
.prayer-pop-custom-button--menu:hover {
    border-color: var(--pp-bg-color);
    background: #f8f9fc;
    background: color-mix(in srgb, var(--pp-bg-color) 4%, #fff);
    color: #172033;
    transform: translateY(-1px);
}

.prayer-pop-option-button--menu:focus-visible,
.prayer-pop-custom-button--menu:focus-visible {
    outline: 3px solid rgba(39, 85, 170, 0.24);
    outline: 3px solid color-mix(in srgb, var(--pp-bg-color) 28%, transparent);
    outline-offset: 2px;
}

.prayer-pop-option-button__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef2fb;
    background: color-mix(in srgb, var(--pp-bg-color) 10%, #fff);
    color: var(--pp-bg-color);
    font-size: 18px;
}

.prayer-pop-option-button__label {
    min-width: 0;
}

.prayer-pop-option-button__chevron {
    color: #8a92a0;
    font-size: 18px;
}

/* The popup's back buttons are styled only by the shared panel header
   component (.ppm-classic-screen-header in prayer-pop-chat.css). The circled
   stand-alone button that used to live here only ever showed when that
   component failed to load — Simple/Classic with Chat off — which is exactly
   the legacy header this removes. */

#prayer-pop-faq-wrapper {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}

/* The form opens a new group under the copy above it. Stated here rather
   than as a bottom margin on the copy, so it holds whether or not the
   optional status line is showing. */
#prayer-pop-form {
    margin-top: var(--pp-space-md);
}

/* Form Styling

   The form is three groups: the fields a visitor fills in, the consent
   choices, and the submit action. The gap between groups is stated once here
   and the gap inside each group once below, so no individual row carries a
   margin of its own. Using gap rather than margins also means a row the
   controller hides (the email field, the consent box that belongs to the
   other submission type) takes its spacing with it — with margins it left a
   gap behind, which is why prayer requests and testimonies drifted apart. */
#prayer-pop-form {
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-md);
}

/* The message, name and email fields are one group: they are all "tell us
   about it", so they sit closer to each other than to the consent choices.
   Each field is a bordered box, which already separates it from the next, so
   the gap between them only has to keep them from touching — the work of
   telling groups apart is done by the larger gap around the group. */
#prayer-pop-form .prayer-pop-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-xs);
}

/* Consent is a tighter pair still: two answers to the same question. */
#prayer-pop-form .prayer-pop-consent-group {
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-xs);
}

/* Text Area */
#prayer-pop-form textarea {
    width: 100%;
    padding: var(--pp-field-padding-y) var(--pp-field-padding-x);
    border: 1px solid var(--pp-border-color);
    border-radius: var(--pp-border-radius);
    font-size: var(--pp-font-size);
    background-color: var(--pp-textarea-bg-color);
    color: var(--pp-label-color);
    box-sizing: border-box;
    /* Three lines: enough to start writing in without the empty box
       dominating the panel. It still grows by drag, and a longer message
       scrolls. */
    height: 96px;
    resize: vertical;
}

#prayer-pop-form textarea::placeholder {
    color: var(--pp-label-color);
    opacity: 0.7;
}

/* Input Field - the group's gap handles spacing, never the field itself */
#prayer-pop-form input[type="text"],
#prayer-pop-form input[type="email"] {
    width: 100%;
    margin: 0;
    padding: var(--pp-field-padding-y) var(--pp-field-padding-x);
    border: 1px solid var(--pp-border-color);
    border-radius: var(--pp-border-radius);
    font-size: var(--pp-font-size);
    background-color: var(--pp-textarea-bg-color);
    box-sizing: border-box;
}

/* Submit Button
   "Send One More" (#prayer-pop-new-request) shares this rule on purpose: it
   repeats the same action, so it should look and feel like the same button,
   not a secondary/outline variant. */
#prayer-pop-form button[type="submit"],
#prayer-pop-new-request {
    width: 100%;
    background-color: var(--pp-bg-color);
    color: var(--pp-font-color);
    border: none;
    border-radius: var(--pp-border-radius);
    padding: var(--pp-padding);
    font-size: var(--pp-font-size);
    font-weight: var(--pp-bold-font-weight);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

#prayer-pop-form button[type="submit"]:hover,
#prayer-pop-new-request:hover {
    background-color: var(--pp-button-hover-color);
}

/* Success and Error Messages */
#prayer-pop-success,
#prayer-pop-error {
    padding: var(--pp-padding);
    border-radius: var(--pp-border-radius);
    margin: var(--pp-margin) 0;
    font-size: var(--pp-font-size);
    text-align: left;
}

#prayer-pop-success {
    margin-top: 0;
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

#prayer-pop-error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* Form Modal */
#prayer-pop-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--prayerpop-z-modal);
    display: none;
}

/* Header Style

   The heading and the sentence under it are one block, so they sit at the
   tightest step on the scale. */
#prayer-pop-header {
    margin-bottom: var(--pp-space-2xs);
}

.prayer-pop-heading,
#prayer-pop-header h2 {
    font-size: var(--pp-heading-font-size);
    color: var(--pp-label-color);
    margin: 0;
    padding: 0;
    font-weight: var(--pp-heading-font-weight);
    font-family: var(--pp-heading-font-family);
}

/* Description Style

   No bottom margin: the gap to whatever follows belongs to that element, so
   the rhythm stays correct whether or not the "last submission" line is
   showing. */
#prayer-pop-description {
    margin-bottom: 0;
}

#prayer-pop-description p {
    font-size: var(--pp-font-size);
    color: var(--pp-label-color);
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* FAQ */
#prayer-pop-faq {
    /* No bottom margin of its own: the screen's inset already provides the
       space below, and matching the header's gap above it keeps the content
       evenly framed in every view and layout. */
    margin-bottom: 0;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    padding-right: 4px;
}

.prayer-pop-faq-title {
    margin: 0 0 calc(var(--pp-margin) / 2);
    font-size: calc(var(--pp-font-size) * 1.05);
    color: var(--pp-label-color);
    font-weight: var(--pp-bold-font-weight);
    line-height: 1.3;
}

.prayer-pop-faq-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pp-margin) / 2);
}

.prayer-pop-faq-item {
    border: 1px solid var(--pp-border-color);
    border-radius: var(--pp-border-radius);
    background: var(--pp-textarea-bg-color);
    overflow: hidden;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.prayer-pop-faq-item.is-open {
    border-color: var(--pp-bg-color);
    background-color: color-mix(in srgb, var(--pp-bg-color) 6%, var(--pp-textarea-bg-color));
    box-shadow: inset 3px 0 0 var(--pp-bg-color), 0 5px 16px rgba(23, 32, 51, 0.06);
}

.prayer-pop-faq-question {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--pp-label-color);
    cursor: pointer;
    text-align: left;
    padding: calc(var(--pp-padding) * 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--pp-font-size);
    line-height: 1.35;
}

.prayer-pop-faq-question:hover {
    background: rgba(0, 0, 0, 0.02);
}

.prayer-pop-faq-question:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid color-mix(in srgb, var(--pp-bg-color) 30%, transparent);
    outline-offset: -3px;
}

.prayer-pop-faq-question-text {
    flex: 1;
}

.prayer-pop-faq-toggle {
    color: var(--pp-label-color);
    flex: 0 0 auto;
    font-weight: 600;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    font-size: 0;
    line-height: 1;
    transform: rotate(45deg) translateY(-2px);
    transition: color 160ms ease, transform 160ms ease;
}

.prayer-pop-faq-item.is-open .prayer-pop-faq-toggle {
    color: var(--pp-bg-color);
    transform: rotate(225deg) translate(-2px, -2px);
}

.prayer-pop-faq-answer {
    color: var(--pp-label-color);
    border-top: 1px solid var(--pp-border-color);
    padding: calc(var(--pp-padding) * 0.8);
    padding-top: calc(var(--pp-padding) * 0.8 - 2px);
    font-size: calc(var(--pp-font-size) * 0.95);
    line-height: 1.45;
}

.prayer-pop-faq-item.is-open .prayer-pop-faq-answer {
    border-top-color: color-mix(in srgb, var(--pp-bg-color) 35%, var(--pp-border-color));
}

.prayer-pop-faq-answer[hidden] {
    display: none !important;
}

/* Adjust form wrapper */
#prayer-pop-form-wrapper {
    display: flex;
    flex-direction: column;
}

/* Last Time Message

   A status line about the copy above it, so it stays with that block; the
   form below opens a new group and states that gap itself. */
#prayer-pop-last-time {
    margin: var(--pp-space-xs) 0 0;
    padding: 2px 2px;
    background-color: transparent;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 0.9em;
    color: #666;
    display: none; /* Hidden by default */
    align-items: center;
    transition: opacity 0.3s ease;
    opacity: 1;
    gap: 9px;
    line-height: 1.4;
}

#prayer-pop-last-time::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(currentColor, currentColor) 6px 2px / 1.5px 5px no-repeat,
        linear-gradient(currentColor, currentColor) 6px 6px / 4px 1.5px no-repeat;
    opacity: 0.8;
}

/* Only show timer when in form view and has content */
#prayer-pop-form-wrapper:not(.initial-view) #prayer-pop-last-time:not(:empty) {
    display: flex;
}

/* Hide timer completely when empty or in initial view */
#prayer-pop-form-wrapper.initial-view #prayer-pop-last-time,
#prayer-pop-last-time:empty {
    display: none !important;
    opacity: 0;
}

/* Form Wrapper States */
#prayer-pop-form-wrapper {
    position: relative;
}

#prayer-pop-form-wrapper.initial-view #prayer-pop-last-time {
    display: none !important;
}

/* Masonry Layout Styles */
.prayer-pop-requests {
    width: 100%;
}

.prayer-pop-requests.prayer-pop-display-grid {
    display: grid;
    grid-template-columns: repeat(var(--pp-submissions-columns, 3), minmax(0, 1fr));
    gap: var(--pp-submissions-gap, var(--pp-margin));
}

.prayer-pop-requests.prayer-pop-display-grid .prayer-pop-request {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-width: 0;
}

.prayer-pop-requests.prayer-pop-display-masonry {
    column-count: var(--pp-submissions-columns, 3);
    column-width: 300px;
    column-gap: var(--pp-submissions-gap, var(--pp-margin));
}

.prayer-pop-request {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--pp-margin);
    background: linear-gradient(to bottom, var(--pp-submissions-top-color, color-mix(in srgb, var(--pp-bg-color), white 75%)) 45px, var(--pp-submissions-card-bg, var(--pp-textarea-bg-color)) 0);
    padding: var(--pp-padding);
    border-radius: var(--pp-submissions-card-radius, var(--pp-border-radius));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    break-inside: avoid;
    padding-bottom: 10px;
    min-width: 260px;
    max-width: 100%;
    opacity: 1; /* Ensure cards are visible */
}

.prayer-pop-request.prayer-pop-request-answered {
    background: linear-gradient(to bottom, var(--pp-submissions-answered-top-color, color-mix(in srgb, #16a34a, white 82%)) 45px, var(--pp-submissions-card-bg, var(--pp-textarea-bg-color)) 0);
}

.prayer-pop-requests.prayer-pop-display-grid.prayer-pop-requests--sparse {
    display: grid;
    column-count: initial;
    column-width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pp-submissions-gap, var(--pp-margin));
    align-items: stretch;
}

.prayer-pop-requests.prayer-pop-display-grid.prayer-pop-requests--sparse .prayer-pop-request {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-width: 0;
}

.prayer-pop-requests.prayer-pop-display-grid.prayer-pop-requests--count-1 {
    grid-template-columns: minmax(0, min(760px, 100%));
    justify-content: center;
}

.prayer-pop-requests.prayer-pop-display-grid.prayer-pop-requests--count-3 .prayer-pop-request:first-child {
    grid-column: 1 / -1;
}

.prayer-pop-requests.prayer-pop-display-masonry.prayer-pop-requests--sparse {
    display: grid;
    column-count: initial;
    column-width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pp-submissions-gap, var(--pp-margin));
    align-items: start;
}

.prayer-pop-requests.prayer-pop-display-masonry.prayer-pop-requests--sparse .prayer-pop-request {
    display: block;
    margin-bottom: 0;
    min-width: 0;
}

.prayer-pop-requests.prayer-pop-display-masonry.prayer-pop-requests--count-1 {
    grid-template-columns: minmax(0, min(760px, 100%));
    justify-content: center;
}

@media screen and (max-width: 1150px) and (min-width: 769px) {
    .prayer-pop-requests.prayer-pop-display-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prayer-pop-requests.prayer-pop-display-masonry {
        column-count: 2;
    }
}

@media screen and (max-width: 768px) {
    /* Hide toggle switch on mobile/tablet */
    .prayer-pop-toggle-container {
        display: none !important;
    }

    /* Force single column layout on mobile/tablet */
    .prayer-pop-requests {
        column-count: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .prayer-pop-request {
        break-inside: auto !important;
        margin-bottom: 0 !important; /* Use gap instead */
        width: 100% !important;
        display: block !important;
        position: static !important; /* Override any masonry positioning */
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    .prayer-pop-requests.prayer-pop-display-grid.prayer-pop-requests--sparse {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .prayer-pop-requests.prayer-pop-display-masonry.prayer-pop-requests--sparse {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .prayer-pop-requests.prayer-pop-display-grid.prayer-pop-requests--count-3 .prayer-pop-request:first-child {
        grid-column: auto !important;
    }
    
    /* Hide problematic Divi code modules only if they're empty */
    .et_pb_code.et_pb_code_0:empty {
        display: none !important;
    }
}

.prayer-pop-request-content {
    margin-bottom: var(--pp-margin);
    margin-top: var(--pp-margin);
    padding-top: 10px;
}

.prayer-pop-request-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.prayer-pop-request-header {
    display: grid;
    grid-template-columns: minmax(11ch, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.prayer-pop-request-header-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
}

.prayer-pop-request-author {
    font-weight: bold;
    font-size: 0.9em;
    min-width: 11ch;
    overflow: visible;
    text-overflow: initial;
    word-break: normal;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.2;
}

/* Adjust spacing for multi-line names */
.prayer-pop-request-author.multi-line {
    margin-top: -10px;
    line-height: 1.1;
}

/* Adjust font size for longer names */
.prayer-pop-request-author.long-name {
    font-size: 0.8em;
}

.prayer-pop-request-author.very-long-name {
    font-size: 0.75em;
}

.prayer-pop-request-time {
    font-style: italic;
    margin-left: 0;
    white-space: nowrap;
    justify-self: auto;
    align-self: auto;
    flex-shrink: 0;
    font-size: 0.85em;
}

.prayer-pop-share-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1;
}

.prayer-pop-calendar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1;
}

.prayer-pop-calendar-wrap--open {
    z-index: var(--prayerpop-z-dropdown);
}

.prayer-pop-request-header-right > .prayer-pop-share-wrap,
.prayer-pop-request-header-right > .prayer-pop-calendar-wrap {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

button.prayer-pop-icon-trigger,
.prayer-pop-icon-trigger {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #666;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    cursor: pointer;
    line-height: 1;
    font-size: 0;
    box-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    flex: 0 0 20px;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
    outline: none;
}

.prayer-pop-icon-trigger::before,
.prayer-pop-icon-trigger::after {
    content: none !important;
    display: none !important;
}

.prayer-pop-icon-trigger svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.prayer-pop-icon-trigger:hover {
    color: var(--pp-bg-color);
}

.prayer-pop-icon-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}

[data-prayer-pop-calendar-toggle] {
    -webkit-appearance: none !important;
    appearance: none !important;
}

.prayer-pop-calendar-menu[hidden] {
    display: none !important;
}

.prayer-pop-calendar-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    gap: 2px;
    min-width: 220px;
    max-width: min(240px, calc(100vw - 32px));
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(38, 69, 125, 0.14);
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(24, 44, 64, 0.14);
    z-index: var(--prayerpop-z-dropdown);
    font-family: inherit;
    isolation: isolate;
}

.prayer-pop-calendar-menu__link {
    display: block;
    padding: 0.7em 0.9em;
    border-radius: 9px;
    background: transparent;
    color: #303844;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.prayer-pop-calendar-menu__link:hover,
.prayer-pop-calendar-menu__link:focus-visible {
    background: rgba(235, 241, 255, 0.78);
    color: var(--pp-bg-color);
    outline: none;
}

.prayer-pop-answered-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e7f8ef;
    color: #0f6f38;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.prayer-pop-answered-badge-inline {
    margin-top: 0;
    margin-left: 10px;
}

.prayer-pop-i-prayed {
    border-top: 1px solid #ededed;
    padding-top: 15px;
    display: flex;
    align-items: center;
}

.prayer-pop-answered-celebrate {
    flex-wrap: wrap;
    gap: 8px;
}

.prayer-pop-answered-celebrate .prayer-pop-i-prayed-count {
    margin-right: 0;
}

.prayer-pop-answered-celebrate .prayer-pop-answered-badge-inline {
    margin-left: auto;
}

.prayer-pop-answered-footer {
    border-top: 1px solid #ededed;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.prayer-pop-i-prayed-button {
    background-color: var(--pp-submissions-button-bg, var(--pp-bg-color));
    color: #fff;
    border: none;
    font-weight: 600;  
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    margin-right: 10px;
}

.prayer-pop-i-prayed-button[disabled] {
    background-color: color-mix(in srgb, var(--pp-submissions-button-bg, var(--pp-bg-color)), rgb(240, 240, 240) 95%);
    font-weight: 600;  
    cursor: not-allowed;
}

.prayer-pop-i-prayed-count {
    font-size: 14px;
    color: #666;
}

.prayer-pop-answered-note {
    border-top: 1px dashed #c9d7c0;
    margin-top: 12px;
    padding-top: 12px;
    margin-bottom: 12px;
}

.prayer-pop-answered-note-label {
    font-size: 12px;
    font-weight: 700;
    color: #0f6f38;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.prayer-pop-answered-note-text {
    line-height: 1.45;
}

/* #prayer-pop-new-request itself is styled with #prayer-pop-form
   button[type="submit"] above, so it matches Submit exactly. .prayer-pop-button
   stays as a reusable alias of that same look for any other "repeat the
   primary action" button. */
.prayer-pop-button {
    width: 100%;
    background-color: var(--pp-bg-color);
    color: var(--pp-font-color);
    border: none;
    border-radius: var(--pp-border-radius);
    padding: var(--pp-padding);
    font-size: var(--pp-font-size);
    font-weight: var(--pp-bold-font-weight);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.prayer-pop-button:hover {
    background-color: var(--pp-button-hover-color);
}

/* List View */
.prayer-pop-requests.prayer-pop-display-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prayer-pop-requests.prayer-pop-display-list .prayer-pop-request {
    width: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: var(--pp-border-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 560px) {
    .prayer-pop-request {
        min-width: 0;
    }

    .prayer-pop-request-header {
        grid-template-columns: minmax(0, 1fr) minmax(max-content, 46%);
        gap: 8px;
        align-items: center;
    }

    .prayer-pop-request-author {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .prayer-pop-request-time {
        justify-self: end;
        white-space: nowrap;
        font-size: clamp(0.72em, 3.2vw, 0.85em);
    }

    .prayer-pop-request-header-right {
        justify-content: flex-end;
        min-width: 0;
        gap: 6px;
    }
}

#prayer-pop-name-container,
#prayer-pop-email-container {
    margin: 0;
}

/* Checkbox spacing/layout must beat theme-level #id label/input rules */
#prayer-pop-form .prayer-pop-checkbox-container {
    margin: 0;
    padding: 0;
}

#prayer-pop-form .prayer-pop-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pp-margin) / 2);
    font-size: var(--pp-font-size);
    color: var(--pp-label-color);
    cursor: pointer;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

#prayer-pop-form .prayer-pop-checkbox-label input[type="checkbox"] {
    margin: 0;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    box-sizing: border-box;
    border: 1px solid var(--pp-border-color);
    border-radius: 4px;
    background-color: var(--pp-textarea-bg-color);
    -webkit-appearance: none;
    appearance: none;
}

#prayer-pop-form .prayer-pop-checkbox-label input[type="checkbox"]:checked {
    border-color: var(--pp-bg-color);
    background-color: var(--pp-bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#prayer-pop-form :where(textarea, input[type="text"], input[type="email"]):focus-visible {
    border-color: var(--pp-bg-color);
    outline: 3px solid color-mix(in srgb, var(--pp-bg-color) 24%, transparent);
    outline-offset: 1px;
}

#prayer-pop-form .prayer-pop-checkbox-label input[type="checkbox"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pp-bg-color) 28%, transparent);
    outline-offset: 2px;
}

#prayer-pop-form button[type="submit"]:focus-visible,
#prayer-pop-new-request:focus-visible,
.prayer-pop-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pp-bg-color) 32%, transparent);
    outline-offset: 3px;
}

#prayer-pop-form :where(button, input, textarea):disabled {
    cursor: not-allowed;
}

.prayer-pop-locked-feature-notice {
    border: 1px solid #d6dbe5;
    background: #f4f6f9;
    color: #5f6b7a;
    border-radius: 8px;
    padding: 18px;
    opacity: 0.86;
    filter: grayscale(0.45);
}

.prayer-pop-locked-feature-notice__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e4e8ef;
    color: #4c5969;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.prayer-pop-option-button--locked,
.prayer-pop-custom-button--locked,
.prayer-pop-checkbox-container--locked,
.prayer-pop-form__type-option--locked,
.prayer-pop-form__checkbox-label--locked {
    opacity: 0.45;
    filter: grayscale(1);
    cursor: not-allowed;
}

.prayer-pop-option-button--locked,
.prayer-pop-custom-button--locked,
.prayer-pop-option-button--locked:hover,
.prayer-pop-custom-button--locked:hover {
    background: #d8dde6;
    color: #5f6b7a;
    box-shadow: none;
}

.prayer-pop-option-button--locked,
.prayer-pop-custom-button--locked,
.prayer-pop-option-button--locked *,
.prayer-pop-custom-button--locked * {
    pointer-events: none;
}

.prayer-pop-checkbox-container--locked input,
.prayer-pop-form__type-option--locked input,
.prayer-pop-form__checkbox-label--locked input {
    cursor: not-allowed;
}

/* Visually hidden labels for the popup form fields. The fields show
   placeholders, which are not a reliable labeling mechanism on their own. */
.prayer-pop-screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The close control is display:grid, so [hidden] needs an explicit rule. */
.prayer-pop-classic-close[hidden] {
    display: none !important;
}