/**
 * منتقي تاريخ تأميني — واجهة موحّدة (سنة / شهر / يوم) بدل منتقي الجهاز
 * أضف للحقل: class="tameeni-datepicker" أو data-tameeni-datepicker
 * للهوم (مضمّن): سنوات تنازلية من الحالية؛ أشهر أرقام؛ شبكة أوضح بدون قصّ للنص
 */

.tameeni-dp-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.tameeni-dp-wrap .tameeni-dp-native-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.tameeni-dp-face {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    margin: 0;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    color: #0f172a;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.tameeni-dp-face:hover {
    border-color: #cbd5e1;
}

.tameeni-dp-face:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.tameeni-dp-face-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
}

.tameeni-dp-face-icon {
    flex-shrink: 0;
    color: #64748b;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tameeni-dp-wrap.is-open .tameeni-dp-face-icon {
    color: #1a56db;
}

.tameeni-dp-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 80;
    padding: 14px 14px 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.tameeni-dp-wrap.is-open {
    z-index: 45;
}

.tameeni-dp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.tameeni-dp-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
    text-align: start;
}

.tameeni-dp-field select:not(.tameeni-dp-select-native) {
    width: 100%;
    min-height: 46px;
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 12px;
    padding-inline-start: 28px;
}

.tameeni-dp-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tameeni-dp-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.tameeni-dp-btn--ghost {
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.tameeni-dp-btn--ghost:hover {
    background: #e2e8f0;
}

.tameeni-dp-btn--primary {
    background: #1a56db;
    color: #fff;
}

.tameeni-dp-btn--primary:hover {
    background: #1e40af;
}

@media (max-width: 767px) {
    /* الوضع العادي: عمود واحد على الشاشات الضيقة والتابلت الصغير */
    .tameeni-dp-wrap:not(.tameeni-dp-wrap--inline) .tameeni-dp-grid {
        grid-template-columns: 1fr;
    }

    /* الوضع المضمّن (الهوم): شبكة الجوال — تفاصيل padding للبوكسات في media لاحق بعد قواعد المضمّن */
    .tameeni-dp-wrap--inline .tameeni-dp-grid.tameeni-dp-grid--inline-hero {
        gap: 12px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta {
        gap: 8px;
    }
}

/* صفحة الهوم وحقول البحث: نفس محاذاة النص مثل باقي الحقول */
.tameeni-dp-face.info-national-input .tameeni-dp-face-text {
    text-align: center;
}

/* وضع مضمّن (الهوم): اللوحة ظاهرة دائماً دون زر ملخص */
.tameeni-dp-wrap--inline {
    width: 100%;
    direction: rtl;
    touch-action: manipulation;
}

.tameeni-dp-wrap--inline .tameeni-dp-field {
    min-width: 0;
}

.tameeni-dp-popover.tameeni-dp-popover--inline {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    margin-top: 0;
    padding: 20px 18px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 28px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.tameeni-dp-wrap--inline .tameeni-dp-grid.tameeni-dp-grid--inline-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.tameeni-dp-inline-hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
}

@media (max-width: 360px) {
    .tameeni-dp-inline-hero-meta {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.tameeni-dp-inline-hero-col {
    min-width: 0;
}

.tameeni-dp-inline-hero-day {
    display: flex;
    justify-content: center;
    width: 100%;
}

.tameeni-dp-inline-hero-day .tameeni-dp-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 118px;
    margin: 0 auto;
}

.tameeni-dp-inline-hero-day .tameeni-dp-field label {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

.tameeni-dp-inline-hero-day .tameeni-dp-combo {
    width: 100%;
    max-width: 108px;
    margin: 0 auto;
}

.tameeni-dp-wrap--inline .tameeni-dp-combo {
    min-width: 0;
}

.tameeni-dp-wrap--inline .tameeni-dp-field label {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    line-height: 1.25;
}

/* أزرار الوجه داخل نماذج الهوم — مظهر أنعم */
.tameeni-dp-wrap--inline button.tameeni-dp-combo-face {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 12px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-variant-numeric: tabular-nums;
    touch-action: manipulation;
}

.tameeni-dp-wrap--inline button.tameeni-dp-combo-face:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-face--split {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 12px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    min-height: 50px;
    padding: 11px 14px;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    touch-action: manipulation;
}

/* مربع اليوم: قائمة أنماط التاريخ مع إبراز الرقم */
.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-face--split {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-width: 108px;
    aspect-ratio: 1;
    min-height: 96px;
    height: auto;
    margin: 0 auto;
    padding: 14px 12px 10px;
    gap: 6px;
    border-radius: 16px;
    background: linear-gradient(165deg, #ffffff 0%, #f4f7fb 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-face--split:focus-within {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 2px 12px rgba(15, 23, 42, 0.05);
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-face--split:focus-within {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14), 0 4px 20px rgba(15, 23, 42, 0.08);
}

/* حقول السنة (صف ثانٍ): محاذاة مفتاح السنة + زر القائمة */
.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-key {
    padding: 5px 6px;
    line-height: 1.3;
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-key::placeholder {
    font-size: 13px;
}

/* مربع اليوم: رقم كبير + فتح قائمة الأيام */
.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-key {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 4px 2px;
    line-height: 1.05;
    font-size: clamp(22px, 8vmin, 32px);
    font-weight: 700;
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-key::placeholder {
    font-size: 15px;
    font-weight: 600;
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger {
    flex: 0 0 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    margin: 0;
    align-self: center;
    border-radius: 8px;
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 8px 0 4px;
    margin: 4px 0 0;
    align-self: stretch;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger:hover {
    background: rgba(241, 245, 249, 0.9);
    color: #334155;
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger:active {
    background: rgba(226, 232, 240, 0.95);
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger:hover {
    background: rgba(241, 245, 249, 0.65);
    color: #334155;
}

.tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger:active {
    background: rgba(226, 232, 240, 0.85);
}

.tameeni-dp-combo-face--split {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    background: #ffffff;
    cursor: default;
    overflow: visible;
}

.tameeni-dp-combo-key {
    flex: 1 1 0%;
    min-width: 3ch;
    border: none;
    background: transparent;
    text-align: center;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    overflow: visible;
    font-variant-numeric: tabular-nums;
    -webkit-text-fill-color: #0f172a;
}

.tameeni-dp-combo-key::placeholder {
    color: #94a3b8;
    opacity: 1;
    font-weight: 500;
    font-size: 12px;
}

.tameeni-dp-combo-trigger {
    flex: 0 0 30px;
    min-width: 30px;
    max-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    margin: 0;
    border: none;
    background: transparent !important;
    cursor: pointer;
    color: #64748b;
    -webkit-appearance: none;
    appearance: none;
}

.tameeni-dp-combo-trigger:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 6px;
}

.tameeni-dp-combo.is-open .tameeni-dp-combo-face--split .tameeni-dp-combo-chevron,
.tameeni-dp-combo.is-open .tameeni-dp-combo-trigger .tameeni-dp-combo-chevron {
    transform: rotate(180deg);
}

/* قوائم سنة/شهر/يوم مخصّصة (نفس فكرة القوائم بالموقع) */
.tameeni-dp-combo {
    position: relative;
    width: 100%;
}

.tameeni-dp-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.tameeni-dp-combo-face {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    box-sizing: border-box;
    padding: 10px 14px 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tameeni-dp-combo-face:hover {
    border-color: #cbd5e1;
}

.tameeni-dp-combo-face:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* المضمّن: يغلب .tameeni-dp-combo-face العام — نفس ارتفاع وpadding بوكس السنة/الشهر/اليوم */
.tameeni-dp-wrap--inline .tameeni-dp-combo > button.tameeni-dp-combo-face {
    min-height: 50px;
    padding: 11px 14px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-width: 1px;
    border-radius: 12px;
}

.tameeni-dp-combo-face-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
    text-align: center;
}

.tameeni-dp-wrap--inline .tameeni-dp-combo-face-text.tameeni-dp-placeholder {
    color: #94a3b8;
    font-weight: 500;
    font-size: 12px;
}

.tameeni-dp-combo-chevron {
    flex-shrink: 0;
    font-size: 11px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.tameeni-dp-combo.is-open .tameeni-dp-combo-chevron {
    transform: rotate(180deg);
}

.tameeni-dp-combo.is-open {
    z-index: 25;
}

.tameeni-dp-combo-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 70;
    max-height: min(280px, 46vh);
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.98);
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.1), 0 2px 10px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.tameeni-dp-combo-list {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.tameeni-dp-combo-option {
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #0f172a;
    transition: background-color 0.12s ease;
}

.tameeni-dp-combo-option:hover {
    background: rgba(241, 245, 249, 0.95);
}

/* المضمّن على الجوال: أحجام 16px ضد زوم Safari + padding متوازن */
@media (max-width: 767px) {
    .tameeni-dp-popover.tameeni-dp-popover--inline {
        padding: 16px 12px 18px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-field label {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-face--split {
        min-height: 52px;
        padding: 12px 12px;
        gap: 9px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-face--split {
        min-height: 96px;
        max-width: 112px;
        padding: 12px 10px 8px;
        gap: 5px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-combo > button.tameeni-dp-combo-face {
        min-height: 52px;
        padding: 12px 13px;
        gap: 9px;
        font-size: 16px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-key {
        font-size: 16px;
        padding: 6px 4px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-key {
        font-size: clamp(20px, 11vmin, 30px);
        padding: 8px 4px 4px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo-key::placeholder {
        font-size: 15px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo-key::placeholder {
        font-size: 16px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-combo-face-text {
        font-size: 16px;
        line-height: 1.3;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-meta .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger {
        flex: 0 0 34px;
        min-width: 34px;
        max-width: 34px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-inline-hero-day .tameeni-dp-combo--keyable .tameeni-dp-combo-trigger {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 0 0 auto;
        padding: 7px 0 3px;
        margin-top: 3px;
    }

    .tameeni-dp-wrap--inline .tameeni-dp-combo-chevron {
        font-size: 11px;
    }
}