/* ARC Book Launch – Modal Styles
   Theme: #051244 (navy) · #383d49 (charcoal)
   Font : Helvetica
   ============================================================ */

:root {
    --arc-navy   : #051244;
    --arc-navy-h : #0a1e6e;
    --arc-charcoal: #383d49;
    --arc-white  : #ffffff;
    --arc-light  : #f4f6fb;
    --arc-border : #dde2f0;
    --arc-error  : #d93025;
    --arc-success: #1a8f4c;
    --arc-radius : 16px;
    --arc-shadow : 0 24px 80px rgba(5,18,68,.22), 0 4px 20px rgba(5,18,68,.10);
    --arc-font   : Helvetica, 'Helvetica Neue', Arial, sans-serif;
    --arc-trans  : 0.25s cubic-bezier(.4,0,.2,1);
}

/* ── Trigger Button ───────────────────────────────────────── */

.arc-trigger-btn {
    display           : inline-flex;
    align-items       : center;
    justify-content   : center;
    gap               : 8px;
    background        : var(--arc-navy);
    color             : var(--arc-white);
    font-family       : var(--arc-font);
    font-size         : 16px;
    font-weight       : 700;
    letter-spacing    : 0.4px;
    padding           : 16px 36px;
    border            : none;
    border-radius     : 10px;
    cursor            : pointer;
    text-transform    : none;
    transition        : background var(--arc-trans), transform var(--arc-trans), box-shadow var(--arc-trans);
    box-shadow        : 0 4px 20px rgba(5,18,68,.25);
}

.arc-trigger-btn:hover {
    background  : var(--arc-navy-h);
    transform   : translateY(-2px);
    box-shadow  : 0 8px 28px rgba(5,18,68,.30);
}

.arc-trigger-btn:active {
    transform : translateY(0);
}

/* ── Overlay ──────────────────────────────────────────────── */

