/* =====================================================
   FAHRT ANFRAGEN
   MIETWAGEN SERVICE SALEH OSMAN
===================================================== */

/* ================= RESET ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #080808;
    color: #fff;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select {
    font-family: inherit;
}

/* =====================================================
   REQUEST PAGE
===================================================== */

.anfrage {
    position: relative;
    min-height: 100vh;
    padding: 150px 8% 100px;
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.60),
            rgba(0, 0, 0, 0.60)
        ),
        url("c8.jpeg");
    background-size: cover;
    background-position: center 75%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =====================================================
   HEADER
===================================================== */

.anfrage-header {
    position: relative;
    z-index: 2;
}

.anfrage-label {
    display: block;
    color: #999;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

/* ================= TITLE ================= */

.anfrage h1 {
    position: relative;
    z-index: 2;
    font-family: "Playfair Display", serif;
    font-size: clamp(55px, 7vw, 90px);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -3px;
    color: #f5f5f5;
    margin-bottom: 20px;
}

/* ================= INTRO ================= */

.anfrage-intro {
    position: relative;
    z-index: 2;
    max-width: 560px;
    color: #999;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 45px;
}

/* =====================================================
   SELECTED SERVICE - BOX + DROPDOWN
===================================================== */

.service-selector { 
    position: relative; 
    cursor: pointer; 
    z-index: 100; /* مهم جدا */
}

.selected-service {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
    margin-bottom: 35px;
    padding: 14px 20px;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 15px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(12px);
    border-radius: 8px;
}

/* السهم الكبير */
.selected-service > span:last-child {
    margin-left: auto;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.3s;
}
.selected-service.active > span:last-child {
    transform: rotate(180deg);
}

.selected-service-icon {
    font-size: 25px;
}

.selected-service span {
    display: block;
    color: #777;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.selected-service h2 {
    color: #ddd;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 500;
}

/* البوكس تبع الخيارات - يطلع فوق */
.service-dropdown { 
    display: none; 
    position: absolute; 
    bottom: calc(100% + 10px); /* فوق البوكس */
    left: 0; 
    background: rgba(15,15,15,0.98); /* اسود غامق */
    border: 1px solid rgba(192,160,98,0.5); /* اطار ذهبي */
    border-radius: 12px; 
    width: 100%; 
    min-width: 300px;
    z-index: 9999; /* اعلى شي */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
    backdrop-filter: blur(20px);
    overflow: hidden;
}
.service-dropdown.active { 
    display: block; 
}
.service-option { 
    padding: 14px 18px; 
    cursor: pointer; 
    display: flex; 
    gap: 12px; 
    align-items: center; 
    font-weight: 500; 
    color: #ddd;
    font-size: 14px;
    transition: .2s;
}
.service-option:hover { 
    background: rgba(192,160,98,0.15);
    color: #fff;
    padding-left: 24px;
}

/* =====================================================
   FORM
===================================================== */

.anfrage-form {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 22px;
    padding: 40px;
    background: rgba(10,10,10,.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* =====================================================
   FORM GROUP
===================================================== */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ================= LABEL ================= */

.form-group label {
    color: #aaa;
    font-size: 8px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* ================= INPUT ================= */

.form-group input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    color: #eee;
    background: rgba(255,255,255,.035);
    border: 1px solid #333;
    outline: none;
    font-size: 12px;
    transition: .3s;
}

.form-group input:focus {
    border-color: #C0A062;
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(192,160,98,.3);
}

/* DATE */
.form-group input[type="date"] {
    color-scheme: dark;
}

/* =====================================================
   TIME SELECT 24H
===================================================== */
.time-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}
.time-wrapper select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    height: 50px;
}
.time-wrapper select:focus { border-color: #C0A062; }
.time-separator { color: #fff; font-size: 20px; font-weight: 600; }

/* تصليح لون القائمة المنسدلة */
.time-wrapper select option {
    background: #1a1a1a;
    color: #fff;
}
.time-wrapper select option:checked {
    background: #C0A062;
    color: #000;
}

/* =====================================================
   KIDS SELECTOR
===================================================== */

.kids-selector {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 20px 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
}

/* TITLE */
.kids-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ddd;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* SVG ICON */
.kids-title svg {
    stroke: #ccc;
    width: 20px;
    height: 20px;
}

/* OPTIONS */
.kids-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* OPTION */
.kids-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 105px;
    padding: 11px 15px;
    color: #999;
    background: rgba(255,255,255,.025);
    border: 1px solid #333;
    cursor: pointer;
    transition: .3s;
    border-radius: 6px;
}

/* HIDE RADIO */
.kids-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* CUSTOM RADIO */
.kids-option span {
    position: relative;
    padding-left: 20px;
    color: #999;
    font-size: 9px;
    letter-spacing: .5px;
    transition: .3s;
}

/* RADIO CIRCLE */
.kids-option span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border: 1px solid #777;
    border-radius: 50%;
    transition: .3s;
}

/* SELECTED */
.kids-option:has(input:checked) {
    border-color: #C0A062;
    background: linear-gradient(135deg, rgba(192,160,98,.15), rgba(192,160,98,.05));
    box-shadow: 0 5px 20px rgba(0,0,0,.25);
}

.kids-option:has(input:checked) span {
    color: #fff;
}

.kids-option:has(input:checked) span::before {
    border-color: #C0A062;
    box-shadow: inset 0 0 0 3px #111;
    background: #C0A062;
}

/* HOVER */
.kids-option:hover {
    border-color: #777;
    background: rgba(255,255,255,.07);
    transform: translateY(-1px);
}

/* =====================================================
   PHONE NUMBER
===================================================== */

.anfrage-form .form-group:has(#telefon) {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
}

/* =====================================================
   CONSENT
===================================================== */

.consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
}

