/**
 * Yad Labanim Donation System - Core Styles
 * Architecture: Scoped (#yl-donation-app-wrapper), Mobile-First, BEM-flavored
 */

:root {
    /* Brand Colors */
    --yl-primary: #901d1e;
    --yl-primary-dark: #6e1414;
    --yl-primary-light: #ab2526;
    --yl-text-main: #1f2937;
    --yl-text-muted: #6b7280;
    --yl-bg-light: #f9fafb;
    --yl-border: #e5e7eb;

    /* Functional Colors */
    --yl-success: #10b981;
    --yl-error: #ef4444;
    --yl-focus-ring: rgba(144, 29, 30, 0.2);

    /* Spacing & Layout */
    --yl-radius: 12px;
    --yl-gap: 1.5rem;
    --yl-container-max: 600px;

    --yl-font-family: inherit;
}

/* ==========================================================================
   Base Scope & Reset
   ========================================================================== */
#yl-donation-app-wrapper {
    font-family: var(--yl-font-family);
    color: var(--yl-text-main);
    line-height: 1.5;
    direction: rtl;
    /* Default RTL for Hebrew */
    box-sizing: border-box;
    width: 100%;
}

#yl-donation-app-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   Project Grid & Slider
   ========================================================================== */
#yl-donation-app-wrapper .yl-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile Default */
    gap: var(--yl-gap);
    width: 100%;
    margin-bottom: 2rem;
}

/* Tablet & Up */
@media (min-width: 640px) {
    #yl-donation-app-wrapper .yl-projects-grid {
        grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
    }
}

/* Project Card */
#yl-donation-app-wrapper .yl-project-card {
/*     background: var(--yl-input-bg); */
    border-radius: var(--yl-radius);
    overflow: hidden;
/*     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#yl-donation-app-wrapper .yl-project-card:hover {
    transform: translateY(-4px);
/*     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); */
}

/*  Card Image - Aspect Ratio Lock */
#yl-donation-app-wrapper .yl-card-image {
    position: relative;
/*     background: var(--yl-border-light); */
}

#yl-donation-app-wrapper .yl-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#yl-donation-app-wrapper .yl-project-card:hover .yl-card-image img {
    transform: scale(1.05);
}

/* Card Content */
#yl-donation-app-wrapper .yl-card-content {
	padding: 4rem 1.25rem 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: .5rem;
}

#yl-donation-app-wrapper .yl-card-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

#yl-donation-app-wrapper .yl-card-title a {
    color: var(--yl-text-main);
    text-decoration: none;
    transition: color 0.2s;
}

#yl-donation-app-wrapper .yl-card-title a:hover {
    color: var(--yl-primary);
}

#yl-donation-app-wrapper .yl-card-description {
    color: var(--yl-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

#yl-donation-app-wrapper .yl-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--yl-primary);
    color: white;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

#yl-donation-app-wrapper .yl-card-btn:hover {
    background: var(--yl-primary-dark);
}

/* Slider Overrides (Defensive) */
#yl-donation-app-wrapper .swiper {
    padding-bottom: 40px;
    /* Pagination space */
}

#yl-donation-app-wrapper .swiper-button-next,
#yl-donation-app-wrapper .swiper-button-prev {
    color: var(--yl-primary);
    font-weight: bold;
}

/* ==========================================================================
   Donation Form
   ========================================================================== */
#yl-donation-app-wrapper .yl-donation-form {
    max-width: var(--yl-container-max);
    margin: 0 auto;
    background: var(--yl-input-bg);
    border-radius: var(--yl-radius);
    padding: 2rem;
    box-shadow: 0 10px 25px -5px var(--yl-shadow-soft);
    border: 1px solid var(--yl-border);
}

/* Progress Bar */
#yl-donation-app-wrapper .yl-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    background: var(--yl-bg-light);
    padding: 0.75rem 1rem;
    border-radius: 99px;
}

#yl-donation-app-wrapper .yl-progress-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--yl-text-muted);
    white-space: nowrap;
}

#yl-donation-app-wrapper .yl-progress-bar {
    flex-grow: 1;
    height: 8px;
    background: var(--yl-border);
    border-radius: 10px;
    overflow: hidden;
}

#yl-donation-app-wrapper .yl-progress-fill {
    height: 100%;
    background: var(--yl-primary);
    transition: width 0.3s ease;
}

