/**
 * Transport Call Feedback Sheet — bottom-sheet styles (Phase 3 UX redesign).
 *
 * A HALF-HEIGHT sheet (≈ half the screen, never full) with two states in one
 * sheet — Pre-call (driver info + confirm + Call button) and Feedback ("How did
 * the call go?" + five options + Try Another Driver + optional WhatsApp). Only
 * the sheet's content scrolls; the sheet itself stays ~half height so the driver
 * list underneath is always visible.
 *
 * Notes:
 *   1. NO external Google Fonts — .cf-scope uses the plugin's self-contained
 *      system stack (Telugu via the device font), matching the Transport page.
 *   2. Derived from the Claude Design reference (call-flow-sheet.html); its DEMO
 *      page styles are dropped (the plugin renders its own driver list).
 *
 * Everything is scoped under .cf-scope so it never collides with the theme or
 * the other Transport Live styles. Enqueued only when call_sheet_enabled is ON.
 */

.cf-scope,
.cf-scope * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* System font stack (no Google Fonts) — Telugu falls back to the device font,
   consistent with the rest of the Transport page. */
.cf-scope {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Telugu', system-ui, sans-serif;
}

@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cf-drop { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes cf-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- Overlay + sheet ---- */
.cf-overlay { position: fixed; inset: 0; z-index: 9999; display: none; }
.cf-overlay.cf-open { display: block; }
.cf-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 28, .55); animation: cf-fade .25s ease; }

/* HALF-HEIGHT sheet (Phase 3): approximately half the screen, never full. The
   sheet height stays capped; only its CONTENT scrolls when it overflows, so the
   driver list underneath is always visible. */
.cf-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 440px; margin: 0 auto;
    background: #fff; border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 40px rgba(10, 15, 25, .25);
    padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
    animation: cf-rise .34s cubic-bezier(.22, .9, .3, 1);
    min-height: 44vh; max-height: 56vh; overflow-y: auto;
}
.cf-overlay.cf-closing .cf-backdrop { animation: cf-fade .25s ease reverse forwards; }
.cf-overlay.cf-closing .cf-sheet { animation: cf-drop .28s ease forwards; }

.cf-handle { width: 42px; height: 5px; border-radius: 3px; background: #dfe4ea; margin: 2px auto 14px; }

/* ---- Header ---- */
.cf-head { display: flex; align-items: flex-start; gap: 12px; }
.cf-head-info { flex: 1; min-width: 0; }
.cf-name { font-size: 22px; font-weight: 800; color: #1a2330; line-height: 1.15; display: flex; align-items: center; gap: 8px; }
.cf-name .cf-ico { flex: none; }
.cf-role { color: #8a94a2; font-size: 14px; margin-top: 3px; }
.cf-close {
    flex: none; width: 40px; height: 40px; border-radius: 50%; border: none;
    background: #feecec; color: #e5484d; font-size: 18px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .12s, transform .08s;
}
.cf-close:active { background: #fbd5d5; transform: scale(.94); }

/* ---- Language tabs (shared, under the header) ---- */
.cf-tabsrow { display: flex; justify-content: flex-end; margin: 4px 0 14px; }
.cf-tabs { display: flex; background: #eef1f5; border-radius: 10px; padding: 3px; gap: 2px; }
.cf-tab { border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 8px; background: transparent; color: #7a8694; transition: transform .08s; }
.cf-tab:active { transform: scale(.97); }
.cf-tab.cf-active { background: #fff; color: #1a2330; box-shadow: 0 1px 3px rgba(20, 30, 45, .14); }

/* ---- State 1: Pre-call ---- */
.cf-confirm { text-align: center; font-size: 16px; font-weight: 600; color: #2a3a4d; margin: 6px 0 18px; }
.cf-callbtn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    border: none; background: #2f6fb0; color: #fff; font-family: inherit;
    font-size: 18px; font-weight: 700; padding: 16px; border-radius: 14px; cursor: pointer;
    transition: background .12s, transform .08s;
}
.cf-callbtn:active { background: #255c94; transform: scale(.99); }
.cf-callbtn-ico { font-size: 20px; line-height: 1; }

/* ---- Loading (shown after pressing Call, before the dialer) ---- */
.cf-loading { display: flex; align-items: center; gap: 14px; background: #f4f7fb; border: 1px solid #e9eef4; border-radius: 14px; padding: 16px 18px; margin-top: 16px; }
.cf-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #d6e2f0; border-top-color: #2f6fb0; animation: cf-spin .8s linear infinite; flex: none; }
.cf-loading-text { font-size: 16px; font-weight: 600; color: #2a3a4d; animation: cf-pulse 1.6s ease-in-out infinite; }

/* ---- State 2: Feedback ---- */
.cf-fb-title { text-align: center; font-size: 18px; font-weight: 800; color: #1a2330; margin: 4px 0 16px; }

/* ---- One-tap options ---- */
/* Yes / No sit side by side in a 2-column grid; the WhatsApp row lives in its
   own full-width wrapper below (see .cf-wa-wrap). */
.cf-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-opt {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px;
    border: 2px solid #e8ecf1; border-radius: 14px; background: #fff; color: #2a3a4d;
    cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; text-align: left;
    transition: border-color .12s, background .12s, transform .08s;
}
.cf-opt:active { transform: scale(.985); }
.cf-opt.cf-selected { border-color: #2f6fb0; background: #f2f7fc; color: #1a2330; }
.cf-opt-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.cf-opt-label { flex: 1; text-align: left; }
.cf-opt-arrow { flex: none; font-size: 22px; font-weight: 700; line-height: 1; color: #c2cad4; }

/* Yes / No cells: centre the icon + label within each grid cell. */
.cf-opt-choice { justify-content: center; gap: 10px; padding: 14px 10px; }
.cf-opt-choice .cf-opt-label { flex: none; }

/* WhatsApp / report — full-width, at the very bottom (only when configured).
   Dashed green border; two-tone label (report = red, feedback = green). */
.cf-wa-wrap { margin-top: 12px; }
.cf-opt.cf-wa { border: 2px dashed #a9dcbb; background: #eefaf1; }
.cf-opt.cf-wa .cf-opt-arrow { color: #25c65a; }
.cf-wa-report { color: #e5484d; font-weight: 700; }
.cf-wa-feedback { color: #1f7a41; font-weight: 700; }

/* ---- Thank-you ---- */
.cf-thanks { margin-top: 16px; background: #eefaf1; border: 1px solid #cfeeda; border-radius: 14px; padding: 18px; text-align: center; color: #1f7a41; font-weight: 600; font-size: 16px; }