/* ============================================================
   Islandwide Weather Alerts – Registration Form Styles
   Aesthetic: Deep storm atmosphere — navy/slate + electric gold
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Custom Properties ─────────────────────────────────── */
.iwa-wrap {
    --iwa-bg:           #0c1929;
    --iwa-surface:      #112240;
    --iwa-surface-2:    #1a3355;
    --iwa-border:       rgba(255,255,255,0.10);
    --iwa-accent:       #FFD166;
    --iwa-accent-dim:   rgba(255,209,102,0.15);
    --iwa-blue:         #56CCF2;
    --iwa-blue-dim:     rgba(86,204,242,0.12);
    --iwa-text:         #e0eaf8;
    --iwa-text-muted:   #7fa3c8;
    --iwa-error:        #FF6B6B;
    --iwa-success:      #6BDCC0;
    --iwa-radius:       12px;
    --iwa-radius-sm:    8px;
    --iwa-shadow:       0 4px 32px rgba(0,0,0,0.5);
    --iwa-font-head:    'Barlow Condensed', sans-serif;
    --iwa-font-body:    'DM Sans', sans-serif;
    --iwa-transition:   .2s ease;
    --iwa-max-width:    680px;
}

/* ── Container ─────────────────────────────────────────── */
.iwa-wrap {
    font-family:     var(--iwa-font-body);
    font-size:       15px;
    color:           var(--iwa-text);
    background:      var(--iwa-bg);
    max-width:       var(--iwa-max-width);
    margin:          2rem auto;
    padding:         0;
    border-radius:   var(--iwa-radius);
    box-shadow:      var(--iwa-shadow);
    overflow:        hidden;
    border:          1px solid var(--iwa-border);
    position:        relative;
}

/* Atmospheric top gradient strip */
.iwa-wrap::before {
    content:    '';
    display:    block;
    height:     4px;
    background: linear-gradient(90deg, #56CCF2 0%, #2F80ED 40%, #FFD166 100%);
}

/* ── Header ────────────────────────────────────────────── */
.iwa-header {
    display:         flex;
    align-items:     center;
    gap:             1.25rem;
    padding:         2rem 2rem 1.5rem;
    background:      linear-gradient(135deg, #0a1628 0%, #112240 100%);
    border-bottom:   1px solid var(--iwa-border);
}

.iwa-header__icon svg {
    width:  56px;
    height: 56px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(86,204,242,0.5));
}

.iwa-title {
    font-family:  var(--iwa-font-head);
    font-size:    clamp(1.4rem, 4vw, 2rem);
    font-weight:  700;
    letter-spacing: 0.5px;
    color:        #fff;
    margin:       0 0 0.35rem;
    line-height:  1.15;
    text-transform: uppercase;
}

.iwa-subtitle {
    font-size:    0.9rem;
    color:        var(--iwa-text-muted);
    margin:       0;
    line-height:  1.5;
}

/* ── Notice Banner ─────────────────────────────────────── */
.iwa-notice {
    display:         flex;
    align-items:     flex-start;
    gap:             0.75rem;
    padding:         0.85rem 2rem;
    font-size:       0.85rem;
    line-height:     1.5;
    border-bottom:   1px solid var(--iwa-border);
}

.iwa-notice--info {
    background:  var(--iwa-blue-dim);
    color:       var(--iwa-blue);
}

.iwa-notice__icon { flex-shrink: 0; }

/* ── Form Padding Wrapper ──────────────────────────────── */
#iwa-form {
    padding:    1.5rem 2rem 2rem;
}

/* ── Fieldsets ─────────────────────────────────────────── */
.iwa-fieldset {
    border:         1px solid var(--iwa-border);
    border-radius:  var(--iwa-radius-sm);
    padding:        1.25rem 1.5rem 1.5rem;
    margin:         0 0 1.25rem;
    background:     var(--iwa-surface);
}

.iwa-legend {
    font-family:   var(--iwa-font-head);
    font-size:     0.85rem;
    font-weight:   600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:         var(--iwa-accent);
    padding:       0 0.5rem;
}

