/* =====================================================================
   CineDesign design tokens + shared UI patterns (2026)
   One source for colors, radii, type and the reusable components that the
   public pages and the rental panel build on. Documented live at /styleguide/.
   ===================================================================== */
:root {
  --cd-bg: #0a0a0a;
  --cd-card: #141414;
  --cd-raised: #1e1e1e;
  --cd-line: #262626;
  --cd-line-2: #333333;
  --cd-orange-deep: #b83a00;
  --cd-orange: #f76c04;
  --cd-orange-hi: #ff8a3d;
  --cd-orange-tint: #ffd3b5;
  --cd-wash: #e8440f;
  --cd-alu: #c9cccf;
  --cd-text: #ffffff;
  --cd-text-2: #cfcfcf;
  --cd-muted: #8a8a8a;
  --cd-hint: #5a5a5a;
  --cd-ok: #3ddc84;
  --cd-err: #ff5c5c;
  --cd-r-chip: 6px;
  --cd-r-input: 10px;
  --cd-r-card: 14px;
  --cd-glow: 0 0 40px rgba(247, 108, 4, .35);
  --cd-ease: 180ms cubic-bezier(.2, .7, .2, 1);
  --cd-font-title: 'Poppins', 'CineTitleAcc', 'CineTitle', sans-serif;
  --cd-font-body: 'PPNikkeiMaru', 'Poppins', system-ui, sans-serif;
}

/* ---- type ---------------------------------------------------------- */
.cd-title { font-family: var(--cd-font-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; color: var(--cd-text); margin: 0; }
.cd-title .ac { color: var(--cd-orange); }
.cd-title .it { font-style: italic; font-weight: 500; }
.cd-kicker { font: 600 11px/1 var(--cd-font-title); letter-spacing: .14em; text-transform: uppercase; color: var(--cd-orange); margin: 0 0 12px; }
.cd-lead { font-family: var(--cd-font-body); font-size: 17px; line-height: 1.5; color: var(--cd-text-2); margin: 0; }
.cd-muted { color: var(--cd-muted); }

/* ---- buttons -------------------------------------------------------- */
.cd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px;
          font: 600 14px/1 var(--cd-font-title); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid transparent;
          transition: background var(--cd-ease), border-color var(--cd-ease), box-shadow var(--cd-ease), transform var(--cd-ease), color var(--cd-ease); white-space: nowrap; user-select: none; }
.cd-btn.primary { background: var(--cd-orange); color: #000; border-color: var(--cd-orange); }
.cd-btn.primary:hover { background: var(--cd-orange-hi); border-color: var(--cd-orange-hi); box-shadow: var(--cd-glow); transform: translateY(-1px); }
.cd-btn.ghost { background: transparent; color: var(--cd-text); border-color: rgba(255, 255, 255, .35); }
.cd-btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.cd-btn.ghost.on-photo { background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.cd-btn.text { background: transparent; color: var(--cd-text); padding: 0 4px; height: auto; border: 0; }
.cd-btn.text:hover { color: var(--cd-orange); }
.cd-btn.text .arr { transition: transform var(--cd-ease); }
.cd-btn.text:hover .arr { transform: translateX(4px); }
.cd-btn.sm { height: 36px; padding: 0 14px; font-size: 12px; }
.cd-btn.lg { height: 56px; padding: 0 30px; font-size: 16px; }
.cd-btn[disabled], .cd-btn.disabled { opacity: .4; pointer-events: none; }
.cd-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08);
               color: var(--cd-text); border: 0; cursor: pointer; font: 700 15px/1 var(--cd-font-title); transition: background var(--cd-ease); }
.cd-icon-btn:hover { background: rgba(255, 255, 255, .18); }

/* ---- chips + segmented toggle --------------------------------------- */
.cd-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--cd-r-chip); background: var(--cd-raised);
           color: var(--cd-text-2); font: 600 11px/1 var(--cd-font-title); letter-spacing: .04em; border: 1px solid var(--cd-line); }
.cd-chip.orange { color: #000; background: var(--cd-orange); border-color: var(--cd-orange); }
.cd-chip.outline { background: transparent; color: var(--cd-orange); border-color: var(--cd-orange); }
.cd-chip.alu { color: #000; background: var(--cd-alu); border-color: var(--cd-alu); }
.cd-chip.ok { color: var(--cd-ok); border-color: rgba(61, 220, 132, .3); }
.cd-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--cd-raised); border: 1px solid var(--cd-line); }
.cd-seg button { height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--cd-muted);
                 font: 600 12px/1 var(--cd-font-title); letter-spacing: .04em; cursor: pointer; transition: background var(--cd-ease), color var(--cd-ease); }