.consent input {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #C0A062;
    cursor: pointer;
}

.consent label {
    color: #777;
    font-size: 9px;
    line-height: 1.6;
    cursor: pointer;
}

/* =====================================================
   REQUIRED
===================================================== */

.required-note {
    grid-column: 1 / -1;
    color: #666;
    font-size: 8px;
    letter-spacing: .5px;
}

/* =====================================================
   WHATSAPP BUTTON
===================================================== */

.anfrage-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 55px;
    border: 0;
    cursor: pointer;
    color: #111;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(120deg, #eeeeee, #C0A062, #d9d9d9, #999, #eeeeee);
    background-size: 220% 220%;
    transition: .4s;
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
    border-radius: 8px;
}

.anfrage-btn:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(192,160,98,.4);
}

/* =====================================================
   RTL - ARABIC
===================================================== */

html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] body {
    direction: rtl;
    text-align: right;
    font-family: "Noto Kufi Arabic", sans-serif;
}

html[lang="ar"] .anfrage {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .anfrage h1 {
    letter-spacing: 0;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-weight: 500;
}

html[lang="ar"] .anfrage-intro {
    text-align: right;
}

html[lang="ar"] .selected-service {
    direction: rtl;
}

html[lang="ar"] .selected-service > div:last-child {
    text-align: right;
}

html[lang="ar"] .selected-service > span:last-child {
    margin-left: 0;
    margin-right: auto;
}

html[lang="ar"] .form-group {
    text-align: right;
}

html[lang="ar"] .form-group input {
    text-align: right;
}

html[lang="ar"] .consent {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .kids-selector {
    direction: rtl;
}

html[lang="ar"] .kids-title {
    direction: rtl;
}

html[lang="ar"] .kids-options {
    direction: rtl;
}

html[lang="ar"] .kids-option span {
    padding-left: 0;
    padding-right: 20px;
}

html[lang="ar"] .kids-option span::before {
    left: auto;
    right: 0;
}

html[lang="ar"] .time-wrapper select {
    background-position: left 12px center;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .anfrage {
        padding: 130px 6% 80px;
        background-attachment: scroll;
    }

    .anfrage h1 {
        font-size: 55px;
        letter-spacing: -2px;
    }

    .anfrage-intro {
        font-size: 12px;
        margin-bottom: 30px;
    }

    .selected-service {
        margin-bottom: 28px;
        padding: 13px 17px;
        width: 100%;
    }

    .selected-service h2 {
        font-size: 18px;
    }

    .service-dropdown {
        min-width: 100%;
    }

    .anfrage-form {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 28px;
        gap: 22px;
    }

    .anfrage-form .form-group:has(#telefon) {
        grid-column: 1;
        width: 100%;
        justify-self: stretch;
    }

    /* KIDS MOBILE */
    .kids-selector {
        grid-column: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 18px;
    }

    .kids-title {
        justify-content: center;
    }

    .kids-options {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    .kids-option {
        min-width: 0;
        justify-content: center;
        padding: 11px 7px;
    }

    .kids-option span {
        padding-left: 18px;
        font-size: 8px;
    }

    .consent,
    .required-note,
    .anfrage-btn {
        grid-column: 1;
    }

}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 500px) {

    .anfrage {
        padding: 120px 5% 60px;
    }

    .anfrage h1 {
        font-size: 45px;
        line-height: 1;
    }

    .anfrage-intro {
        font-size: 11px;
    }

    .selected-service {
        width: 100%;
        padding: 14px;
    }

    .selected-service-icon {
        font-size: 22px;
    }

    .selected-service h2 {
        font-size: 17px;
    }

    .anfrage-form {
        padding: 22px;
        border-radius: 14px;
    }

    .form-group input,
    .time-wrapper select {
        height: 48px;
    }

    .kids-options {
        grid-template-columns: 1fr;
    }

    .kids-option {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 14px;
    }

    .kids-title {
        justify-content: flex-start;
    }

    .anfrage-btn {
        min-height: 52px;
        font-size: 8px;
    }
}