/* Form Steps */
#yl-donation-app-wrapper .yl-form-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

#yl-donation-app-wrapper .yl-form-step.active {
    display: block;
}

/* Amount Selection Grid */
#yl-donation-app-wrapper .yl-amount-group {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Radio Button Styling (Visual Only) */
#yl-donation-app-wrapper .yl-radio-label input:not(input#yl-custom-amount-input) {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#yl-donation-app-wrapper .yl-radio-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border: 2px solid var(--yl-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    height: 100%;
    background: var(--yl-input-bg);
    color: var(--yl-text-main);
}

#yl-donation-app-wrapper .yl-radio-label input:checked+.yl-radio-text {
    border-color: var(--yl-primary);
    background: var(--yl-primary);
    color: white;
    box-shadow: 0 4px 6px -1px var(--yl-focus-ring);
}

#yl-donation-app-wrapper .yl-amount-value {
    font-size: 1.25rem;
    font-weight: 700;
}

#yl-donation-app-wrapper .yl-radio-label input:checked+.yl-radio-text .yl-amount-value {
    color: white;
}

/* Custom Input */
#yl-donation-app-wrapper .yl-inline-custom-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	position: relative;
}

#yl-donation-app-wrapper .yl-inline-input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: inherit;
    outline: none;
}

#yl-donation-app-wrapper .yl-inline-input::placeholder {
    color: var(--yl-text-muted);
    font-weight: normal;
}

#yl-donation-app-wrapper .yl-radio-label input:checked+.yl-radio-text ::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Toggles (Frequency / Donor Type) */
#yl-donation-app-wrapper .yl-frequency-group,
#yl-donation-app-wrapper .yl-donor-type-group {
    display: flex;
    background: var(--yl-bg-light);
    padding: 4px;
    border-radius: 99px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--yl-border);
}

#yl-donation-app-wrapper .yl-frequency-group .yl-radio-label,
#yl-donation-app-wrapper .yl-donor-type-group .yl-radio-label {
    flex: 0;
    margin-bottom: 0;
}

#yl-donation-app-wrapper .yl-frequency-group .yl-radio-text,
#yl-donation-app-wrapper .yl-donor-type-group .yl-radio-text {
    border: none;
    background: transparent;
    color: var(--yl-text-muted);
    border-radius: 99px;
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

#yl-donation-app-wrapper .yl-frequency-group input:checked+.yl-radio-text,
#yl-donation-app-wrapper .yl-donor-type-group input:checked+.yl-radio-text {
    background: var(--yl-input-bg);
    color: var(--yl-primary);
}

/* Fields & Inputs */
#yl-donation-app-wrapper .yl-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#yl-donation-app-wrapper .yl-field {
    flex: 1 1 200px;
    /* Smart wrapping */
    margin-bottom: 1rem;
    position: relative;
}

#yl-donation-app-wrapper .yl-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yl-text-main);
}

#yl-donation-app-wrapper .yl-field input,
#yl-donation-app-wrapper .yl-field select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--yl-border);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
    background: var(--yl-input-bg);
}

#yl-donation-app-wrapper .yl-field input:focus,
#yl-donation-app-wrapper .yl-field select:focus {
    outline: none;
    border-color: var(--yl-primary);
    box-shadow: 0 0 0 3px var(--yl-focus-ring);
}

/* Errors */
#yl-donation-app-wrapper .yl-field.error input {
    border-color: var(--yl-error);
    background-color: rgba(239, 68, 68, 0.05);
}

#yl-donation-app-wrapper .yl-field-error-msg {
    color: var(--yl-error);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Buttons */
#yl-donation-app-wrapper .yl-btn-next,
#yl-donation-app-wrapper .yl-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    background: var(--yl-primary);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    transition: filter 0.2s;
    margin-top: 1rem;
}

#yl-donation-app-wrapper .yl-btn-next:hover,
#yl-donation-app-wrapper .yl-btn-submit:hover {
    filter: brightness(1.1);
}

#yl-donation-app-wrapper .yl-btn-back {
    background: transparent;
    border: none;
    color: var(--yl-text-muted);
    font-size: 0.9rem;
    padding: 0.5rem;
    margin-right: 1rem;
    cursor: pointer;
    text-decoration: underline;
}