.cd-seg button:hover { color: var(--cd-text); }
.cd-seg button.active { background: var(--cd-orange); color: #000; }
.cd-seg.alu button.active { background: #fff; color: #000; }

/* ---- inputs --------------------------------------------------------- */
.cd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-field label { font: 600 11px/1 var(--cd-font-title); letter-spacing: .06em; text-transform: uppercase; color: var(--cd-muted); }
.cd-field label small { text-transform: none; letter-spacing: 0; color: var(--cd-hint); font-weight: 500; margin-left: 6px; }
.cd-input { height: 46px; padding: 0 14px; border-radius: var(--cd-r-input); background: rgba(255, 255, 255, .05); border: 1px solid var(--cd-line-2);
            color: var(--cd-text); font: 500 14px/1 var(--cd-font-body); outline: 0; width: 100%; box-sizing: border-box; transition: border-color var(--cd-ease), background var(--cd-ease); }
.cd-input::placeholder { color: var(--cd-hint); }
.cd-input:hover { background: rgba(255, 255, 255, .07); }
.cd-input:focus { border-color: var(--cd-orange); box-shadow: 0 0 0 3px rgba(247, 108, 4, .18); }
textarea.cd-input { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.cd-input.invalid { border-color: var(--cd-err); }
.cd-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.cd-row.c3 { grid-template-columns: 2fr 1fr 1fr; }

/* ---- stepper -------------------------------------------------------- */
.cd-stepper { display: inline-flex; align-items: center; height: 36px; border-radius: 999px; background: var(--cd-raised); border: 1px solid var(--cd-line); overflow: hidden; }
.cd-stepper button { width: 34px; height: 100%; border: 0; background: transparent; color: var(--cd-text); font: 600 16px/1 var(--cd-font-title); cursor: pointer; transition: background var(--cd-ease); }
.cd-stepper button:hover { background: rgba(255, 255, 255, .1); }
.cd-stepper output { min-width: 28px; text-align: center; font: 600 13px/1 var(--cd-font-title); color: var(--cd-text); }

/* ---- cards ---------------------------------------------------------- */
.cd-card { background: var(--cd-card); border: 1px solid var(--cd-line); border-radius: var(--cd-r-card); padding: 18px; color: var(--cd-text-2);
           transition: border-color var(--cd-ease), transform var(--cd-ease), box-shadow var(--cd-ease); }
.cd-card.hover:hover { border-color: var(--cd-orange); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.cd-card h4 { font: 600 15px/1.2 var(--cd-font-title); color: var(--cd-text); margin: 0 0 6px; }
.cd-card.glass { background: rgba(20, 20, 20, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .12); }

/* ---- brand gradient block (REGRIT-style) ----------------------------- */
.cd-grad { position: relative; border-radius: var(--cd-r-card); overflow: hidden; background: #000; color: #fff; isolation: isolate; }
.cd-grad::before { content: ""; position: absolute; inset: -20%; z-index: -1;
                   background: radial-gradient(60% 80% at 80% 20%, rgba(247, 108, 4, .85), rgba(184, 58, 0, .45) 40%, rgba(0, 0, 0, 0) 70%),
                               linear-gradient(135deg, #000 20%, #2a1206 60%, #000 100%); }
.cd-grad::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; mix-blend-mode: overlay;
                  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px 7px); }

/* ---- orange wash on a photo (the car) -------------------------------- */
.cd-wash { position: relative; overflow: hidden; background: var(--cd-wash); border-radius: var(--cd-r-card); }
.cd-wash img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(.92); mix-blend-mode: multiply; }
.cd-wash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 40%, transparent 50%, rgba(60, 10, 0, .45) 100%); pointer-events: none; }
.cd-wash .cd-wash-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }

/* ---- splash: sliced stripes on a photo ------------------------------- */
.cd-splash { position: relative; overflow: hidden; --band-top: 20%; --band-h: 24%; --shift: 6%; }
.cd-splash img, .cd-splash .cd-splash-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.cd-splash::before, .cd-splash::after { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; pointer-events: none;
   -webkit-mask-image: linear-gradient(to bottom, transparent var(--band-top), #000 var(--band-top), #000 calc(var(--band-top) + var(--band-h)), transparent calc(var(--band-top) + var(--band-h))),
                       repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 12px);
   -webkit-mask-composite: source-in; mask-composite: intersect;
   mask-image: linear-gradient(to bottom, transparent var(--band-top), #000 var(--band-top), #000 calc(var(--band-top) + var(--band-h)), transparent calc(var(--band-top) + var(--band-h))),
               repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 12px); }
.cd-splash::before { transform: translateX(var(--shift)); }
.cd-splash::after { transform: translateX(calc(var(--shift) * -0.6)); -webkit-mask-position: 0 6px; mask-position: 0 6px; opacity: .9; }
.cd-splash.animate::before { animation: cdSplashA 2.6s ease-in-out infinite alternate; }
.cd-splash.animate::after { animation: cdSplashB 3.1s ease-in-out infinite alternate; }
@keyframes cdSplashA { to { transform: translateX(calc(var(--shift) * 1.6)); } }
@keyframes cdSplashB { to { transform: translateX(calc(var(--shift) * -1.3)); } }

/* ---- progress steps (bottom of a form) ------------------------------ */
.cd-steps { display: flex; gap: 10px; }
.cd-steps div { flex: 1; font: 600 11px/1 var(--cd-font-title); letter-spacing: .04em; color: var(--cd-hint); }
.cd-steps div::after { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--cd-line-2); margin-top: 8px; }
.cd-steps div.done { color: var(--cd-text); } .cd-steps div.done::after { background: #fff; }
.cd-steps div.now { color: var(--cd-orange); } .cd-steps div.now::after { background: var(--cd-orange); }

/* ---- the rental panel: split in two, text left / photo right ---------- */
.cd-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
               opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.cd-backdrop.open { opacity: 1; pointer-events: auto; }
.cd-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9001; width: min(1120px, 94vw); display: grid; grid-template-columns: minmax(380px, 46%) 1fr;
             background: var(--cd-card); border-left: 1px solid var(--cd-line); box-shadow: -30px 0 80px rgba(0, 0, 0, .6);
             transform: translateX(104%); transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.cd-drawer.open { transform: none; }
.cd-drawer-l { display: flex; flex-direction: column; min-height: 0; padding: 26px 28px 22px 32px; }
.cd-drawer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cd-drawer-head .cd-title { font-size: 26px; }
.cd-drawer-head .count { color: var(--cd-muted); font: 500 13px/1 var(--cd-font-body); }
.cd-drawer-head .cd-icon-btn { margin-left: auto; }
.cd-drawer-scroll { flex: 1; overflow: auto; min-height: 0; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; scrollbar-color: var(--cd-line-2) transparent; }
.cd-drawer-scroll::-webkit-scrollbar { width: 8px; } .cd-drawer-scroll::-webkit-scrollbar-thumb { background: var(--cd-line-2); border-radius: 8px; }
.cd-item { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 10px; border-radius: var(--cd-r-input);
           border: 1px solid transparent; transition: background var(--cd-ease), border-color var(--cd-ease); cursor: default; }
.cd-item:hover, .cd-item.active { background: rgba(255, 255, 255, .04); border-color: var(--cd-line); }
.cd-item-thumb { width: 56px; height: 56px; border-radius: 8px; background: #0d0d0d center / 80% no-repeat; border: 1px solid var(--cd-line); }
.cd-item-name { font: 600 14px/1.2 var(--cd-font-title); color: var(--cd-text); margin: 0 0 4px; text-transform: capitalize; }
.cd-item-meta { font: 500 12px/1 var(--cd-font-body); color: var(--cd-muted); display: flex; gap: 10px; }
.cd-item-del { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--cd-hint); cursor: pointer; font-size: 14px; opacity: 0; transition: opacity var(--cd-ease), background var(--cd-ease), color var(--cd-ease); }
.cd-item:hover .cd-item-del { opacity: 1; }
.cd-item-del:hover { background: rgba(255, 92, 92, .15); color: var(--cd-err); }
.cd-drawer-section { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--cd-line); display: grid; gap: 12px; }
.cd-drawer-section h5 { font: 600 11px/1 var(--cd-font-title); letter-spacing: .12em; text-transform: uppercase; color: var(--cd-muted); margin: 0 0 2px; }
.cd-drawer-foot { padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--cd-line); display: grid; gap: 16px; }
.cd-drawer-foot .cd-btn { width: 100%; }
.cd-drawer-r { position: relative; overflow: hidden; background: #0d0d0d; }
.cd-drawer-r .cd-splash { position: absolute; inset: 0; }
/* renders are padded + contained: the sliced copies must sit on the same box or the stripes float beside the part */
.cd-drawer-r .cd-splash::before, .cd-drawer-r .cd-splash::after { inset: 8%; background-size: contain; }
.cd-drawer-r img { object-fit: contain; padding: 8%; box-sizing: border-box; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .7)); transition: opacity 260ms ease; }
.cd-drawer-r::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, .09), transparent 70%); }
.cd-drawer-cap { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; align-items: flex-end; gap: 16px; z-index: 2; }
.cd-drawer-cap .cd-title { font-size: 30px; }
.cd-drawer-cap .cd-item-meta { margin-top: 8px; color: var(--cd-text-2); }
.cd-drawer-cap .cd-btn { margin-left: auto; }
@media (max-width: 900px) {
  .cd-drawer { width: 100vw; grid-template-columns: 1fr; grid-template-rows: 38vh 1fr; }
  .cd-drawer-r { order: -1; }
  .cd-drawer-l { padding: 18px 16px; }
  .cd-drawer-cap { left: 16px; right: 16px; bottom: 16px; } .cd-drawer-cap .cd-title { font-size: 22px; }
  .cd-row, .cd-row.c3 { grid-template-columns: 1fr; }
}

/* ---- toast ----------------------------------------------------------- */
.cd-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 9500; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
            border-radius: 999px; background: #1e1e1e; border: 1px solid var(--cd-line-2); color: var(--cd-text); font: 600 13px/1 var(--cd-font-title);
            box-shadow: 0 18px 40px rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--cd-ease), transform var(--cd-ease); }
.cd-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cd-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cd-orange); box-shadow: var(--cd-glow); }