/* © 2025 VEX LLC. All rights reserved. */
/* ===================================================================
   SOS.CSS - SOS Button, Animations, SOS Active Screen
   =================================================================== */

        /* SOS Button */
        .sos-section { padding: 16px; }
        .sos-btn {
            width: 100%; padding: 20px; background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
            border: none; border-radius: 20px; color: white; font-size: 18px; font-weight: 700;
            display: flex; align-items: center; justify-content: center; gap: 12px;
            box-shadow: 0 8px 24px rgba(239,68,68,0.4); cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
            user-select: none; -webkit-user-select: none; position: relative; overflow: hidden;
        }
        .sos-btn:hover { box-shadow: 0 10px 30px rgba(239,68,68,0.5); }
        @keyframes pulse-sos { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
        .sos-btn:active { transform: scale(0.98) !important; }
        .sos-btn.shaking { animation: shake-sos 0.1s infinite; }
        @keyframes shake-sos {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px) rotate(-1deg); }
            75% { transform: translateX(5px) rotate(1deg); }
        }
        @keyframes sos-pulse-icon {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }
        .sos-icon { font-size: 28px; }
        .sos-countdown {
            position: absolute; font-size: 72px; font-weight: 800;
            opacity: 0; transition: opacity 0.2s; text-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .sos-countdown.visible { opacity: 1; }
        .sos-btn-content { transition: opacity 0.2s; }
        .sos-btn-content.hidden { opacity: 0; }

        /* SOS Active */
        .sos-active-screen { position: fixed; inset: 0; z-index: 300;
            background: #F3F4F6;
            display: none; flex-direction: column; padding: 20px; overflow-y: auto; }
        .sos-active-screen.active { display: flex; }
        .sos-pulse-big { width: 140px; height: 140px; border-radius: 70px; background: var(--danger);
            display: flex; align-items: center; justify-content: center; font-size: 56px;
            margin: 40px auto; animation: pulse-big 1.5s infinite; }
        @keyframes pulse-big { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
            70% { box-shadow: 0 0 0 40px rgba(239,68,68,0); } }
        .sos-status-text { font-size: 24px; font-weight: 700; color: #991B1B; text-align: center; margin-bottom: 8px; }
        .sos-protocol-text { font-size: 14px; color: #B91C1C; text-align: center; margin-bottom: 24px; }
        .sos-info-card { background: white; border-radius: 16px; padding: 16px; margin-bottom: 16px; }
        .sos-info-row { display: flex; justify-content: space-between; padding: 10px 0;
            border-bottom: 1px solid var(--border); font-size: 14px; }
        .sos-info-row:last-child { border-bottom: none; }
        .sos-info-label { color: var(--text-light); }
        .sos-info-value { font-weight: 600; }

        /* SOS Progress Bar */
        .sos-progress-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px; margin-bottom: 16px; position: relative; }
        .sos-progress-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; flex: 1; }
        .sos-progress-step .step-circle { width: 36px; height: 36px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #9CA3AF; transition: all 0.3s; }
        .sos-progress-step.done .step-circle { background: #10B981; color: white; }
        .sos-progress-step.waiting .step-circle { background: #FEF3C7; color: #B45309; animation: pulse-waiting 1.5s infinite; }
        @keyframes pulse-waiting { 0%, 100% { box-shadow: 0 0 0 0 rgba(250,204,21,0.7); } 70% { box-shadow: 0 0 0 8px rgba(250,204,21,0); } }
        .sos-progress-step .step-label { font-size: 10px; font-weight: 600; color: #9CA3AF; text-align: center; white-space: nowrap; }
        .sos-progress-step.done .step-label { color: #059669; }
        .sos-progress-step.waiting .step-label { color: #B45309; }
        .sos-progress-line { flex: 1; height: 3px; background: #E5E7EB; margin: 0 -8px; margin-top: -20px; z-index: 0; }
        .sos-progress-line.done { background: #10B981; }

        /* SOS Map */
        .sos-user-map { width: 100%; height: 250px; border-radius: 16px; overflow: hidden; margin-bottom: 16px; border: 2px solid #E5E7EB; }

        /* SOS Destination Card */
        .sos-destination-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-bottom: 16px; }
        .sos-destination-card .dest-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB; }
        .sos-destination-card .dest-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .sos-destination-card .dest-name { font-size: 16px; font-weight: 700; color: #1F2937; }
        .sos-destination-card .dest-sub { font-size: 12px; color: #6B7280; }
        .sos-destination-card .dest-detail { margin-bottom: 10px; }
        .sos-destination-card .dest-detail-label { font-size: 11px; color: #9CA3AF; text-transform: uppercase; margin-bottom: 2px; }
        .sos-destination-card .dest-detail-value { font-size: 14px; color: #374151; line-height: 1.4; }

        /* SOS Action Row */
        .sos-action-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        .sos-action-row button { border: none; border-radius: 12px; padding: 14px 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: white; }

        /* SOS Confirm Form Styles */
        .sos-form-group { margin-bottom: 14px; text-align: left; }
        .sos-form-group label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
        .sos-form-group select, .sos-form-group input[type="text"], .sos-form-group textarea { width: 100%; padding: 12px; border: 1.5px solid #E5E7EB; border-radius: 12px; font-size: 14px; font-family: inherit; background: #F9FAFB; transition: border-color 0.2s; }
        .sos-form-group select:focus, .sos-form-group input[type="text"]:focus, .sos-form-group textarea:focus { outline: none; border-color: #EF4444; background: white; }
        .sos-form-group textarea { resize: none; height: 70px; }
        .sos-gps-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; padding: 6px 12px; border-radius: 20px; background: #F3F4F6; }
        .sos-gps-indicator .gps-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; }
        .sos-gps-indicator.active .gps-dot { background: #10B981; animation: pulse-gps 1.5s infinite; }
        @keyframes pulse-gps { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
        .sos-camera-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #F3F4F6; border: 1.5px dashed #D1D5DB; border-radius: 12px; cursor: pointer; font-size: 13px; color: #6B7280; transition: all 0.2s; width: 100%; }
        .sos-camera-btn:hover { border-color: #EF4444; color: #EF4444; }
        .sos-camera-btn.has-photo { border-color: #10B981; color: #059669; background: #ECFDF5; border-style: solid; }

        /* SOS Map Overlay */
        .sos-map-overlay { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 500; background: rgba(255,255,255,0.95); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-around; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .sos-map-overlay .overlay-item { text-align: center; }
        .sos-map-overlay .overlay-value { font-size: 16px; font-weight: 700; color: #1F2937; }
        .sos-map-overlay .overlay-label { font-size: 10px; color: #6B7280; text-transform: uppercase; }