.arc-overlay {
    position       : fixed;
    inset          : 0;
    background     : rgba(5, 18, 68, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index        : 99999;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 16px;
    opacity        : 0;
    transition     : opacity var(--arc-trans);
}

.arc-overlay.arc-visible {
    opacity : 1;
}

.arc-overlay[hidden] {
    display : none !important;
}

/* ── Modal Container ──────────────────────────────────────── */

.arc-modal {
    position        : relative;
    background      : var(--arc-white);
    border-radius   : var(--arc-radius);
    box-shadow      : var(--arc-shadow);
    width           : 100%;
    max-width       : 480px;
    font-family     : var(--arc-font);
    overflow        : hidden;
    transform       : translateY(28px) scale(.96);
    transition      : transform var(--arc-trans);
}

.arc-overlay.arc-visible .arc-modal {
    transform : translateY(0) scale(1);
}

/* ── Close Button ─────────────────────────────────────────── */

.arc-modal-close {
    position      : absolute;
    top           : 14px;
    right         : 16px;
    background    : rgba(255,255,255,.18);
    border        : none;
    color         : var(--arc-white);
    font-size     : 22px;
    line-height   : 1;
    width         : 36px;
    height        : 36px;
    border-radius : 50%;
    cursor        : pointer;
    display       : flex;
    align-items   : center;
    justify-content: center;
    transition    : background var(--arc-trans);
    z-index       : 1;
}

.arc-modal-close:hover {
    background : rgba(255,255,255,.30);
}

/* ── Header ───────────────────────────────────────────────── */

.arc-modal-header {
    background  : var(--arc-navy);
    padding     : 40px 36px 32px;
    text-align  : center;
}

.arc-modal-icon {
    margin        : 0 auto 16px;
    width         : 56px;
    height        : 56px;
}

.arc-modal-icon svg {
    width  : 100%;
    height : 100%;
}

.arc-modal-title {
    color       : var(--arc-white);
    font-family : var(--arc-font);
    font-size   : 24px;
    font-weight : 700;
    margin      : 0 0 8px;
    line-height : 1.2;
}

.arc-modal-subtitle {
    color       : rgba(255,255,255,.75);
    font-family : var(--arc-font);
    font-size   : 14px;
    margin      : 0;
    line-height : 1.5;
}

/* ── Body ─────────────────────────────────────────────────── */

.arc-modal-body {
    padding : 32px 36px 36px;
}

/* ── Fields ───────────────────────────────────────────────── */

.arc-field-group {
    margin-bottom : 20px;
}

.arc-label {
    display       : block;
    font-family   : var(--arc-font);
    font-size     : 13px;
    font-weight   : 600;
    color         : var(--arc-charcoal);
    margin-bottom : 7px;
    letter-spacing: 0.2px;
}

.arc-optional {
    font-weight : 400;
    color       : #9ba4b5;
    font-size   : 12px;
}

.arc-required {
    color       : var(--arc-error);
    margin-left : 2px;
}

.arc-input {
    display       : block;
    width         : 100%;
    box-sizing    : border-box;
    padding       : 12px 14px;
    font-family   : var(--arc-font);
    font-size     : 15px;
    color         : var(--arc-charcoal);
    background    : var(--arc-light);
    border        : 1.5px solid var(--arc-border);
    border-radius : 8px;
    outline       : none;
    transition    : border-color var(--arc-trans), box-shadow var(--arc-trans);
}

.arc-input::placeholder {
    color : #b0b8cc;
}

.arc-input:focus {
    border-color : var(--arc-navy);
    background   : var(--arc-white);
    box-shadow   : 0 0 0 3px rgba(5,18,68,.10);
}

.arc-input.arc-input-error {
    border-color : var(--arc-error);
    box-shadow   : 0 0 0 3px rgba(217,48,37,.10);
}

.arc-field-error {
    display     : block;
    color       : var(--arc-error);
    font-family : var(--arc-font);
    font-size   : 12px;
    margin-top  : 5px;
}

.arc-field-error[hidden] {
    display : none;
}

/* ── Consent line ─────────────────────────────────────────── */

.arc-consent {
    display       : flex;
    align-items   : center;
    gap           : 7px;
    color         : #9ba4b5;
    font-family   : var(--arc-font);
    font-size     : 12px;
    margin-bottom : 24px;
}

/* ── Submit Button ────────────────────────────────────────── */

.arc-submit-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 10px;
    width           : 100%;
    background      : var(--arc-navy);
    color           : var(--arc-white);
    font-family     : var(--arc-font);
    font-size       : 16px;
    font-weight     : 700;
    letter-spacing  : 0.4px;
    padding         : 15px 24px;
    border          : none;
    border-radius   : 10px;
    cursor          : pointer;
    transition      : background var(--arc-trans), transform var(--arc-trans), box-shadow var(--arc-trans);
    box-shadow      : 0 4px 16px rgba(5,18,68,.22);
}

.arc-submit-btn:hover:not(:disabled) {
    background  : var(--arc-navy-h);
    transform   : translateY(-1px);
    box-shadow  : 0 8px 24px rgba(5,18,68,.28);
}

.arc-submit-btn:disabled {
    opacity : 0.7;
    cursor  : not-allowed;
    transform: none;
}

/* spinner */
.arc-btn-spinner {
    width  : 20px;
    height : 20px;
    flex-shrink : 0;
}

.arc-btn-spinner[hidden] { display: none; }

.arc-spin {
    width     : 20px;
    height    : 20px;
    animation : arc-rotate 0.7s linear infinite;
}

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

/* ── Success State ────────────────────────────────────────── */

.arc-success-state {
    text-align  : center;
    padding     : 8px 0 4px;
}

.arc-success-state[hidden] { display: none; }

.arc-success-icon {
    width   : 64px;
    height  : 64px;
    margin  : 0 auto 20px;
}

.arc-success-icon svg {
    width  : 100%;
    height : 100%;
}

.arc-success-title {
    font-family : var(--arc-font);
    font-size   : 22px;
    font-weight : 700;
    color       : var(--arc-navy);
    margin      : 0 0 12px;
}

.arc-success-msg {
    font-family : var(--arc-font);
    font-size   : 15px;
    color       : var(--arc-charcoal);
    line-height : 1.6;
    margin      : 0;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 520px) {
    .arc-modal-header { padding: 32px 24px 24px; }
    .arc-modal-body   { padding: 24px 24px 28px; }
    .arc-modal-title  { font-size: 20px; }
}