/* Helper: Hidden */
#yl-donation-app-wrapper .hidden {
    display: none !important;
}

/* Responsive Tweaks */
@media (max-width: 480px) {
    #yl-donation-app-wrapper .yl-donation-form {
        padding: 1.5rem;
    }

    #yl-donation-app-wrapper .yl-amount-group {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on small mobile */
    }

    /* Make last item span 2 cols if odd */
    #yl-donation-app-wrapper .yl-amount-group .yl-radio-label:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

/* =========================================
   1. Container & Layout (Tightened)
   ========================================= */

.yl-donation-form,
.yl-donation-form * {
    box-sizing: border-box;
}

.yl-donation-form {
    font-size: var(--yl-font-size-base, 1rem);
    max-width: 1440px;
    /* Reduced width for focus */
    margin: 2rem auto;
    margin-inline: auto;
    /* Fix For RTL Center */
    padding: 1.5rem;
    /* REVERT: Reduced from 2.5rem */

    /* Subtle Glass Effect */
    background: var(--yl-bg-glass);
    backdrop-filter: blur(var(--yl-blur, 8px));
    -webkit-backdrop-filter: blur(var(--yl-blur, 8px));

    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    color: var(--yl-text);

    /* Premium Lift */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.7);

    width: min(100%, 1440px) !important;
    /* SMART WIDTH */
    max-width: 1440px !important;
    align-self: center;
    /* Flex safety */
}

/* Elementor "Safe Mode" Placeholder */
.yl-admin-editor-mode {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 400px;
    background: var(--yl-bg-light);
    border: 2px dashed var(--yl-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   2. Progress Bar (Compact)
   ========================================= */

.yl-progress-wrapper {
    margin-bottom: 0 !important;
    /* ZERO SPACING */
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Glass Pill */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.yl-progress-title {
    font-size: 0.8rem;
    /* Small & Muted */
    color: var(--yl-text-muted);
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.yl-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    /* Subtle track */
    border-radius: 99px;
    overflow: hidden;
}

.yl-progress-fill {
    height: 100%;
    background: var(--yl-primary);
    /* Solid color better for small bars */
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* Amount Header (Big & Bold) */
/* Amount Header (HIDDEN per Phase 16) */
.yl-amount-display {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--yl-primary);
    margin: 0 !important;
    /* KILL GHOST MARGIN */
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    /* Force hide removed - User requested restore */
    display: block;
    min-height: 0;
    /* Ensure it can collapse */
}

.yl-display-amount {
    display: inline-block;
}

/* =========================================
   3. Inputs & Forms (Hierarchy Fixed)
   ========================================= */

.yl-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.yl-legend {
    font-size: 1rem;
    /* Medium size */
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 0 !important;
    /* ZERO SPACING FORCE */
    /* No top gap */
    color: var(--yl-text);
    display: block;
    width: 100%;
}

body .yl-field-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Floating Labels (Phase 17) */
body .yl-field-row .yl-field {
    width: auto !important;
    /* Allow flex sizing */
    max-width: 100% !important;
    flex: 1 0 45%;
    /* Shrink/Grow but pivot around 45% (allows 2 per row) */
    position: relative;
    margin-bottom: 1rem;
}

.yl-field label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    padding: 0 0.25rem;
    font-size: 0.95rem;
    color: var(--yl-text-muted);
    pointer-events: none;
    transition: all 0.2s ease-out;
    z-index: 1;
}

.yl-field input,
.yl-select {
    width: 100%;
    padding: 1rem 1rem 0.5rem 1rem !important;
    /* pt pb for space */
    height: 50px;
    font-size: 1rem;
    background: var(--yl-input-bg, rgba(255, 255, 255, 0.6));
    /* Semi-transparent */
    border: 1px solid var(--yl-border-light);
    border-radius: 12px;
    transition: var(--yl-transition);
}

/* Float State */
.yl-field input:focus~label,
.yl-field input:not(:placeholder-shown)~label {
    top: -10px;
    background-color: #fff;
    padding-inline: 5px;
    left: 0.8rem;
    font-size: 0.7rem;
    color: var(--yl-primary);
    font-weight: 600;
    transform: none;
}

/* Focus State */
.yl-field input:focus {
    background: #fff;
    border-color: var(--yl-primary);
    box-shadow: 0 4px 12px var(--yl-shadow-soft);
}

/* Required Asterisk */
.required {
    color: var(--yl-error);
    margin-right: 4px;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
}

/* RTL Support for Form Labels */
[dir="rtl"] .yl-donation-form label {
    text-align: right;
    left: auto;
    transform-origin: top right;
}

[dir="rtl"] .yl-field input:focus~label,
[dir="rtl"] .yl-field input:not(:placeholder-shown)~label {
    left: auto;
    right: 0.8rem;
    transform: none;
}

[dir="rtl"] .required {
    margin-right: 0;
    margin-left: 4px;
    float: none;
    vertical-align: middle;
}

/* =========================================
   4. Amount Selection (Grid)
   ========================================= */

.yl-amount-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    /* Compact buttons */
    gap: 0.5rem;
    /* Tighter gap */
    margin-bottom: 1rem;
}

.yl-radio-label {
    cursor: pointer;
}

.yl-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Amount Button (Select Amount) */
.yl-amount-label {
    margin-bottom: 0;
    text-align: center;
    padding: 0;
    /* Reset padding, use flex centering */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--yl-border);
    transition: all 0.2s ease;
    height: 56px;
    /* Increased height per request */
}

