/* Registration modal — shared by Product.html and Product Enterprise.html */
.reg-overlay {
    position:fixed;
    inset:0;
    background:rgba(54,48,47,.55);
    backdrop-filter:blur(3px);
    display:none;
    align-items:flex-start;
    justify-content:center;
    z-index:200;
    padding:48px 20px;
    overflow-y:auto;
}
.reg-overlay.open {
    display:flex;
}

.reg-modal {
    background:var(--paper);
    width:100%;
    max-width:560px;
    border-radius:12px;
    box-shadow:0 24px 64px rgba(54,48,47,.28);
    border:1px solid var(--slate-200);
    overflow:hidden;
    animation:regIn .22s ease;
}

@keyframes regIn {
    from {
        opacity:0;
        transform:translateY(12px);
    } to {
        opacity:1;
        transform:none;
          }
}

.reg-modal .rhead {
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:26px 30px 20px;
    border-bottom:1px solid var(--slate-100);
}

.reg-modal .rhead .chip {
    margin-bottom:8px;
}

.reg-modal .rhead h2 {
    font-size:25px;
    line-height:1.1;
}

.reg-modal .rhead p {
    margin:6px 0 0;
    font-size:13.5px;
    color:var(--slate-500);
}

.reg-modal .rx {
    margin-left:auto;
    cursor:pointer;
    color:var(--slate-400);
    font-size:18px;
    line-height:1;
    padding:4px;
}

.reg-modal .rx:hover {
    color:var(--ink);
}

.reg-form {
    padding:24px 30px 30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 18px;
    position:relative;
}

.reg-form .fg {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.reg-form .fg.col-2 {
    grid-column:1 / -1;
}

.reg-form label {
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--slate-500);
}

.reg-form label .opt {
    color:var(--slate-400);
    text-transform:none;
    letter-spacing:0;
}

.reg-form input[type=text], .reg-form input[type=email], .reg-form select {
    font-family:var(--font-body);
    font-size:14px;
    color:var(--ink);
    padding:10px 12px;
    border:1px solid var(--slate-200);
    border-radius:6px;
    background:var(--paper);
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}

.reg-form input:focus, .reg-form select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-50);
}

.reg-form input.invalid, .reg-form select.invalid {
    border-color:#c0584e;
    box-shadow:0 0 0 3px rgba(192,88,78,.12);
}

.reg-form .err {
    color:#c0584e;
    font-size:11.5px;
    min-height:14px;
}

.reg-form .age-row {
    grid-column:1 / -1;
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px;
    border:1px solid var(--slate-200);
    border-radius:8px;
    background:var(--slate-50);
}

.reg-form .age-row input {
    margin-top:2px;
    width:17px;
    height:17px;
    accent-color:var(--accent);
    flex:0 0 auto;
}

.reg-form .age-row .age-txt {
    font-size:11.5px;
    color:var(--ink-2);
    line-height:1.4;
    text-transform:lowercase;
}

.reg-form .ract {
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:4px;
}

.reg-form .ract .btn.accent {
    padding:12px 26px;
}

.reg-success {
    padding:40px 30px;
    text-align:center;
    display:none;
}

.reg-success.show {
    display:block;
}

.reg-success .tick {
    width:54px;
    height:54px;
    border-radius:50%;
    background:var(--accent-50);
    color:var(--accent);
    display:grid;
    place-items:center;
    font-size:26px;
    margin:0 auto 16px;
}

.reg-success h2 {
    font-size:24px;
}

.reg-success p {
    color:var(--slate-500);
    font-size:14px;
    margin-top:8px;
}

/* anti-bot honeypot — real users never see this; it exists only to catch bots that auto-fill every visible input */
.reg-honey {
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

/* Country autocomplete combobox */
.fg.autocomplete-wrap {
    position: relative;
}

.country-listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 224px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(54, 48, 47, .18);
}

.country-listbox[hidden] {
    display: none;
}

.country-opt {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    padding: 9px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s;
}

.country-opt:hover,
.country-opt.active {
    background: var(--accent-50);
}

.country-opt.active {
    color: var(--accent);
}