/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ========== SURL Register – modern, accessible styles ========== */
:root{
    --surl-bg: #ffffff;
    --surl-text: #0f172a;          /* slate-900 */
    --surl-muted: #64748b;         /* slate-500 */
    --surl-line: #e5e7eb;          /* gray-200 */
    --surl-input: #f8fafc;         /* slate-50 */
    --surl-input-bd: #cbd5e1;      /* slate-300 */
    --surl-focus: #2563eb;         /* blue-600 */
    --surl-primary: #2563eb;       /* button bg */
    --surl-primary-hover: #1e40af; /* button hover */
    --surl-ok-bg: #ecfdf5;
    --surl-ok-bd: #a7f3d0;
    --surl-ok-tx: #065f46;
    --surl-err-bg: #fef2f2;
    --surl-err-bd: #fecaca;
    --surl-err-tx: #991b1b;
    --surl-radius: 12px;
    --surl-shadow: 0 6px 24px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
}

.surl-register{
    max-width: 880px;
    margin: 36px auto;
    padding: 0 16px;
    color: var(--surl-text);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
}

/* Card */
.surl-register form{
    background: var(--surl-bg);
    border: 1px solid var(--surl-line);
    border-radius: var(--surl-radius);
    box-shadow: var(--surl-shadow);
    padding: 24px;
}

.surl-register h3{
    margin: 6px 0 14px;
    font-size: 1.15rem;
    line-height: 1.2;
}

/* Layout */
.surl-grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.surl-field-row{ margin: 14px 0; }
.surl-field-row > label{
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Inputs */
.surl-register input[type="text"],
.surl-register input[type="email"],
.surl-register input[type="url"],
.surl-register input[type="tel"],
.surl-register input[type="number"],
.surl-register input[type="date"],
.surl-register input[type="password"],
.surl-register select,
.surl-register textarea{
    appearance: none;
    background: var(--surl-input);
    border: 1px solid var(--surl-input-bd);
    border-radius: 10px;
    padding: 0;
    height: 47px;
    padding-inline: 112px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.surl-register textarea{ min-height: 110px; resize: vertical; }

.surl-register input:focus,
.surl-register select:focus,
.surl-register textarea:focus{
    outline: 0;
    border-color: var(--surl-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--surl-focus) 20%, transparent);
    background: #fff;
}

/* Radios / checkboxes inline */
.surl-inline{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    font-weight: 500;
}
.surl-field-row[data-type="checkboxes"] .surl-inline,
.surl-field-row[data-type="radio"] .surl-inline{
    margin-bottom: 8px;
}

/* File input */
.surl-register input[type="file"]{
    background: transparent;
    border: 1px dashed var(--surl-input-bd);
    padding: 14px;
    border-radius: 10px;
}
.surl-register input[type="file"]::file-selector-button{
    border: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surl-primary);
    color: #fff;
    cursor: pointer;
    margin-right: 12px;
}
.surl-register input[type="file"]::file-selector-button:hover{
    background: var(--surl-primary-hover);
}

/* Help / messages */
#surl-msg{ margin-bottom: 14px; }
#surl-msg .ok{
    background: var(--surl-ok-bg);
    border: 1px solid var(--surl-ok-bd);
    color: var(--surl-ok-tx);
    padding: 12px 14px;
    border-radius: 10px;
}
#surl-msg .err{
    background: var(--surl-err-bg);
    border: 1px solid var(--surl-err-bd);
    color: var(--surl-err-tx);
    padding: 12px 14px;
    border-radius: 10px;
}

/* Redirect banner & progress (kept from your JS) */
.surl-redirect-box{ margin:12px 0; padding:14px 16px; background:var(--surl-ok-bg); border:1px solid var(--surl-ok-bd); color:var(--surl-ok-tx); border-radius:10px }
.surl-redirect-row{ display:flex; gap:6px; align-items:baseline; margin-top:6px }
.surl-progress{ height:4px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin-top:10px }
.surl-progress>span{ display:block; height:100%; background:var(--surl-primary); width:0; animation:surlBar 3s linear forwards }
@keyframes surlBar{ to{ width:100% } }

/* Actions */
.surl-actions{ margin-top: 8px; }
.surl-actions .button.button-primary{
    background: var(--surl-primary);
    border: 1px solid var(--surl-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .02s ease;
}
.surl-actions .button.button-primary:hover{ background: var(--surl-primary-hover); }
.surl-actions .button.button-primary:active{ transform: translateY(1px); }

/* Small helpers */
.surl-note{
    background:#f8fafc;border:1px solid var(--surl-line);
    padding:12px 14px;border-radius:10px;color:var(--surl-muted);
}

/* Responsive */
@media (max-width: 780px){
    .surl-grid-2{ grid-template-columns: 1fr; }
    .surl-register form{ padding: 18px; }
}