/* <date-time-picker> (2026-10-05): the field, and the calendar + times panel it opens (PageJS/DateTimePicker.js). */
.dtp { position: relative; }
.dtp-field {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 14px;
    border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 15px; font-weight: 600; color: #0f172a; transition: border-color .15s, background .15s;
}
.dtp-open .dtp-field, .dtp-field:focus-visible { border-color: #f97316; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.dtp-icon { color: #f97316; flex: none; }
.dtp-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtp-caret { color: #94a3b8; font-size: 12px; transition: transform .15s; }
.dtp-open .dtp-caret { transform: rotate(180deg); }

.dtp-panel {
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: 560px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.28), 0 2px 8px rgba(15,23,42,.08);
    padding: 16px; animation: dtpIn .16s ease-out;
}
.dtp-panel.dtp-up { top: auto; bottom: calc(100% + 8px); }
.dtp-panel.dtp-fixed { z-index: 1045; }   /* placed by the script against the window; under the header (1050) */
@keyframes dtpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dtp-body { display: grid; grid-template-columns: 1fr 150px; gap: 16px; }
.dtp-date-only { width: 340px; }
.dtp-date-only .dtp-body { grid-template-columns: 1fr; }

.dtp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dtp-month { font-size: 15px; font-weight: 800; color: #0f172a; }
.dtp-nav {
    width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff; color: #334155;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px;
}
.dtp-nav:disabled { opacity: .35; cursor: default; }
.dtp-week, .dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dtp-week span { text-align: center; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; padding: 4px 0; }
.dtp-day {
    height: 38px; border: 0; border-radius: 10px; background: transparent; color: #0f172a;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.dtp-blank { visibility: hidden; }
.dtp-off { color: #cbd5e1; cursor: default; text-decoration: line-through; text-decoration-color: #e2e8f0; }
.dtp-today { box-shadow: inset 0 0 0 1.5px #fdba74; }
.dtp-range { background: #fff7ed; color: #c2410c; border-radius: 6px; }
.dtp-start { background: #fed7aa; color: #9a3412; }
.dtp-day.dtp-on { background: #f97316; color: #fff; box-shadow: 0 4px 12px rgba(249,115,22,.35); }

.dtp-times { border-left: 1px solid #f1f5f9; padding-left: 16px; display: flex; flex-direction: column; min-height: 0; }
.dtp-times-title { font-size: 12px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .6px; margin: 8px 0 12px; }
.dtp-times-list { display: flex; flex-direction: column; gap: 6px; max-height: 268px; overflow-y: auto; padding-right: 4px; }
.dtp-time {
    flex: none; height: 36px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a;
    font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.dtp-time.dtp-time-on { background: #f97316; border-color: #f97316; color: #fff; }
.dtp-none { font-size: 12.5px; color: #64748b; line-height: 1.5; padding: 6px 2px; }

/* Phone: a sheet from the bottom, the calendar above and the times in a grid. */
.dtp-backdrop { position: fixed; inset: 0; z-index: 2090; background: rgba(15,23,42,.5); }   /* above the vehicle list's filter sheet (2000) */
.dtp-sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.dtp-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f5f9; font-size: 22px; line-height: 1; color: #334155; }
.dtp-panel.dtp-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 2100; width: auto; max-width: none;
    border-radius: 20px 20px 0 0; max-height: 88vh; overflow-y: auto; padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    animation: dtpUp .2s ease-out;
}
@keyframes dtpUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.dtp-sheet .dtp-body { grid-template-columns: 1fr; }
.dtp-sheet .dtp-times { border-left: 0; padding-left: 0; border-top: 1px solid #f1f5f9; padding-top: 4px; }
.dtp-sheet .dtp-times-list { display: grid; grid-template-columns: repeat(4, 1fr); max-height: 200px; }
body.dtp-noscroll { overflow: hidden; }
body.dtp-noscroll .progress-wrap { display: none; }   /* the site's back-to-top arrow sat on the times */

/* The theme's button:hover (style.css) greys every button's text and removes its border, on a phone too (a tapped
   button keeps :hover). Keep ours as they are... */
.dtp .dtp-field:hover, .dtp .dtp-nav:hover, .dtp .dtp-time:hover { border-style: solid; border-width: 1.5px; }
.dtp .dtp-field:hover, .dtp .dtp-day:hover, .dtp .dtp-time:hover { color: #0f172a; }
.dtp .dtp-nav:hover { color: #334155; }
.dtp .dtp-day.dtp-on:hover, .dtp .dtp-time.dtp-time-on:hover { color: #fff; }
.dtp .dtp-day.dtp-off:hover { color: #cbd5e1; }

/* ...and colour them on hover only where a pointer really hovers: on a phone the tap that opens the sheet left the day
   under the finger coloured as if chosen. */
@media (hover: hover) {
    .dtp .dtp-field:hover { border-color: #fdba74; background: #fff; }
    .dtp .dtp-nav:hover:not(:disabled) { border-color: #f97316; color: #f97316; }
    .dtp .dtp-day:hover:not(:disabled):not(.dtp-on) { background: #fff1e6; color: #c2410c; }
    .dtp .dtp-time:hover:not(.dtp-time-on) { border-color: #f97316; color: #c2410c; }
}