/* EvangelOS Prayer Request Form — Baseline Styles
 *
 * Uses CSS custom properties (--evos-*) throughout so any WordPress theme
 * can override the visual appearance by redefining these variables in its
 * own stylesheet. Sensible defaults are provided for unstyled contexts.
 *
 * Scoped to .evos-prayer-wrap to avoid conflicts with any theme.
 */

.evos-prayer-wrap {
    /* ── Design tokens (override these in your theme stylesheet) ── */
    --evos-font:            inherit;
    --evos-label-size:      0.875rem;
    --evos-label-weight:    500;
    --evos-label-color:     #111;
    --evos-optional-color:  #666;

    --evos-input-bg:        #fff;
    --evos-input-border:    #d1d5db;
    --evos-input-color:     #111;
    --evos-input-padding:   0.75rem 1rem;
    --evos-input-radius:    4px;
    --evos-input-font-size: 0.95rem;
    --evos-focus-border:    #800000;
    --evos-focus-shadow:    rgba(128, 0, 0, 0.12);

    --evos-btn-bg:          #800000;
    --evos-btn-color:       #fff;
    --evos-btn-hover-bg:    #660000;
    --evos-btn-radius:      4px;
    --evos-btn-font-size:   1rem;
    --evos-btn-weight:      600;

    --evos-info-bg:         #f9fafb;
    --evos-info-border:     #e5e7eb;
    --evos-info-radius:     6px;
    --evos-info-heading-color: #111;
    --evos-info-text-color: #555;
    --evos-info-item-color: #444;

    --evos-status-success-bg:     #f0fdf4;
    --evos-status-success-border: #86efac;
    --evos-status-success-color:  #166534;
    --evos-status-error-bg:       #fef2f2;
    --evos-status-error-border:   #800000;
    --evos-status-error-color:    #991b1b;

    width: 100%;
}

/* ── Grid layout ──────────────────────────────────────── */

.evos-prayer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 768px) {
    .evos-prayer-grid {
        grid-template-columns: 3fr 2fr;
    }
}

/* ── Form ─────────────────────────────────────────────── */

.evos-prayer-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.evos-prayer-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.evos-prayer-row--two {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
    .evos-prayer-row--two {
        grid-template-columns: 1fr;
    }
}

.evos-prayer-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.evos-prayer-row .evos-prayer-group {
    margin-bottom: 0;
}

.evos-prayer-label {
    font-family:  var(--evos-font);
    font-size:    var(--evos-label-size);
    font-weight:  var(--evos-label-weight);
    color:        var(--evos-label-color);
}

.evos-prayer-optional {
    font-weight:  400;
    font-size:    0.8em;
    color:        var(--evos-optional-color);
    margin-left:  0.25rem;
}

.evos-prayer-input,
.evos-prayer-select,
.evos-prayer-textarea {
    width:        100%;
    padding:      var(--evos-input-padding);
    background:   var(--evos-input-bg);
    border:       1px solid var(--evos-input-border);
    color:        var(--evos-input-color);
    font-family:  var(--evos-font);
    font-size:    var(--evos-input-font-size);
    border-radius: var(--evos-input-radius);
    outline:      none;
    transition:   border-color 0.2s;
    box-sizing:   border-box;
    appearance:   auto;
}

.evos-prayer-input:focus,
.evos-prayer-select:focus,
.evos-prayer-textarea:focus {
    border-color: var(--evos-focus-border);
    box-shadow:   0 0 0 2px var(--evos-focus-shadow);
}

.evos-prayer-textarea {
    resize:       vertical;
    min-height:   150px;
}

/* ── Status message ───────────────────────────────────── */

.evos-prayer-status {
    padding:      0;
    margin-bottom: 0;
    font-size:    0.9rem;
    line-height:  1.5;
    transition:   all 0.2s;
}

.evos-prayer-status.is-success,
.evos-prayer-status.is-error {
    padding:        0.75rem 1rem;
    margin-bottom:  1rem;
}

.evos-prayer-status.is-success {
    background:     var(--evos-status-success-bg);
    color:          var(--evos-status-success-color);
    border-left:    3px solid var(--evos-status-success-color);
}

.evos-prayer-status.is-error {
    background:     var(--evos-status-error-bg);
    color:          var(--evos-status-error-color);
    border-left:    3px solid var(--evos-status-error-border);
}

/* ── Submit button ────────────────────────────────────── */

.evos-prayer-submit {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            0.5rem;
    padding:        0.75rem 2rem;
    background:     var(--evos-btn-bg);
    color:          var(--evos-btn-color);
    border:         none;
    border-radius:  var(--evos-btn-radius);
    font-family:    var(--evos-font);
    font-size:      var(--evos-btn-font-size);
    font-weight:    var(--evos-btn-weight);
    cursor:         pointer;
    transition:     background 0.2s, opacity 0.2s;
    align-self:     flex-start;
    line-height:    1;
}

.evos-prayer-submit:hover {
    background: var(--evos-btn-hover-bg);
}

.evos-prayer-submit:disabled {
    opacity:    0.65;
    cursor:     not-allowed;
}

.evos-prayer-submit__spinner {
    display:        none;
    width:          1rem;
    height:         1rem;
    border:         2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius:  50%;
    animation:      evos-spin 0.6s linear infinite;
}

.evos-prayer-form.is-loading .evos-prayer-submit__spinner {
    display: inline-block;
}

@keyframes evos-spin {
    to { transform: rotate(360deg); }
}

/* ── Info panel ───────────────────────────────────────── */

.evos-prayer-info {
    padding:        2rem;
    background:     var(--evos-info-bg);
    border-radius:  var(--evos-info-radius);
    border:         1px solid var(--evos-info-border);
}

.evos-prayer-info__heading {
    font-family:    var(--evos-font);
    font-size:      1.15rem;
    font-weight:    700;
    color:          var(--evos-info-heading-color);
    margin:         0 0 0.75rem;
}

.evos-prayer-info__text {
    font-size:      0.95rem;
    line-height:    1.7;
    color:          var(--evos-info-text-color);
    margin:         0 0 1.5rem;
}

.evos-prayer-info__list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
}

.evos-prayer-info__item {
    display:        flex;
    align-items:    flex-start;
    gap:            0.6rem;
    font-size:      0.9rem;
    line-height:    1.5;
    color:          var(--evos-info-item-color);
}

.evos-prayer-info__icon {
    flex-shrink:    0;
    font-size:      1.1rem;
    line-height:    1.4;
}