.elementor-kit-6{--e-global-color-primary:#1F6B33;--e-global-color-secondary:#2E8B4A;--e-global-color-text:#1A1A1A;--e-global-color-accent:#2F7DD1;--e-global-color-ed75b07:#F5F8F3;--e-global-color-d5f83cd:#FFFFFF;--e-global-color-b4e6805:#E5E7E5;--e-global-color-60513be:#6B7280;--e-global-color-4ee2eb6:#DC2626;--e-global-color-812def9:#E8F3EC;--e-global-color-ea15b57:#DCE8F5;--e-global-color-ecada1e:#FCE7E7;--e-global-color-3d9a250:#FCE8D4;--e-global-typography-primary-font-family:"Cairo";--e-global-typography-primary-font-size:72px;--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Cairo";--e-global-typography-secondary-font-size:48px;--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Cairo";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.4px;--e-global-typography-accent-font-family:"Cairo";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:600;background-color:var( --e-global-color-ed75b07 );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================
   BLAGHNI FORM STYLING — Form ID 5
   ===================================================== */

/* --- FOUNDATION --- */
.ff_form_instance_5_1,
.ff_form_instance_5_1 *,
.ff_form_instance_5_1 input,
.ff_form_instance_5_1 textarea,
.ff_form_instance_5_1 select,
.ff_form_instance_5_1 button,
.ff_form_instance_5_1 label {
    font-family: 'Cairo', sans-serif !important;
}

/* Form container */
.ff_form_instance_5_1 {
    max-width: 960px;
    margin: 0 auto;
    background: #FFFFFF;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid #E5E7E5;
}

/* Labels */
.ff_form_instance_5_1 .ff-el-input--label label {
    color: #1A1A1A !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Required asterisk in green */
.ff_form_instance_5_1 .ff-el-is-required.asterisk-right label:after,
.ff_form_instance_5_1 .ff-el-is-required.asterisk-left label:after {
    color: #1F6B33 !important;
}

/* Field group spacing */
.ff_form_instance_5_1 .ff-el-group {
    margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 768px) {
    .ff_form_instance_5_1 {
        max-width: 95%;
        padding: 24px 20px;
        border-radius: 16px;
    }
}

/* =====================================================
   PROGRESS BAR SECTION
   ===================================================== */

/* Container around progress label + bar */
.ff_form_instance_5_1 .ff-step-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E7E5;
}

/* Step status text "Step 1 of 4 - الفئة" */
.ff_form_instance_5_1 .ff-el-progress-status {
    color: #1F6B33 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Progress bar track (background) */
.ff_form_instance_5_1 .ff-el-progress {
    background: #E5E7E5 !important;
    height: 8px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    position: relative;
}

/* Progress bar fill (green) */
.ff_form_instance_5_1 .ff-el-progress-bar {
    background: linear-gradient(90deg, #1F6B33 0%, #2E8B4A 100%) !important;
    height: 8px !important;
    border-radius: 999px !important;
    transition: width 0.4s ease-out !important;
}

/* Hide the percentage text inside the bar (it's redundant with the status text above) */
.ff_form_instance_5_1 .ff-el-progress-bar span {
    display: none !important;
}

/* =====================================================
   STEP 1: CATEGORY GRID
   ===================================================== */

/* Wrapper holding all 6 cards */
.ff_form_instance_5_1 [data-name="step_start-5_5"] > .ff-el-group > .ff-el-input--content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

/* Each card wrapper */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check {
    margin: 0 !important;
    padding: 0 !important;
}

/* The visible card */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #FFFFFF !important;
    border: 2px solid #E5E7E5 !important;
    border-radius: 16px !important;
    padding: 28px 16px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    text-align: center;
    min-height: 130px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Hide the actual radio */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Category text */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label span {
    color: #1A1A1A;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Cairo', sans-serif;
    margin: 0 !important;
    padding: 0 !important;
}

/* Icon circle — always white background, always green icon */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label::before {
    content: '';
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #E8F3EC;
    background-size: 28px 28px;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 0.2s ease;
}

/* Icons (Font Awesome SVGs from home page) */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check:nth-child(1) .ff-el-form-check-label::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 448 512'><path d='M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z'/></svg>");
}
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check:nth-child(2) .ff-el-form-check-label::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 576 512'><path d='M562.1 383.9c-21.5-2.4-42.1-10.5-57.9-22.9-14.1-11.1-34.2-11.3-48.2 0-37.9 30.4-107.2 30.4-145.7-1.5-13.5-11.2-33-9.1-46.7 1.8-38 30.1-106.9 30-145.2-1.7-13.5-11.2-33.3-8.9-47.1 2-15.5 12.2-36 20.1-57.7 22.4-7.9.8-13.6 7.8-13.6 15.7v32.2c0 9.1 7.6 16.8 16.7 16 28.8-2.5 56.1-11.4 79.4-25.9 56.5 34.6 137 34.1 192 0 56.5 34.6 137 34.1 192 0 23.3 14.2 50.9 23.3 79.1 25.8 9.1.8 16.7-6.9 16.7-16v-31.6c.1-8-5.7-15.4-13.8-16.3zm0-144c-21.5-2.4-42.1-10.5-57.9-22.9-14.1-11.1-34.2-11.3-48.2 0-37.9 30.4-107.2 30.4-145.7-1.5-13.5-11.2-33-9.1-46.7 1.8-38 30.1-106.9 30-145.2-1.7-13.5-11.2-33.3-8.9-47.1 2-15.5 12.2-36 20.1-57.7 22.4-7.9.8-13.6 7.8-13.6 15.7v32.2c0 9.1 7.6 16.8 16.7 16 28.8-2.5 56.1-11.4 79.4-25.9 56.5 34.6 137 34.1 192 0 56.5 34.6 137 34.1 192 0 23.3 14.2 50.9 23.3 79.1 25.8 9.1.8 16.7-6.9 16.7-16v-31.6c.1-8-5.7-15.4-13.8-16.3zm0-144C540.6 93.4 520 85.4 504.2 73 490.1 61.9 470 61.7 456 73c-37.9 30.4-107.2 30.4-145.7-1.5-13.5-11.2-33-9.1-46.7 1.8-38 30.1-106.9 30-145.2-1.7-13.5-11.2-33.3-8.9-47.1 2-15.5 12.2-36 20.1-57.7 22.4-7.9.8-13.6 7.8-13.6 15.7v32.2c0 9.1 7.6 16.8 16.7 16 28.8-2.5 56.1-11.4 79.4-25.9 56.5 34.6 137 34.1 192 0 56.5 34.6 137 34.1 192 0 23.3 14.2 50.9 23.3 79.1 25.8 9.1.8 16.7-6.9 16.7-16v-31.6c.1-8-5.7-15.4-13.8-16.3z'/></svg>");
}
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check:nth-child(3) .ff-el-form-check-label::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 512 512'><path d='M480 288c0-80.25-49.28-148.92-119.19-177.62L320 192V80a16 16 0 0 0-16-16h-96a16 16 0 0 0-16 16v112l-40.81-81.62C81.28 139.08 32 207.75 32 288v64h448zm16 96H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z'/></svg>");
}
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check:nth-child(4) .ff-el-form-check-label::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 352 512'><path d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/></svg>");
}
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check:nth-child(5) .ff-el-form-check-label::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 512 512'><path d='M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z'/></svg>");
}
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check:nth-child(6) .ff-el-form-check-label::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 512 512'><path d='M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z'/></svg>");
}