.yl-custom-label {
    margin-bottom: 0.75rem;
}

/* Fix flex alignment for text */
.yl-amount-label .yl-radio-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Better gap between Amount and Currency */
    width: 100%;
    height: 100%;
    font-size: 1.1rem;
    /* Slightly larger text */
    font-weight: 700;
}

/* Ghost Amount Buttons (Phase 17) */
.yl-radio-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;

    background: #fff;
    border: 1px solid var(--yl-border-light);
    border-radius: var(--yl-radius);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Remove Ghost Border Mask */
.yl-radio-text::before {
    content: none;
}

.yl-amount-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--yl-text);
    transition: color 0.3s;
}

/* Selected State */
/* Selected State - Solid Primary (Different from Gradient Next) */
.yl-radio-input:checked+.yl-radio-text {
    border-color: var(--yl-primary);
    background: var(--yl-primary);
    color: #fff;
    box-shadow: 0 4px 12px var(--yl-focus-ring);
    transform: translateY(-1px);
    z-index: 2;
}

.yl-radio-input:checked+.yl-radio-text .yl-amount-value,
.yl-radio-input:checked+.yl-radio-text .yl-currency-symbol {
    color: #fff !important;
}

/* =========================================
   4a. Segmented Controls (Frequency/Donor)
   ========================================= */

.yl-frequency-group,
.yl-donor-type-group {
    display: flex !important;
    flex-direction: row;
    background: var(--yl-bg-light);
    padding: 4px;
    border-radius: 99px;
    border: 1px solid var(--yl-border-light);
    gap: 0;
    margin-bottom: 1.5rem;
    width: 100%;
}

.yl-frequency-group .yl-radio-label,
.yl-donor-type-group .yl-radio-label {
    flex: 0 0 50% !important;
    /* RIGID SPLIT */
    width: 50% !important;
    max-width: 50% !important;
    margin: 0;
    text-align: center;
}

.yl-frequency-group .yl-radio-text,
.yl-donor-type-group .yl-radio-text {
    border: none;
    background: transparent;
    border-radius: 99px;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--yl-text-muted);
    box-shadow: none;
    height: auto;

    /* FORCE FILL & CENTER */
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    text-align: center;
}

/* Segmented Control Style for Toggles */
.yl-frequency-group .yl-radio-input:checked+.yl-radio-text,
.yl-donor-type-group .yl-radio-input:checked+.yl-radio-text {
    background: #fff;
    color: var(--yl-primary);
    border: 1px solid var(--yl-border-subtle);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-weight: 700;
    transform: none;
}

/* Inline Custom Input Styling */
.yl-inline-custom-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yl-inline-input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: inherit;
    padding: 0;
    margin: 0;
    outline: none !important;
    box-shadow: none !important;
    height: 100%;
}

.yl-inline-input::placeholder {
    color: inherit;
    opacity: 0.6;
}

/* Hide spin buttons */
.yl-inline-input::-webkit-outer-spin-button,
.yl-inline-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.yl-inline-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Custom amount typing mode - ensure input is interactive */
.yl-custom-label.typing-mode .yl-inline-custom-wrapper {
    display: flex !important;
    pointer-events: auto !important;
}

