/* SNM Whale Observation */

#snm-observation-app {
    max-width: 740px;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #1a1a2e;
}

/* German text */
.snm-de {
    color: #7a7a8e;
    font-style: italic;
}

.snm-phase { animation: snmFade 0.3s ease; }
@keyframes snmFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Disclaimer */
.snm-warning-icon, .snm-success-icon, .snm-error-icon { font-size: 48px; text-align: center; margin-bottom: 12px; }

#snm-disclaimer h2 { text-align: center; color: #b33a3a; font-size: 22px; margin-bottom: 16px; }

.snm-disclaimer-text {
    background: #fef3f3; border-left: 4px solid #c0392b;
    padding: 16px 20px; border-radius: 4px; margin-bottom: 20px;
}
.snm-disclaimer-text ul { margin: 10px 0; padding-left: 20px; }
.snm-disclaimer-text li { margin-bottom: 6px; }

/* Progress tracker */
.snm-progress-box { margin-bottom:16px; padding:14px 16px; background:#f0f7fa; border-radius:6px; }
.snm-progress-text { font-size:14px; margin-bottom:8px; text-align:center; }
.snm-progress-bar-bg { background:#dce6ea; border-radius:4px; height:12px; overflow:hidden; }
.snm-progress-bar-fill { background:#2c6e8a; height:100%; border-radius:4px; transition:width 0.3s; min-width:2px; }

.snm-consent-label {
    display: flex; align-items: center; gap: 10px; font-weight: 600;
    margin-bottom: 16px; cursor: pointer; padding: 12px 16px;
    background: #f8f8f8; border-radius: 6px; border: 2px solid #ddd; transition: border-color 0.2s;
}
.snm-consent-label:hover { border-color: #999; }
.snm-consent-label input[type="checkbox"] { width: 20px; height: 20px; accent-color: #2c6e8a; flex-shrink: 0; }

/* Buttons */
.snm-btn {
    display: block; width: 100%; padding: 14px 24px; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.snm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.snm-btn-primary { background: #2c6e8a; color: #fff; }
.snm-btn-primary:hover:not(:disabled) { background: #1f5268; }
.snm-btn-secondary { background: #e8e8e8; color: #333; }
.snm-btn-secondary:hover:not(:disabled) { background: #d0d0d0; }

/* Loading */
#snm-loading { text-align: center; padding: 60px 20px; }
.snm-spinner { width:40px;height:40px;margin:0 auto 16px;border:4px solid #ddd;border-top-color:#2c6e8a;border-radius:50%;animation:snmSpin .8s linear infinite; }
@keyframes snmSpin { to{transform:rotate(360deg)} }

/* Slot Info */
.snm-slot-info { text-align:center; padding:16px; background:#e8f4f8; border-radius:8px 8px 0 0; }
.snm-slot-info h3 { margin:0 0 6px; font-size:16px; color:#2c6e8a; text-transform:uppercase; letter-spacing:1px; }
.snm-slot-info p { margin:4px 0; font-size:16px; }

/* Instructions */
.snm-instructions { background:#f0f7fa; border-left:4px solid #2c6e8a; padding:14px 18px; margin-bottom:0; font-size:14px; line-height:1.5; }
.snm-instructions p { margin:0 0 8px; }
.snm-instructions p:last-child { margin-bottom:0; }

/* Video */
.snm-video-container { overflow:hidden; background:#000; }
.snm-video-container iframe { display:block; }

/* Player Controls */
.snm-player-controls { background:#1a1a2e; padding:16px 20px; border-radius:0 0 8px 8px; margin-bottom:12px; text-align:center; }

.snm-timer-row { display:flex; justify-content:center; gap:32px; margin-bottom:14px; }
.snm-timer-display { font-family:'Courier New',Courier,monospace; }
.snm-timer-label { color:#9aa; font-size:11px; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:2px; }
.snm-timer-value { color:#4aeadc; font-size:28px; font-weight:700; letter-spacing:2px; }
.snm-timer-countdown { color:#f5c842; }
.snm-timer-ended { color:#e74c3c; font-size:14px!important; letter-spacing:0!important; font-family:-apple-system,sans-serif; }

.snm-player-buttons { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

.snm-btn-replay { background:#34495e; color:#fff; font-size:14px; padding:10px 20px; border-radius:40px; display:inline-block; width:auto; }
.snm-btn-replay:hover:not(:disabled) { background:#4a6a80; }

.snm-btn-mark { background:#e67e22; color:#fff; font-size:18px; padding:14px 32px; border-radius:40px; display:inline-block; width:auto; transition:background .2s,transform .1s; }
.snm-btn-mark:hover:not(:disabled) { background:#d35400; transform:scale(1.03); }
.snm-btn-mark:active { transform:scale(0.97); }
.snm-btn-mark-flash { background:#27ae60!important; }

.snm-mark-hint { color:#8899aa; font-size:12px; margin:10px 0 0; }

/* Countdown Bar */
.snm-countdown-bar { text-align:center; padding:10px; background:#fff3cd; border-radius:6px; margin-bottom:20px; font-weight:600; font-size:14px; color:#856404; }

/* Form locked */
.snm-form-locked { opacity:0.45; pointer-events:none; }

/* Fieldsets */
.snm-fieldset { border:1px solid #e0e0e0; border-radius:8px; padding:20px; margin-bottom:20px; }
.snm-fieldset legend { font-size:17px; font-weight:700; color:#2c6e8a; padding:0 8px; }
.snm-field-hint { font-size:13px; color:#777; margin:0 0 14px; }

/* Breath entries */
.snm-breath-entry { margin-bottom:10px; }
.snm-breath-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 12px; background:#f7f9fa; border-radius:6px; border:1px solid #e6e6e6; }
.snm-breath-num { font-weight:700; font-size:13px; color:#2c6e8a; min-width:120px; }
.snm-breath-time { display:flex; align-items:center; gap:2px; }
.snm-sel { padding:6px 4px; border:1px solid #ccc; border-radius:4px; font-size:14px; background:#fff; }
.snm-sel-h { width:64px; } .snm-sel-m, .snm-sel-s { width:58px; }
.snm-time-sep { font-weight:700; font-size:16px; color:#999; }

.snm-fountain-label { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.snm-fountain-label input { accent-color:#2c6e8a; }

.snm-remove-breath { background:none; border:none; font-size:20px; cursor:pointer; color:#c0392b; padding:0 6px; line-height:1; margin-left:auto; }
.snm-remove-breath:hover { color:#e74c3c; }

#snm-add-breath { width:auto; display:inline-block; padding:8px 16px; font-size:14px; margin-top:8px; }

/* Checkboxes */
.snm-checkbox-grid { display:flex; flex-direction:column; gap:8px; }
.snm-check-item { display:flex; align-items:flex-start; gap:10px; padding:8px 12px; background:#f7f9fa; border-radius:6px; border:1px solid #eee; cursor:pointer; transition:background .15s; font-size:14px; line-height:1.4; }
.snm-check-item:hover { background:#eaf2f6; border-color:#c0dae6; }
.snm-check-item input[type="checkbox"] { margin-top:2px; accent-color:#2c6e8a; width:18px; height:18px; flex-shrink:0; }

/* Submit */
.snm-submit-area { margin-top:24px; }
.snm-submit-note { text-align:center; font-size:12px; color:#999; margin-top:10px; }

/* Thank you */
#snm-thankyou { text-align:center; padding:40px 20px; }
#snm-thankyou h2 { color:#2c6e8a; font-size:24px; }
#snm-thankyou p { max-width:480px; margin:12px auto 24px; color:#555; }
#snm-another-btn { width:auto; display:inline-block; padding:12px 32px; }
.snm-btn-exit { display:inline-block!important; width:auto!important; padding:12px 32px; margin-top:10px; background:#95a5a6; color:#fff!important; text-decoration:none; text-align:center; }
.snm-btn-exit:hover { background:#7f8c8d; }

/* Error */
#snm-error { text-align:center; padding:40px 20px; }
#snm-error-msg { color:#c0392b; font-weight:600; margin-bottom:20px; }
#snm-retry-btn { width:auto; display:inline-block; padding:12px 32px; }

/* Mobile */
@media (max-width:600px) {
    #snm-observation-app { padding:16px 12px; }
    .snm-breath-row { flex-direction:column; align-items:flex-start; gap:8px; }
    .snm-breath-time { width:100%; }
    .snm-sel-h,.snm-sel-m,.snm-sel-s { flex:1; }
    .snm-remove-breath { margin-left:0; align-self:flex-end; }
    .snm-fieldset { padding:14px 12px; }
    .snm-video-container iframe { height:220px; }
    .snm-timer-row { gap:16px; }
    .snm-timer-value { font-size:22px; }
    .snm-btn-mark { font-size:16px; padding:12px 24px; }
    .snm-player-buttons { flex-direction:column; align-items:center; }
}