/**
 * SNF Compare - Comparison View Styles
 * Shared between facility and nurses comparison pages
 */

/* ============================================
   SELECTION TRAY
   ============================================ */
.selection-tray { position:fixed; bottom:32px; left:50%; transform:translateX(-50%); z-index:1000; display:none; box-shadow:none; background:transparent; }
@supports (padding-bottom: env(safe-area-inset-bottom)) { .selection-tray { bottom:calc(32px + env(safe-area-inset-bottom, 0px)); } }
.selection-tray.visible { display:flex; flex-direction:column; align-items:center; gap:8px; animation:popIn .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from{transform:translateX(-50%) scale(.8);opacity:0} to{transform:translateX(-50%) scale(1);opacity:1} }

.tray-expanded { display:none; background:#1f2937; border-radius:16px; padding:10px; box-shadow:0 4px 20px rgba(0,0,0,.3); max-width:320px; position:relative; }
.tray-expanded.visible { display:flex; flex-wrap:wrap; gap:6px; animation:fadeIn .15s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.tray-expanded-close { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background:#374151; border:2px solid #1f2937; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; }
.tray-expanded-close:hover { background:#4b5563; transform:scale(1.1); }
.tray-expanded-close svg { width:12px; height:12px; color:white; }

.tray-chip { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border-radius:20px; padding:6px 8px 6px 12px; font-size:12px; font-weight:500; color:white; }
.tray-chip button { width:18px; height:18px; border-radius:50%; border:none; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; }
.tray-chip button:hover { background:rgba(255,255,255,.35); }
.tray-chip button svg { width:10px; height:10px; color:white; }

.tray-content { background:#111827; border-radius:50px; padding:6px 6px 6px 16px; box-shadow:0 4px 20px rgba(0,0,0,.25); display:flex; align-items:center; gap:12px; transition:transform .2s ease, padding .2s ease, gap .2s ease; }
@media (max-width: 640px) { .tray-content { box-shadow:none; } }
.tray-content:hover { transform:scale(1.08); padding:10px 10px 10px 20px; gap:14px; }
.tray-content.family { background:#1d4ed8; }

.tray-count { font-size:14px; font-weight:500; color:white; white-space:nowrap; cursor:pointer; padding:4px 8px; border-radius:20px; display:flex; align-items:center; gap:4px; transition:background .15s; }
.tray-count:hover { background:rgba(255,255,255,.15); }
.tray-count svg { width:14px; height:14px; transition:transform .2s; }
.tray-count.expanded svg { transform:rotate(180deg); }

.tray-clear { background:rgba(255,255,255,.15); border:none; color:rgba(255,255,255,.7); font-size:11px; cursor:pointer; padding:4px 8px; border-radius:20px; white-space:nowrap; transition:all .15s; }
.tray-clear:hover { background:rgba(255,255,255,.25); color:white; }

.compare-btn { padding:10px 20px; border-radius:50px; font-weight:600; font-size:14px; border:none; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.compare-btn.family { background:white; color:#1d4ed8; }
.compare-btn.pro { background:#10b981; color:white; }
.compare-btn:disabled { opacity:.5; cursor:not-allowed; }
.compare-btn:not(:disabled):hover { transform:scale(1.02); }
.compare-btn:not(:disabled):active { transform:scale(.97); }

/* ============================================
   COMPARISON VIEW
   ============================================ */
.comparison-view { display:none; min-height:100vh; }
.comparison-view.visible { display:block; }
.comparison-view.family { background:#f8fafc; }
.comparison-view.pro { background:#f8fafc; }

.comparison-header { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-bottom:1px solid #e5e7eb; }
.comparison-header-top { max-width:1000px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; }

.back-btn { padding:8px; margin-left:-8px; border-radius:8px; background:none; border:none; cursor:pointer; transition:all .15s; color:#9ca3af; }
.back-btn:hover { background:#f3f4f6; color:#374151; }
.back-btn svg { width:20px; height:20px; }

.comparison-header-top h1 { font-weight:700; color:#111827; font-size:18px; letter-spacing:-0.01em; margin:0; }
.comparison-header-top p { font-size:12px; color:#9ca3af; margin:2px 0 0; }

/* ============================================
   FACILITY HEADER CARDS
   ============================================ */
.facility-headers { max-width:1000px; margin:0 auto; padding:0 20px 12px; display:flex; gap:10px; }

.facility-header-card { flex:1; border-radius:12px; padding:14px 14px; display:flex; flex-direction:column; gap:4px; position:relative; transition:all .2s; min-height:95px; }
.facility-header-card.family { background:linear-gradient(145deg,#3b82f6 0%,#2563eb 100%); color:white; box-shadow:0 4px 20px rgba(59,130,246,.3); }
.facility-header-card.pro { background:#f8fafc; color:#111827; border:1px solid #e2e8f0; }
.facility-header-card.winner { background:linear-gradient(145deg,#1e293b 0%,#0f172a 100%); color:white; box-shadow:0 4px 20px rgba(15,23,42,.35); }
.facility-header-card.wage-winner { background:linear-gradient(145deg,#16a34a 0%,#15803d 100%); color:white; box-shadow:0 4px 20px rgba(22,163,74,.3); }
.facility-header-card.secondary, .facility-header-card.middle, .facility-header-card.loser { background:#f8fafc; color:#111827; border:1px solid #e2e8f0; }

.facility-rank-badge { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:5px 10px; border-radius:16px; background:#fbbf24; color:#78350f; }
.facility-rank-badge.wage { background:#ecfdf5; color:#065f46; }
.facility-rank-badge.secondary { background:#e5e7eb; color:#374151; }
.facility-rank-badge svg { width:12px; height:12px; }

.facility-header-card h3 { font-weight:700; font-size:14px; line-height:1.3; margin:0; padding-right:90px; }
.facility-header-card.pro h3, .facility-header-card.secondary h3, .facility-header-card.middle h3, .facility-header-card.loser h3 { color:#111827; }

.facility-header-card .facility-location { font-size:12px; font-weight:500; }
.facility-header-card.winner .facility-location, .facility-header-card.wage-winner .facility-location { opacity:0.85; }
.facility-header-card.pro .facility-location, .facility-header-card.secondary .facility-location, .facility-header-card.middle .facility-location, .facility-header-card.loser .facility-location { color:#6b7280; }

.facility-header-card .facility-info-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; text-decoration:none; font-weight:600; margin-top:auto; padding-top:6px; transition:all .2s; }
.facility-header-card.winner .facility-info-link, .facility-header-card.wage-winner .facility-info-link { color:white; opacity:0.9; }
.facility-header-card.winner .facility-info-link:hover, .facility-header-card.wage-winner .facility-info-link:hover { opacity:1; }
.facility-header-card.pro .facility-info-link, .facility-header-card.secondary .facility-info-link, .facility-header-card.middle .facility-info-link, .facility-header-card.loser .facility-info-link { color:#0d9488; }
.facility-header-card.pro .facility-info-link:hover, .facility-header-card.secondary .facility-info-link:hover, .facility-header-card.middle .facility-info-link:hover, .facility-header-card.loser .facility-info-link:hover { color:#0f766e; text-decoration:underline; }

/* ============================================
   COMPARISON CONTENT
   ============================================ */
.comparison-content { max-width:1000px; margin:0 auto; padding:20px; display:flex; flex-direction:column; gap:16px; padding-bottom:40px; }

.comparison-section { background:white; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.05); border:1px solid #e5e7eb; overflow:hidden; }
.comparison-section-header { background:#f8fafc; padding:10px 16px; border-bottom:1px solid #f1f5f9; }
.comparison-section-header h2 { font-weight:600; color:#374151; font-size:13px; text-transform:uppercase; letter-spacing:0.03em; }

.comparison-row { padding:12px 16px; border-bottom:1px solid #f8fafc; }
.comparison-row:last-child { border-bottom:none; }
.comparison-row .label { font-size:12px; color:#6b7280; margin-bottom:8px; font-weight:500; }
.comparison-row .label .benchmark { font-weight:400; color:#9ca3af; font-size:11px; }

.metric-info { display:inline-flex; align-items:center; margin-left:4px; cursor:pointer; position:relative; vertical-align:middle; }
.metric-info svg { width:14px; height:14px; stroke:#9ca3af; transition:stroke .15s; }
.metric-info:hover svg { stroke:#6b7280; }

.metric-tip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1f2937; color:#f3f4f6; padding:10px 12px; border-radius:8px; font-size:12px; font-weight:400; line-height:1.5; width:220px; text-align:left; opacity:0; visibility:hidden; transition:all .15s; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.25); pointer-events:none; }
.metric-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#1f2937; }
.metric-info:hover .metric-tip, .metric-info.active .metric-tip { opacity:1; visibility:visible; }

.comparison-values { display:flex; gap:10px; }
.comparison-value { flex:1; border-radius:8px; padding:10px; text-align:center; background:#f8fafc; }
.comparison-value.best { background:#ecfdf5; border:1px solid #a7f3d0; }
.comparison-value .value { font-size:15px; font-weight:700; color:#374151; }
.comparison-value.best .value { color:#059669; }
.comparison-value .best-label { font-size:10px; color:#10b981; font-weight:600; margin-top:3px; }
.comparison-value .boolean-yes { color:#059669; font-weight:600; }
.comparison-value .boolean-no { color:#9ca3af; font-weight:500; }
.comparison-value .coming-soon-pill { display:inline-block; background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }

/* ============================================
   BENEFITS GATING
   ============================================ */
.benefits-gated-section { background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fcd34d; }
.benefits-blur-container { position:relative; overflow:hidden; min-height:200px; }
.benefits-row .label { color:#78350f; font-weight:600; }
.benefits-values-blur { filter:blur(5px); opacity:0.5; pointer-events:none; user-select:none; }

.benefits-gate-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; background:rgba(255,251,235,0.4); }
.benefits-gate-card { background:white; border-radius:16px; padding:24px 28px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.12); max-width:320px; border:1px solid #fcd34d; }
.benefits-gate-icon { width:48px; height:48px; background:linear-gradient(135deg,#fef3c7,#fde68a); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.benefits-gate-icon svg { width:24px; height:24px; color:#92400e; }
.benefits-gate-card h3 { font-size:16px; font-weight:700; color:#1f2937; margin-bottom:6px; }
.benefits-gate-card p { font-size:13px; color:#6b7280; margin-bottom:16px; line-height:1.4; }
.benefits-gate-card input { width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; margin-bottom:10px; outline:none; transition:border-color .2s; }
.benefits-gate-card input:focus { border-color:#f59e0b; }
.benefits-gate-card button { width:100%; padding:12px; background:linear-gradient(135deg,#f59e0b,#d97706); color:white; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; }
.benefits-gate-card button:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(245,158,11,0.35); }

/* ============================================
   FULL BREAKDOWN BUTTON
   ============================================ */
.full-breakdown-row { display:flex; justify-content:center; margin-top:24px; margin-bottom:100px; }
.full-breakdown-btn { padding:16px 36px; border-radius:50px; background:linear-gradient(135deg,#0d9488,#0f766e); color:white; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:all .25s; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 4px 14px rgba(13,148,136,.3); }
.full-breakdown-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(13,148,136,.4); background:linear-gradient(135deg,#14b8a6,#0d9488); }
.full-breakdown-btn svg { width:18px; height:18px; transition:transform .2s; }
.full-breakdown-btn:hover svg { transform:translateY(2px); }
.full-breakdown-btn.expanded { background:linear-gradient(135deg,#6b7280,#4b5563); box-shadow:0 4px 14px rgba(107,114,128,.3); }
.full-breakdown-btn.expanded:hover { background:linear-gradient(135deg,#9ca3af,#6b7280); }

/* ============================================
   SHARE BUTTONS
   ============================================ */
.share-section { display:flex; align-items:center; gap:10px; margin-left:auto; }
.share-label { font-size:11px; font-weight:500; color:#9ca3af; text-transform:uppercase; letter-spacing:0.03em; }
.share-buttons { display:flex; align-items:center; gap:4px; }

.share-icon-btn { width:32px; height:32px; border-radius:6px; border:1px solid #e5e7eb; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; background:white; color:#6b7280; }
.share-icon-btn:hover { border-color:#d1d5db; color:#374151; background:#f9fafb; }
.share-icon-btn.copy { color:#0d9488; }
.share-icon-btn.copy:hover { background:#f0fdfa; border-color:#99f6e4; }
.share-icon-btn.email { color:#3b82f6; }
.share-icon-btn.email:hover { background:#eff6ff; border-color:#bfdbfe; }
.share-icon-btn.sms { color:#22c55e; }
.share-icon-btn.sms:hover { background:#f0fdf4; border-color:#bbf7d0; }
.share-icon-btn svg { width:16px; height:16px; }
.share-icon-btn-label { font-size:10px; font-weight:600; margin-top:2px; }

.share-floating { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, #1f2937 0%, #111827 100%); border-radius:60px; padding:12px 16px 12px 24px; display:none; align-items:center; gap:16px; box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05); z-index:50; }
.share-floating.visible { display:flex; animation:popIn .3s cubic-bezier(.34,1.56,.64,1); }
.share-floating-text { color:white; font-size:14px; font-weight:600; white-space:nowrap; }
.share-floating-text span { color:#9ca3af; font-weight:400; }
.share-floating-btns { display:flex; gap:8px; }

.share-floating-btn { width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.share-floating-btn.copy { background:linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color:white; }
.share-floating-btn.copy:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 6px 20px rgba(13,148,136,.4); }
.share-floating-btn.email { background:linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); color:white; }
.share-floating-btn.email:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 6px 20px rgba(59,130,246,.4); }
.share-floating-btn.sms { background:linear-gradient(135deg, #4ade80 0%, #22c55e 100%); color:white; }
.share-floating-btn.sms:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 6px 20px rgba(34,197,94,.4); }
.share-floating-btn svg { width:20px; height:20px; }

.share-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); background:#111827; color:white; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:500; opacity:0; transition:all .3s ease; z-index:100; display:flex; align-items:center; gap:8px; box-shadow:0 4px 20px rgba(0,0,0,.25); }
.share-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.share-toast svg { width:18px; height:18px; color:#10b981; }

/* ============================================
   BROWSE VIEW
   ============================================ */
.browse-view { display:block; }
.browse-view.hidden { display:none; }
.hidden { display:none !important; }