.yl-custom-label.typing-mode .yl-inline-input:not(input#yl-custom-amount-input) {
    pointer-events: auto !important;
    cursor: text;
    color: #fff !important;
    caret-color: #fff;
}

/* Custom Amount Input */
.yl-custom-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--yl-border-light);
    border-radius: var(--yl-input-radius);
    overflow: hidden;
    background: #fff;
    transition: var(--yl-transition);
    margin-top: 0.75rem;
}

.yl-custom-input-wrapper:focus-within {
    border-color: var(--yl-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.yl-currency-prefix {
    padding: 0.65rem 0.8rem;
    background: #f8fafc;
    font-weight: 600;
    color: var(--yl-text-muted);
    border-right: 1px solid var(--yl-border-light);
}

.yl-custom-input {
    border: none !important;
    box-shadow: none !important;
    font-size: 1rem;
    font-weight: 600;
}

.yl-custom-label.typing-mode.active .yl-inline-custom-wrapper:after {
    content: "₪";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

/* =========================================
   5. Buttons (Restored Flow)
   ========================================= */

.yl-step-nav {
    display: flex;
    flex-direction: row !important;
    /* Force row always */
    flex-wrap: nowrap !important;
    /* Never wrap */
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 0.5rem;
    /* Reduced top margin significantly */
    padding-top: 0 !important;
    /* Removed padding */
    border-top: none !important;
    /* Removed line per request */
    position: relative;
    /* For error positioning */
}

/* "Chill" Error Message */
.yl-form-error {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 15px;
    margin-bottom: 0;
    white-space: nowrap;

    /* Chill Style */
    background: transparent;
    /* No box */
    color: var(--yl-error);
    /* Simple Red */
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 600;
    /* Bold enough to read */
    display: none;
    z-index: 10;
    box-shadow: none;
    /* No shadow */
}

/* =========================================
   8. Smart Validation (Field Errors)
   ========================================= */

.yl-field-error-msg {
    color: var(--yl-error);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.25rem;
    margin-left: 0.25rem;
    display: none;
    /* JS will toggle */
    animation: fadeIn 0.3s ease;
}

[dir="rtl"] .yl-field-error-msg {
    margin-left: 0;
    margin-right: 0.25rem;
    text-align: right;
    /* Force Right */
    display: block;
    /* Ensure it takes width */
}

/* Force Labels Right in RTL */
[dir="rtl"] .yl-field label {
    left: auto !important;
    right: 1rem !important;
    transform-origin: top right;
    text-align: right;
}

/* Force Float State Right in RTL */
[dir="rtl"] .yl-field input:focus~label,
[dir="rtl"] .yl-field input:not(:placeholder-shown)~label {
    left: auto !important;
    right: 0.8rem !important;
    transform: none;
    /* Reset transform */
}

/* Force Asterisk Right */
[dir="rtl"] .required {
    margin-right: 0;
    margin-left: 4px;
    float: none;
    display: inline-block;
}

/* Ensure inputs text starts from right */
[dir="rtl"] .yl-field input,
[dir="rtl"] .yl-select {
    text-align: right;
    direction: rtl;
}

.yl-field.error input,
.yl-field.error .yl-select {
    border-color: var(--yl-error);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1);
    background: rgba(239, 68, 68, 0.05);
}

.yl-field.error label {
    color: var(--yl-error);
}

[dir="ltr"] .yl-form-error {
    right: 100%;
    margin-right: 20px;
}

[dir="rtl"] .yl-form-error {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 0 10px 0;
    width: 100%;
}

@media (max-width: 600px) {
    .yl-step-nav {
        flex-direction: column-reverse !important;
        gap: 1rem;
        margin-top: 1rem;
    }

    .yl-form-error {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        margin: 0 0 10px 0;
        text-align: center;
    }

    [dir="rtl"] .yl-form-error {
        left: auto;
        margin-left: 0;
        margin-bottom: 10px;
    }
}

.yl-btn-next,
.yl-btn-submit {
    background: var(--yl-primary-gradient);
    color: #fff;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    /* Arrow handled below */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Space for SVG */
}

.yl-btn-next:hover,
.yl-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--yl-focus-ring);
    filter: brightness(1.05);
    /* Subtle brightness */
}