/* ── Row Layouts ───────────────────────────────────────── */
.iwa-row { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 500px) {
    .iwa-row--2col { flex-direction: row; }
    .iwa-row--2col .iwa-field { flex: 1 1 0; }
}

/* ── Individual Field ──────────────────────────────────── */
.iwa-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.iwa-field:last-child { margin-bottom: 0; }

.iwa-label {
    font-size:    0.82rem;
    font-weight:  600;
    color:        var(--iwa-text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.iwa-required { color: var(--iwa-error); margin-left: 2px; }
.iwa-optional { color: var(--iwa-text-muted); font-weight: 400; font-size: 0.78rem; text-transform: none; letter-spacing: 0; }

.iwa-input,
.iwa-select {
    background:    var(--iwa-surface-2);
    border:        1px solid var(--iwa-border);
    border-radius: var(--iwa-radius-sm);
    color:         var(--iwa-text);
    font-family:   var(--iwa-font-body);
    font-size:     0.95rem;
    padding:       0.65rem 0.9rem;
    width:         100%;
    transition:    border-color var(--iwa-transition), box-shadow var(--iwa-transition);
    box-sizing:    border-box;
    -webkit-appearance: none;
    appearance:    none;
}

.iwa-input::placeholder { color: var(--iwa-text-muted); opacity: 0.6; }

.iwa-input:focus,
.iwa-select:focus {
    outline:      none;
    border-color: var(--iwa-blue);
    box-shadow:   0 0 0 3px rgba(86,204,242,0.15);
}

.iwa-input.iwa-error,
.iwa-select.iwa-error {
    border-color: var(--iwa-error);
    box-shadow:   0 0 0 3px rgba(255,107,107,0.15);
}

.iwa-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237fa3c8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.75rem center;
    background-size:     1rem;
    padding-right:       2.25rem;
    cursor:              pointer;
}

/* Phone field wrapper */
.iwa-phone-wrap {
    position: relative;
}

.iwa-phone-flag {
    position:    absolute;
    left:        0.75rem;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   1rem;
    pointer-events: none;
    line-height: 1;
}

.iwa-input--phone { padding-left: 2.5rem; }

.iwa-hint {
    font-size:  0.78rem;
    color:      var(--iwa-text-muted);
    margin:     0.15rem 0 0;
    line-height: 1.4;
}

/* ── Field Error ───────────────────────────────────────── */
.iwa-field-error {
    font-size:   0.78rem;
    color:       var(--iwa-error);
    min-height:  1rem;
    line-height: 1.3;
    display:     block;
}

/* ── Checklist ─────────────────────────────────────────── */
.iwa-checklist {
    display:        grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap:            0.5rem;
    margin-top:     0.75rem;
}

.iwa-check-item {
    display:        flex;
    align-items:    flex-start;
    gap:            0.65rem;
    cursor:         pointer;
    padding:        0.55rem 0.75rem;
    border-radius:  var(--iwa-radius-sm);
    border:         1px solid transparent;
    transition:     background var(--iwa-transition), border-color var(--iwa-transition);
    font-size:      0.9rem;
    line-height:    1.4;
    user-select:    none;
}

.iwa-check-item:hover {
    background:     var(--iwa-blue-dim);
    border-color:   rgba(86,204,242,0.25);
}

.iwa-check-item input[type="checkbox"] {
    flex-shrink:     0;
    margin-top:      3px;
    width:           16px;
    height:          16px;
    accent-color:    var(--iwa-blue);
    cursor:          pointer;
}

.iwa-check-label { color: var(--iwa-text); }

/* Consent checkbox – full width */
.iwa-fieldset--consent .iwa-checklist { grid-template-columns: 1fr; }

.iwa-check-item--consent {
    padding:     0.75rem;
    background:  var(--iwa-accent-dim);
    border-color: rgba(255,209,102,0.25);
    border-radius: var(--iwa-radius-sm);
    font-size:   0.85rem;
    line-height: 1.55;
    color:       var(--iwa-text);
    margin-top:  0.5rem;
}

.iwa-check-item--consent a {
    color:           var(--iwa-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Submit ────────────────────────────────────────────── */
.iwa-submit-row {
    margin-top: 1.5rem;
    text-align: center;
}

.iwa-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.65rem;
    background:      linear-gradient(135deg, #FFD166 0%, #F0B429 100%);
    color:           #0c1929;
    font-family:     var(--iwa-font-head);
    font-size:       1rem;
    font-weight:     700;
    letter-spacing:  1.5px;
    text-transform:  uppercase;
    padding:         0.85rem 2.5rem;
    border:          none;
    border-radius:   var(--iwa-radius-sm);
    cursor:          pointer;
    width:           100%;
    max-width:       380px;
    transition:      transform var(--iwa-transition), box-shadow var(--iwa-transition), opacity var(--iwa-transition);
    box-shadow:      0 4px 20px rgba(255,209,102,0.3);
    position:        relative;
    overflow:        hidden;
}

.iwa-btn::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
    pointer-events: none;
}

.iwa-btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 6px 28px rgba(255,209,102,0.45);
}

.iwa-btn:active:not(:disabled) {
    transform: translateY(0);
}

.iwa-btn:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* Spinner */
.iwa-btn__spinner {
    display:      none;
    width:        18px;
    height:       18px;
    border:       2.5px solid rgba(12,25,41,0.3);
    border-top-color: #0c1929;
    border-radius: 50%;
    animation:    iwa-spin 0.65s linear infinite;
    flex-shrink:  0;
}

.iwa-btn.iwa--loading .iwa-btn__spinner { display: block; }
.iwa-btn.iwa--loading .iwa-btn__text    { opacity: 0.7; }

@keyframes iwa-spin {
    to { transform: rotate(360deg); }
}

/* ── Form Message ──────────────────────────────────────── */
.iwa-form-message {
    margin-top:   1rem;
    padding:      0.85rem 1rem;
    border-radius: var(--iwa-radius-sm);
    font-size:    0.9rem;
    display:      none;
    line-height:  1.5;
}

.iwa-form-message.iwa--error {
    background:   rgba(255,107,107,0.12);
    border:       1px solid rgba(255,107,107,0.3);
    color:        #ff8f8f;
    display:      block;
}

.iwa-form-message.iwa--error ul {
    margin: 0.4rem 0 0 1rem;
    padding: 0;
}

.iwa-form-message.iwa--warning {
    background: var(--iwa-accent-dim);
    border:     1px solid rgba(255,209,102,0.25);
    color:      var(--iwa-accent);
    display:    block;
}

/* ── Success State ─────────────────────────────────────── */
.iwa-success-state {
    padding:    3rem 2rem;
    text-align: center;
}

.iwa-success-icon {
    font-size:   3.5rem;
    margin-bottom: 1rem;
    animation:   iwa-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes iwa-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.iwa-success-title {
    font-family:  var(--iwa-font-head);
    font-size:    1.8rem;
    font-weight:  700;
    color:        var(--iwa-success);
    margin:       0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.iwa-success-body {
    color:      var(--iwa-text);
    font-size:  1rem;
    max-width:  420px;
    margin:     0 auto 0.75rem;
    line-height: 1.6;
}

.iwa-success-hint {
    font-size: 0.82rem;
    color:     var(--iwa-text-muted);
    margin:    0;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 920px) {
    .iwa-header  { padding: 1.5rem 1.25rem 1.25rem; gap: 1rem; }
    .iwa-notice  { padding: 0.7rem 1.25rem; }
    #iwa-form    { padding: 1.25rem 1.25rem 1.5rem; }
    .iwa-fieldset{ padding: 1rem 1rem 1.25rem; }
    .iwa-checklist { grid-template-columns: 1fr; }
    .iwa-header__icon svg { width: 42px; height: 42px; }
    .iwa-success-state { padding: 2rem 1.25rem; }
    .iwa-field{margin-bottom: 0px!important}
    .iwa-field input {padding: 0.65rem 0.9rem !important;}
    .iwa-row { gap:none !important;}
}