/* jalali-datepicker.css – v1.0.0 */ /* ── Popup container (appended to ) ───────────── */ .jdp-popup { position: absolute; z-index: 9999; } /* ── Calendar shell ─────────────────────────────────── */ .jdp-calendar { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .13); padding: 14px 12px 12px; width: 268px; font-family: Tahoma, 'Segoe UI', Arial, sans-serif; font-size: 13px; direction: rtl; box-sizing: border-box; -webkit-user-select: none; user-select: none; } /* ── Header ─────────────────────────────────────────── */ .jdp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .jdp-title { font-family: var(--e-global-typography-accent-font-family); font-size: 14px; font-weight: 700; color: #111827; text-align: center; flex: 1; } .jdp-year { color: #6b7280; font-weight: 600; } /* ── Navigation buttons ─────────────────────────────── */ .jdp-btn { cursor: pointer !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; font-size: 15px !important; flex-shrink: 0; transition: background-color .15s, color .15s !important; line-height: 1; display: flex !important; justify-content: center; background-color: var(--e-global-color-107e913) !important; color: white !important; border: 1px solid var(--e-global-color-107e913) !important; } .jdp-btn:hover { background: transparent !important; color: var(--e-global-color-107e913) !important; } .jdp-btn:active { background: transparent !important; } .jdp-btn:focus-visible { outline: 1px solid var(--e-global-color-107e913) !important; outline-offset: 1px !important; } /* ── Weekday headers ────────────────────────────────── */ .jdp-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .jdp-table thead th { text-align: center; padding: 4px 0 4px; font-size: 12px; font-weight: 700; color: var(--e-global-color-secondary); letter-spacing: .5px; border: none; border-block-end: 1px solid hsla(0,0%,50%,.502); font-family: var(--e-global-typography-accent-font-family); } /* ── Day cells ──────────────────────────────────────── */ .jdp-table tbody td { text-align: center; padding: 2px; height: 34px; width: 34px; border: none; background-color: transparent !important; font-family: var(--e-global-typography-accent-font-family); } .jdp-day { cursor: pointer; border-radius: 50%; color: #1f2937; font-size: 13px; transition: background-color .12s, color .12s; display: table-cell; /* keeps vertical-align working */ vertical-align: middle; } .jdp-day:hover { background: #eff6ff; color: #2563eb; } /* Today indicator */ .jdp-today { background: #dbeafe !important; color: var(--e-global-color-04d913a) !important; font-weight: 700; } .jdp-today:hover { background: #bfdbfe !important; } /* Selected day */ .jdp-table .jdp-selected { background: #2563eb !important; color: #ffffff !important; font-weight: 700; } .jdp-table .jdp-selected:hover { background: var(--e-global-color-04d913a) !important; } /* Focus ring on keyboard navigation */ .jdp-day:focus-visible { outline: 2px solid #3b82f6 !important; outline-offset: 1px; } .jdp-empty { cursor: default; pointer-events: none; } /* ── Responsive: shrink on very small screens ────────── */ @media (max-width: 300px) { .jdp-calendar { width: 240px; font-size: 12px; } .jdp-table tbody td { height: 30px; } }