.yl-btn-back {
    background: transparent;
    color: var(--yl-primary);
    /* Better Visibility */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-weight: 600;
}

.yl-btn-back:hover {
    color: var(--yl-primary-dark);
    background: var(--yl-focus-ring);
    /* Subtle hover pill */
}

/* Inline SVG Icons */
.yl-icon-chevron {
    width: 18px;
    height: 18px;
    stroke-width: 2.5px;
    transition: transform 0.2s ease;
}

[dir="ltr"] .yl-btn-next:hover .yl-icon-chevron {
    transform: translateX(3px);
}

[dir="rtl"] .yl-btn-next:hover .yl-icon-chevron {
    transform: translateX(-3px);
}

[dir="ltr"] .yl-btn-back:hover .yl-icon-chevron {
    transform: translateX(-3px);
}

[dir="rtl"] .yl-btn-back:hover .yl-icon-chevron {
    transform: translateX(3px);
}



/* =========================================
   6. Icons & Trust (Fixed Size)
   ========================================= */

.yl-secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    color: var(--yl-success);
    font-size: 0.8rem;
    font-weight: 500;
}

.yl-payment-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* FIX: Force size */
.yl-cards-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    opacity: 1 !important;
    /* FIX: Restore visibility */
    display: block;
}

/* =========================================
   7. Projects Grid (Card Lift)
   ========================================= */

.yl-projects-grid {
    --grid-gap: 20px;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
    gap: var(--grid-gap);
    width: 100%;
}

.yl-project-card {
/*     background: #fff; */
    border-radius: var(--yl-radius);
    overflow: hidden;
/*     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* Softer shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill height */
    position: relative;
    /* Removed fixed width constraints */
}

/* 16/9 Aspect Ratio for Images */
.yl-card-image {
    position: relative;
    width: 100%;
/*     aspect-ratio: 16 / 9;
    background: #f1f5f9; */
    overflow: hidden;
}



.yl-project-card .yl-card-link-wrapper {
	--aspect-ratio: 1;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
	border-radius: 50%;
    aspect-ratio: var(--aspect-ratio) !important;
	max-width: 60%;
	margin-inline: auto;
	margin-bottom: -60px;
}

#yl-donation-app-wrapper .yl-card-image {
    aspect-ratio: var(--aspect-ratio);
}

.yl-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.yl-project-card:hover .yl-card-image img {
    transform: scale(1.05);
}

.yl-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.yl-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.yl-card-title a {
    font-size: 0.8rem !important;
    /* Reduced size */
    color: var(--yl-text-muted);
    line-height: 1.4;
    cursor: pointer;
}