/* HOVER — soft, no icon distortion */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label:hover {
    border-color: #2E8B4A !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 107, 51, 0.06);
}

.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label:hover::before {
    background-color: #DCEBE0;
}

/* SELECTED — keep icon visible (green icon on white circle) */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-input:checked + span {
    color: #1F6B33 !important;
    font-weight: 800 !important;
}

.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label:has(.ff-el-form-check-input:checked) {
    border-color: #1F6B33 !important;
    background: #F5F8F3 !important;
    box-shadow: 0 4px 16px rgba(31, 107, 51, 0.10) !important;
}

/* Icon circle stays white with green icon when selected */
.ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label:has(.ff-el-form-check-input:checked)::before {
    background-color: #FFFFFF;
}

/* Mobile */
@media (max-width: 768px) {
    .ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-input--content {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label {
        padding: 20px 12px !important;
        min-height: 110px;
    }
    
    .ff_form_instance_5_1 [data-name="step_start-5_5"] .ff-el-form-check-label::before {
        width: 48px;
        height: 48px;
        background-size: 24px 24px;
    }
}

/* =====================================================
   STEP 2: DESCRIPTION + NEIGHBORHOOD + ADDRESS
   ===================================================== */

/* All inputs, textareas, selects in Step 2 */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-form-control {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #E5E7E5 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    font-size: 16px !important;
    color: #1A1A1A !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Placeholder color */
.ff_form_instance_5_1 [data-name="form_step-5_1"] ::placeholder {
    color: #9CA3AF !important;
    opacity: 1;
}

/* Focus state — green glow */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-form-control:focus {
    border-color: #1F6B33 !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(31, 107, 51, 0.10) !important;
}

/* Textarea specific (description field) */
.ff_form_instance_5_1 [data-name="form_step-5_1"] textarea.ff-el-form-control {
    min-height: 140px !important;
    resize: vertical !important;
}

/* Select dropdown — custom green arrow on left (RTL) */
.ff_form_instance_5_1 [data-name="form_step-5_1"] select.ff-el-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231F6B33' d='M6 8L0 0h12L6 8z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: left 18px center !important;
    background-size: 12px !important;
    padding-left: 44px !important;
}

/* Select option styling */
.ff_form_instance_5_1 [data-name="form_step-5_1"] select.ff-el-form-control option {
    padding: 12px;
    font-family: 'Cairo', sans-serif;
}

/* Label spacing improvement for Step 2 */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-input--label label {
    color: #1A1A1A !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Add small green icons before each label */

/* Description label icon (text/document) */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-group:nth-child(1) label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Neighborhood label icon (location pin) */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-group:nth-child(2) label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Address label icon (map marker) */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-group:nth-child(3) label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Help text below fields */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-help-message {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #6B7280 !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Error styling */
.ff_form_instance_5_1 [data-name="form_step-5_1"] .error,
.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-form-check-error {
    color: #DC2626 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

.ff_form_instance_5_1 [data-name="form_step-5_1"] .ff-el-form-control.has-error {
    border-color: #DC2626 !important;
}


/* Fix 2: Force fixed icon size on label icons */
.ff_form_instance_5_1 [data-name="form_step-5_1"] label::before {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
}

/* =====================================================
   STEP 3: PHOTO UPLOAD + NAME + PHONE + EMAIL
   ===================================================== */

/* All inputs in Step 3 — same styling as Step 2 */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-form-control:not([type="file"]) {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #E5E7E5 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    font-size: 16px !important;
    color: #1A1A1A !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: 'Cairo', sans-serif !important;
}

.ff_form_instance_5_1 [data-name="form_step-5_2"] ::placeholder {
    color: #9CA3AF !important;
    opacity: 1;
}

.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-form-control:focus {
    border-color: #1F6B33 !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(31, 107, 51, 0.10) !important;
}

/* Phone field — LTR for numbers */
.ff_form_instance_5_1 [data-name="form_step-5_2"] input[type="tel"] {
    direction: ltr !important;
    text-align: right !important;
}

/* Email field — LTR */
.ff_form_instance_5_1 [data-name="form_step-5_2"] input[type="email"] {
    direction: ltr !important;
    text-align: right !important;
}

/* Labels styling — same as Step 2 */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-input--label label {
    color: #1A1A1A !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Force icon size on Step 3 labels too */
.ff_form_instance_5_1 [data-name="form_step-5_2"] label::before {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
}

/* Photo label icon (camera) */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-group:has(input[type="file"]) > .ff-el-input--label label::before {
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5 5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Name label icon (person) */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-name-field-wrapper label::before {
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Phone label icon */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-group:has(input[type="tel"]) label::before {
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Email label icon */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-group:has(input[type="email"]) label::before {
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* =====================================================
   PHOTO UPLOAD — Custom dropzone styling
   ===================================================== */

/* Hide the tooltip icon next to "صورة المشكلة" — we'll show hint below the dropzone instead */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-tooltip {
    display: none !important;
}

/* The actual dropzone wrapper */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_file_upload_holder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 200px !important;
    background: #F5F8F3 !important;
    border: 2px dashed #C0DD97 !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    position: relative;
    overflow: hidden;
}

/* Add cloud-upload icon at top of dropzone via ::before */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_file_upload_holder::before {
    content: '';
    width: 64px;
    height: 64px;
    background-color: #E8F3EC;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/></svg>");
    background-size: 32px 32px;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Add helper text below the icon via ::after */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_file_upload_holder::after {
    content: 'اضغط لاختيار صورة من جهازك';
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: #6B7280;
    text-align: center;
}

/* Hover/focus state */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_file_upload_holder:hover {
    background: #EAF3DE !important;
    border-color: #1F6B33 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 107, 51, 0.08);
}

.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_file_upload_holder:hover::before {
    background-color: #1F6B33;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/></svg>");
}

/* The "Choose File" button inside dropzone */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_upload_btn {
    background: #1F6B33 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 32px !important;
    border-radius: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 2px 8px rgba(31, 107, 51, 0.20) !important;
}

.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_upload_btn:hover {
    background: #15532A !important;
    transform: translateY(-1px);
}

/* Override the default text "Choose File" with Arabic */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_upload_btn {
    font-size: 0 !important;
}

.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff_upload_btn::before {
    content: 'اختيار صورة';
    font-size: 15px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Hide the actual file input (it's already screen-reader only, but force it) */
.ff_form_instance_5_1 [data-name="form_step-5_2"] input[type="file"].ff-screen-reader-element {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Add hint text below the dropzone */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-el-group:has(input[type="file"]) .ff-el-input--content::after {
    content: '📎 الصيغ المقبولة: JPG أو PNG. الحجم الأقصى: 5 ميجابايت';
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: #6B7280;
    text-align: center;
    font-family: 'Cairo', sans-serif;
}

/* Uploaded files list — clean styling */
.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-uploaded-list {
    margin-top: 16px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
}

.ff_form_instance_5_1 [data-name="form_step-5_2"] .ff-uploaded-list:not(:empty) {
    background: #E8F3EC;
    padding: 12px 16px;
    border-radius: 12px;
    color: #1F6B33;
    font-weight: 600;
}

/* =====================================================
   SUCCESS MESSAGE / CONFIRMATION SCREEN
   ===================================================== */

#fluentform_5_success.ff-message-success {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#fluentform_5_success p {
    margin: 0 !important;
}

.blaghni-success-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 48px 32px;
    text-align: center;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}

/* Success icon circle */
.blaghni-success-icon {
    width: 96px;
    height: 96px;
    background: #1F6B33;
    border-radius: 50%;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(31, 107, 51, 0.25);
    position: relative;
}

.blaghni-success-icon::before {
    content: '';
    position: absolute;
    inset: -16px;
    background: rgba(31, 107, 51, 0.08);
    border-radius: 50%;
    z-index: -1;
}

/* Title */
.blaghni-success-title {
    font-size: 36px;
    font-weight: 900;
    color: #1F6B33;
    margin: 0 0 12px 0;
    line-height: 1.3;
    font-family: 'Cairo', sans-serif;
}

.blaghni-success-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #6B7280;
    margin: 0 0 40px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}

/* Reference card */
.blaghni-ref-card {
    background: #FFFFFF;
    border: 2px solid #E5E7E5;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    text-align: right;
}

.blaghni-ref-header {
    background: #F5F8F3;
    padding: 14px 24px;
    border-bottom: 1px solid #E5E7E5;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1F6B33;
}

.blaghni-ref-divider {
    color: #C0DD97;
}

.blaghni-ref-fr {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.blaghni-ref-body {
    padding: 32px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.blaghni-ref-code {
    font-size: 36px;
    font-weight: 900;
    color: #1F6B33;
    letter-spacing: 3px;
    font-family: 'Inter', sans-serif;
    direction: ltr;
}

.blaghni-copy-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F5F8F3;
    color: #1F6B33;
    border: 2px solid #E5E7E5;
    padding: 12px 24px;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blaghni-copy-btn:hover {
    background: #1F6B33;
    color: #FFFFFF;
    border-color: #1F6B33;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 107, 51, 0.15);
}

/* Info text */
.blaghni-success-info {
    color: #6B7280;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 40px 0;
    padding: 0 16px;
}

.blaghni-success-info strong {
    color: #1F6B33;
    font-weight: 700;
}

/* Action buttons */
.blaghni-success-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.blaghni-btn-primary,
.blaghni-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 220px;
    justify-content: center;
}

.blaghni-btn-primary {
    background: #1F6B33;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(31, 107, 51, 0.20);
}

.blaghni-btn-primary:hover {
    background: #15532A;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 107, 51, 0.30);
    color: #FFFFFF;
}

.blaghni-btn-secondary {
    background: #F5F8F3;
    color: #1F6B33;
    border: 2px solid #E5E7E5;
}

.blaghni-btn-secondary:hover {
    background: #E8F3EC;
    border-color: #1F6B33;
    transform: translateY(-2px);
    color: #1F6B33;
}

/* Mobile */
@media (max-width: 768px) {
    .blaghni-success-wrapper {
        padding: 32px 16px;
    }
    
    .blaghni-success-title {
        font-size: 26px;
    }
    
    .blaghni-success-subtitle {
        font-size: 15px;
    }
    
    .blaghni-ref-code {
        font-size: 26px;
        letter-spacing: 2px;
    }
    
    .blaghni-ref-body {
        flex-direction: column;
        gap: 16px;
    }
    
    .blaghni-success-actions {
        flex-direction: column;
    }
    
    .blaghni-btn-primary,
    .blaghni-btn-secondary {
        width: 100%;
        min-width: 0;
    }
}

/* =====================================================
   STEP NAVIGATION BUTTONS (Next / Previous / Submit)
   ===================================================== */

/* Container holding the buttons */
.ff_form_instance_5_1 .step-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E5E7E5 !important;
}

/* If there's only ONE button (first step has only Next), push it to the right */
.ff_form_instance_5_1 .step-nav:not(:has(.ff-btn-prev)) {
    justify-content: flex-start !important;
}

/* All step nav buttons — base style */
.ff_form_instance_5_1 .step-nav .ff-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    border-radius: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 2px solid transparent !important;
    line-height: 1 !important;
    float: none !important;
    margin: 0 !important;
    min-width: 140px !important;
    justify-content: center !important;
}

/* NEXT button — primary green */
.ff_form_instance_5_1 .step-nav .ff-btn-next {
    background: #1F6B33 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(31, 107, 51, 0.20) !important;
}

.ff_form_instance_5_1 .step-nav .ff-btn-next:hover {
    background: #15532A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(31, 107, 51, 0.28) !important;
}

/* Replace English "Next" with Arabic + arrow icon */
.ff_form_instance_5_1 .step-nav .ff-btn-next {
    font-size: 0 !important;
}

.ff_form_instance_5_1 .step-nav .ff-btn-next::before {
    content: 'التالي';
    font-size: 15px !important;
    font-family: 'Cairo', sans-serif !important;
}

.ff_form_instance_5_1 .step-nav .ff-btn-next::after {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 4px;
}

/* PREVIOUS button — secondary ghost */
.ff_form_instance_5_1 .step-nav .ff-btn-prev {
    background: #F5F8F3 !important;
    color: #1F6B33 !important;
    border: 2px solid #E5E7E5 !important;
    box-shadow: none !important;
}

.ff_form_instance_5_1 .step-nav .ff-btn-prev:hover {
    background: #E8F3EC !important;
    border-color: #1F6B33 !important;
    transform: translateY(-1px) !important;
}

.ff_form_instance_5_1 .step-nav .ff-btn-prev {
    font-size: 0 !important;
}

.ff_form_instance_5_1 .step-nav .ff-btn-prev::before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231F6B33' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 4px;
}

.ff_form_instance_5_1 .step-nav .ff-btn-prev::after {
    content: 'السابق';
    font-size: 15px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* SUBMIT button — primary green, larger, with checkmark icon */
.ff_form_instance_5_1 .ff-btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #1F6B33 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 16px rgba(31, 107, 51, 0.25) !important;
    line-height: 1 !important;
    min-width: 180px !important;
    justify-content: center !important;
}

.ff_form_instance_5_1 .ff-btn-submit:hover {
    background: #15532A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(31, 107, 51, 0.35) !important;
}

/* Add paper plane icon to submit button */
.ff_form_instance_5_1 .ff-btn-submit::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transform: scaleX(-1);
}

/* Mobile — stack buttons vertically, swap order so Next is on top */
@media (max-width: 600px) {
    .ff_form_instance_5_1 .step-nav {
        flex-direction: column-reverse !important;
        gap: 12px !important;
    }
    
    .ff_form_instance_5_1 .step-nav .ff-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =====================================================
   STEP 4 — Submit row layout (2-column structure)
   ===================================================== */

/* The 2-column container wrapping Previous + Submit */
.ff_form_instance_5_1 .ff-step-t-container.ff-inner_submit_container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E5E7E5 !important;
    flex-wrap: nowrap !important;
}

/* The two cells inside */
.ff_form_instance_5_1 .ff-step-t-container.ff-inner_submit_container .ff-t-cell {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Column 1 (Previous button) — push to the right side in RTL */
.ff_form_instance_5_1 .ff-step-t-container.ff-inner_submit_container .ff-t-column-1 {
    order: 1;
}

/* Column 2 (Submit button) — push to the left side in RTL */
.ff_form_instance_5_1 .ff-step-t-container.ff-inner_submit_container .ff-t-column-2 {
    order: 2;
}

/* Reset the inner step-nav since it's now just a wrapper for one button */
.ff_form_instance_5_1 .ff-step-t-container .step-nav {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Reset the submit button wrapper */
.ff_form_instance_5_1 .ff_submit_btn_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    text-align: initial !important;
}

/* Override the inline float: left on Previous button */
.ff_form_instance_5_1 .ff-step-t-container .ff-btn-prev {
    float: none !important;
}

/* Mobile — stack with Submit on top */
@media (max-width: 600px) {
    .ff_form_instance_5_1 .ff-step-t-container.ff-inner_submit_container {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .ff_form_instance_5_1 .ff-step-t-container.ff-inner_submit_container .ff-t-cell {
        width: 100% !important;
    }
    
    .ff_form_instance_5_1 .ff-step-t-container .ff-btn-prev,
    .ff_form_instance_5_1 .ff-step-t-container .ff-btn-submit {
        width: 100% !important;
    }
}

/* =====================================================
   HEADER BUTTON GROUP — Narrow Android fix (≤380px)
   Targets: AR/FR + بلغ الآن buttons in header
   ===================================================== */

@media (max-width: 380px) {
    
    /* Container holding both buttons — keep them inline, prevent wrapping */
    .elementor-element-967079c {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    
    /* Both buttons — smaller, no text wrap */
    .elementor-element-967079c .elementor-button {
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-width: 0 !important;
    }
    
    /* Inner text wrapper */
    .elementor-element-967079c .elementor-button-text {
        white-space: nowrap !important;
        font-size: 12px !important;
    }
}

/* =====================================================
   HEADER LOGO — Narrow Android fix (≤380px)
   Targets: megaphone icon + بلغني wordmark
   ===================================================== */

@media (max-width: 380px) {
    
    /* Logo container — tighten gap between icon and text */
    .elementor-element-61d6b03 {
        gap: 6px !important;
    }
    
    /* Megaphone icon — smaller */
    .elementor-element-f16fa77 .elementor-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* "بلغني" wordmark — smaller text */
    .elementor-element-1e82c99 .elementor-heading-title {
        font-size: 18px !important;
    }
}

/* =====================================================
   HERO BANNER — Narrow Android fix (≤380px)
   Targets: H2 title, H3 subtitle, body text, action buttons
   ===================================================== */

@media (max-width: 380px) {
    
    /* Main title — "ساهم في تحسين مدينتك اليوم" */
    .elementor-element-9f9c149 .elementor-heading-title {
        font-size: 34px !important;
        line-height: 1.25 !important;
    }
    
    /* Subtitle — "منصة مزغنة للمواطنة" */
    .elementor-element-e5fa89e .elementor-heading-title {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    
    /* Mobile-only intro paragraph */
    .elementor-element-b9cc045 p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Both action buttons container */
    .elementor-element-2e15c56 {
        gap: 8px !important;
    }
    
    /* "بلغ عن مشكلة" button */
    .elementor-element-66cc0ce .elementor-button {
        padding: 12px 18px !important;
        font-size: 15px !important;
    }
    
    /* "كيف تعمل المنصة ؟" button */
    .elementor-element-4219392 .elementor-button {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
    
    /* Both button text wrappers — prevent breaking */
    .elementor-element-2e15c56 .elementor-button-text {
        white-space: nowrap !important;
        font-size: 14px !important;
    }
    
    /* Plus icon next to "بلغ عن مشكلة" */
    .elementor-element-66cc0ce .elementor-button-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =====================================================
   "كيف تعمل المنصة" SECTION — Narrow Android fix (≤380px)
   Title inline + reduce step descriptions
   ===================================================== */

@media (max-width: 380px) {
    
    /* Section title — keep inline, no wrap */
    .elementor-element-6be10fd .elementor-heading-title {
        white-space: nowrap !important;
        font-size: 26px !important;
    }
    
    /* Step descriptions inside the 3 cards (صور / أرسل / تتبع) */
    .elementor-element-b175d44 p,
    .elementor-element-baf0ad3 p,
    .elementor-element-5b1eb4d p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
}

/* =====================================================
   "أنواع البلاغات" CATEGORY SECTION — Narrow Android (≤380px)
   Title inline + right-aligned, subtitle line-height, 2-column grid
   ===================================================== */
   
   @media (max-width: 380px) {
    
    /* Push the grid to use full container width */
    .elementor-element-f3cd816 {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Tighten the gap between cards so they're wider */
    .elementor-element-f3cd816 {
        gap: 8px !important;
    }
    
    /* Reduce card internal padding so content isn't cramped */
    .elementor-element-f3cd816 > a.elementor-element {
        padding: 16px 8px !important;
    }
    
    /* Reduce side padding on the parent wrapper if it's restricting width */
    .elementor-element-d092363,
    .elementor-element-47539f6 > .e-con-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 380px) {
    
    /* Section title "أنواع البلاغات" — inline + right-aligned */
    .elementor-element-2558363 .elementor-heading-title {
        white-space: nowrap !important;
        font-size: 32px !important;
    }
    
    .elementor-element-2558363 {
        text-align: right !important;
    }
    
    /* Subtitle "اختر فئة لمشاهدة البلاغات الحالية." — better line-height */
    .elementor-element-cea5790 p {
        line-height: 1.2 !important;
        font-size: 14px !important;
    }
    
    /* Categories grid — force 2 columns per row */
    .elementor-element-f3cd816 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Each category card — clean dimensions for narrow screens */
    .elementor-element-f3cd816 > a.elementor-element {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 380px) {
    
    /* Push the grid to use full container width */
    .elementor-element-f3cd816 {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Tighten the gap between cards so they're wider */
    .elementor-element-f3cd816 {
        gap: 14px !important;
    }
    
    /* Reduce card internal padding so content isn't cramped */
    .elementor-element-f3cd816 > a.elementor-element {
        padding: 16px 8px !important;
    }
    
    /* Reduce side padding on the parent wrapper if it's restricting width */
    .elementor-element-d092363,
    .elementor-element-47539f6 > .e-con-inner {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/* =====================================================
   REPORT PAGE TOOLTIP — Narrow Android (≤380px)
   ===================================================== */

@media (max-width: 380px) {
    .blaghni-tooltip,
    .blaghni-tooltip p {
        font-size: 9px !important;
        line-height: 1.5 !important;
    }
}

/* Smaller phones (Oppo, Samsung Galaxy A series, etc.) */
@media (max-width: 380px) {

    /* Hero title */
    .contact-hero h1 {
        font-size: 30px !important;
        line-height: 1.2em !important;
    }

    /* Hero subtitle */
    .contact-hero p {
        font-size: 16px !important;
        line-height: 1.5em !important;
    }

    /* Form card padding */
    .form-card {
        padding: 40px 20px !important;
    }

    /* APC info card padding */
    .apc-card {
        padding: 20px !important;
    }
    
    /* Form input fields padding */
    .form-card input[type="text"],
    .form-card input[type="email"],
    .form-card textarea {
        padding: 10px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {

    /* Mission Card */
    .mission-card {
        padding: 24px !important;
    }
    .mission-card h2 {
        font-size: 26px !important;
        line-height: 1.2em !important;
    }
    .mission-card .elementor-widget-text-editor {
        font-size: 16px !important;
        line-height: 1.6em !important;
    }

    /* Vision Card */
    .vision-card {
        padding: 24px !important;
    }
    .vision-card h2 {
        font-size: 26px !important;
        line-height: 1.2em !important;
    }
    .vision-card .elementor-widget-text-editor {
        font-size: 15px !important;
        line-height: 1.6em !important;
    }

    /* How It Works section heading */
    .how-it-works h2 {
        font-size: 26px !important;
        line-height: 1.2em !important;
    }

    /* Partnership Card */
    .partnership-card {
        padding: 24px !important;
    }
    .partnership-card h2 {
        font-size: 26px !important;
        line-height: 1.2em !important;
    }
    .partnership-card .elementor-widget-text-editor {
        font-size: 16px !important;
        line-height: 1.6em !important;
    }
}

@media (max-width: 380px) {

    /* All your existing rules above... */

    /* Step cards */
      /* Step icon boxes */
    .step-card .step-icon-box {
        width: 60px !important;
        height: 60px !important;
    }
    
    .step-card .step-icon-box .material-symbols-outlined {
        font-size: 28px !important;
    }
    .step-card h3 {
        font-size: 20px !important;
        line-height: 1.3em !important;
    }
    .step-card .elementor-widget-text-editor {
        font-size: 15px !important;
        line-height: 1.6em !important;
    }

    /* Steps grid spacing */
    .steps-grid {
        gap: 24px !important;
    }
    
}

@media (max-width: 380px) {

    /* All your existing rules above... */

    /* Trust badges */
    .trust-badges {
        gap: 8px !important;
    }
    .trust-badge {
        padding: 8px 14px !important;
        font-size: 13px !important;
        gap: 8px !important;
    }
    .trust-badge .material-symbols-outlined {
        font-size: 16px !important;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://mezghenna-blaghni.com/wp-content/uploads/2026/04/subset-Cairo-Black.woff2') format('woff2');
}
/* End Custom Fonts CSS */