.yl-card-description {
    font-size: 0.9rem;
    color: var(--yl-text-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex: 1;
}

.yl-card-btn {
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    background: var(--yl-primary);
    color: #fff;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--yl-transition);
}

.yl-card-btn:hover {
    background: var(--yl-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================
   8. Errors & Responsive
   ========================================= */

/* =========================================
   PROJECT HEADER STYLING
   ========================================= */
.yl-project-info {
    margin-bottom: 1.5rem;
    text-align: center;
}

.yl-project-image-wrapper {
    margin: 0 auto 1.25rem auto;
    width: 100%;
    max-width: 100%;
    border-radius: var(--yl-radius);
    overflow: hidden;
    /* Clean image container */
    box-shadow: none;
    /* Removed shadow/border that caused gray line */
    background: transparent;
    /* Ensure no background bleed */
    /* aspect-ratio removed to enforce strict height */
}

.yl-project-image {
    height: auto;
    width: 100%;
    border-radius: var(--yl-radius);
    /* Improvement: Enforce a ratio so they line up nicely */
    aspect-ratio: 16/9;
    object-fit: cover;
    /* Subtle polish */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.yl-project-image:hover {
    transform: scale(1.02);
    /* Slight zoom on hover */
}

.yl-project-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--yl-primary);
    /* Use primary color */
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.yl-project-description {
    font-size: 0.95rem;
    color: var(--yl-text);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    /* Center constrain for readability */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Equal Height Cards */
.yl-projects-swiper .swiper-slide {
    height: auto;
    display: flex;
    /* Critical for equal height children */
}

.yl-project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
/*     border: 1px solid var(--yl-border-light); */
    border-radius: var(--yl-radius);
    overflow: hidden;
/*     background: #fff; */
/*     box-shadow: var(--yl-shadow-soft); */
    transition: transform 0.2s, box-shadow 0.2s;
    /* min-height removed */
}

.yl-card-content {
    flex: 1;
    /* Pushes button to bottom if desired, or just fills space */
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.yl-card-description {
    flex-grow: 1;
    /* Pushes button down */
    margin-bottom: 1rem;
}

/* Swiper Project Carousel Overrides */
.yl-projects-swiper {
    padding: 0 40px 40px 40px !important;
    /* Reduced Padding */
    position: relative;
    overflow: hidden !important;
    /* Fix Overflow */
    direction: rtl;
    margin-inline: auto;
    /* Center It */
}

/* Arrow Flip for RTL */
.swiper-button-next,
.swiper-button-prev {
    color: var(--yl-primary) !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    /* No blurring circle */
    box-shadow: none !important;
    top: 50% !important;
    /* Slight adjust */
    transform: translateY(-50%);
    margin: 0 !important;
}

.swiper-button-prev {
    left: 0 !important;
    right: auto !important;
}

.swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

/* In RTL: Prev is Right, Next is Left */
.swiper-button-prev {
    right: 0 !important;
    left: auto !important;
}

.swiper-button-next {
    left: 0 !important;
    right: auto !important;
}



.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 32px !important;
    /* Larger, cleaner arrows */
    font-weight: 900 !important;
}

/* Card Images - Strict Enforcement */
.yl-card-image img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: var(--yl-radius) var(--yl-radius) 0 0;
    /* Top corners only */
}

.swiper-pagination-bullet-active {
    background: var(--yl-primary) !important;
    /* Force Red */
}

.swiper-pagination-bullet {
    opacity: 0.6;
    background: #ccc;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.yl-form-error {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid var(--yl-error);
    border-left-width: 4px;
    color: var(--yl-error);
    padding: 1rem;
    border-radius: var(--yl-radius);
    margin-top: 1rem;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.yl-input-error {
    border-color: var(--yl-error) !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .yl-donation-form {
        margin: 1rem;
        padding: 1.25rem;
    }

    .yl-amount-group {
        grid-template-columns: repeat(2, 1fr);
    }

    .yl-step-nav {
        flex-direction: row;
        /* Keep row */
        gap: 1rem;
    }
}

/* Hints (Monthly / One-time) */
.yl-monthly-hint,
.yl-onetime-hint {
    font-size: 0.85rem;
    color: var(--yl-text-muted);
    text-align: center;
    margin: -1rem 0 1.5rem 0;
    font-weight: 500;
}

/* Impact Text under Amount - Matches Hint Style */
.yl-impact-text {
    font-size: 0.9rem;
    color: var(--yl-text-muted);
    font-weight: 500;
    text-align: center;
    margin: 0 auto 1.5rem auto;
    max-width: 90%;
    line-height: 1.4;
    display: none;
    /* JS toggles this */
}

/* =========================================
   9. Tranzila Payment Container
   ========================================= */

#yl-payment-container {
    background: #fff;
    border-radius: var(--yl-radius);
    padding: 1rem;
    min-height: 400px;
    /* Prevent collapse */
    display: flex;
    flex-direction: column;
    /* Integrate into glass container */
    margin: 0 -1rem;
    /* Negative margin to fill width */
    width: calc(100% + 2rem);
    border-top: 1px solid var(--yl-border-light);
}

#yl-payment-container iframe {
    width: 100%;
    min-height: 500px;
    border: none;
    border-radius: var(--yl-radius);
}

/* =========================================
   10. Unified Footer (Phase 17)
   ========================================= */

.yl-form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centralized */
    padding: 1.25rem 1rem;
    margin: 2.5rem -1.5rem 0 -1.5rem;
    /* Full width bottom, positioned lower */
    background: var(--yl-footer-bg, rgba(255, 255, 255, 0.3));
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 0 var(--yl-radius) var(--yl-radius);
    gap: 1.5rem;
    font-size: 0.8rem;
    /* Reduced footer text size */
}

.yl-footer-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--yl-text-muted);
    font-weight: 500;
    position: relative;
    cursor: help;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: opacity 0.2s, background 0.2s;
}

.yl-footer-item:hover {
    background: var(--yl-bg-glass);
    color: var(--yl-primary);
    opacity: 1;
}

.yl-footer-item:hover svg {
    opacity: 1;
}

.yl-footer-item svg {
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.yl-footer-text {
    font-size: 0.8rem;
    /* Explicitly reduced */
}

/* Increased gap */

.yl-footer-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--yl-text);
    opacity: 0.8;
    transition: opacity 0.2s;
    position: relative;
    /* For tooltip */
    cursor: help;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Custom Tooltip */
.yl-footer-col[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--yl-primary-dark);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 1000;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px var(--yl-shadow-soft);
    width: max-content;
    max-width: 280px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    animation: yl-tooltip-fade 0.2s forwards;
}

.yl-footer-col[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--yl-primary-dark);
    margin-bottom: -2px;
    opacity: 0;
    animation: yl-tooltip-fade 0.2s forwards;
}

@keyframes yl-tooltip-fade {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.yl-footer-col:hover {
    background: var(--yl-bg-glass);
    color: var(--yl-primary);
}

.yl-footer-col svg {
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.yl-footer-col:hover svg {
    opacity: 1;
}

[dir="rtl"] .yl-footer-secure {
    margin-left: 0;
}

/* Info Icon Styling */
.yl-icon-info-circle {
    transition: opacity 0.2s;
}

.yl-footer-col:hover .yl-icon-info-circle {
    opacity: 0.8 !important;
    color: var(--yl-primary);
}

.yl-footer-right {
    display: flex;
    align-items: center;
}

.yl-currency-link {
    font-size: 0.75rem;
    color: var(--yl-text-muted);
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 2px 8px;
    border-radius: 99px;
    transition: all 0.2s;
}

.yl-currency-link:hover {
    background: var(--yl-input-bg);
    color: var(--yl-primary);
    border-color: var(--yl-primary);
}

@media (max-width: 400px) {
    .yl-amount-group {
        grid-template-columns: 1fr;
        /* Stack vertically on very small screens */
    }

    .yl-step-nav {
        flex-direction: column-reverse;
        /* Stack buttons */
        width: 100%;
    }


    .yl-btn {
        width: 100% !important;
        justify-content: center;
    }
}

/* Fix Slider Overflow */
.yl-projects-swiper {
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    margin-inline: auto !important;
    /* CENTER SLIDER */
    padding: 10px 0 40px 0;
    /* Space for shadow and pagination */
}

/* Swiper Slide Safety */
.swiper-slide {
    height: auto;
    box-sizing: border-box;
}

.yl-project-card {
    height: 100%;
    width: 100%;
}


/* =========================================
   DEFENSIVE CSS - High Specificity (No !important)
   ========================================= */

/* Use body scope to beat theme styles naturally */
body .yl-projects-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
    /* Default 2 */
    gap: 20px;
    width: 100%;
}

/* Ensure Swiper container is visible */
body .yl-projects-slider.swiper {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 40px;
    /* Space for pagination */
}

/* Swiper wrapper must be flex */
body .yl-projects-slider .swiper-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Swiper slides */
body .yl-projects-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    transition-property: transform;
    display: block;
}

/* Prevent Elementor from hiding pagination */
body .yl-projects-slider .swiper-pagination {
    display: block;
    bottom: 0;
    position: absolute;
    width: 100%;
    text-align: center;
}

/* Ensure project cards don't collapse but aren't too tall */
body .yl-project-card {
    min-height: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
/*     background: #fff; */
/*     border-radius: var(--yl-radius); */
    overflow: hidden;
/*     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
}

/* Floating Labels (Phase 17) - Improved Responsiveness */
body .yl-field-row .yl-field {
    width: 100%;
    flex: 1 1 200px;
    position: relative;
    margin-bottom: 1rem;
    max-width: 100%;
}

/* Responsive grid fallback - Tablet */
@media (max-width: 1024px) {
    body .yl-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive grid fallback - Mobile */
@media (max-width: 640px) {
    body .yl-projects-grid {
        grid-template-columns: 1fr;
    }

    body .yl-field-row .yl-field {
        flex: 1 1 100%;
        /* Force full width on mobile */
    }
}