/*
 * Punks SSO — login / registration pages.
 * Figma: Punks → "Jeden komponent do Email/Telefon". Measured at 100%: frame 680px wide, 96px top/bottom
 * padding, form column 398px, 40px controls, 16px rhythm (8px label→input), radius 4px.
 * All colours, type sizes, spacing and radii come from @bdsystems/design-system
 * (vendor/design-system/exchange.css, loaded before this file). Only layout lives here.
 */
:root {
    --font: var(--punks-font-family-primary), system-ui, sans-serif;
    --control-height: 2.5rem;               /* 40px inputs / buttons (Figma), no DS token */
    --row-height: 2.25rem;                  /* 36px dropdown rows */
    --dial-width: 108px;                    /* country-code box; Figma frame 336 has 122px, narrowed on request */
    --panel-padding-y: calc(2 * var(--punks-spacing-8));   /* 96px */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }   /* wins over display:flex on .btn / .ident-clear */

body {
    background: var(--punks-surface-primary);
    color: var(--punks-text-primary);
    font-family: var(--font);
    font-size: var(--punks-text-body-sm);
    line-height: var(--punks-line-height-body-sm);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--punks-spacing-6);
}

/* ── Panel = the Figma frame (surface-primary, no border). Over the blurred punks background it becomes a card. ── */
.panel {
    width: min(680px, 100%);
    background: var(--punks-surface-primary);
    border-radius: var(--punks-corner-radius-md);
    padding: var(--panel-padding-y) var(--punks-spacing-6);
}

body.punks-bg .panel { border: var(--punks-border-width-1) solid var(--punks-border-primary); }

body.panel-pending .panel { visibility: hidden; }

.form {
    width: min(398px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.title {
    font-size: var(--punks-text-display-xs);
    font-weight: 500;
    line-height: var(--punks-line-height-display-xs);
    text-align: center;
    color: var(--punks-text-primary);
    margin-bottom: var(--punks-spacing-6);
}

/* Status line under the title — only for "no flow" / fetch errors, otherwise empty and collapsed */
.sub {
    color: var(--punks-text-tertiary);
    text-align: center;
    margin: calc(-1 * var(--punks-spacing-3)) 0 var(--punks-spacing-6);
}

.sub:empty { display: none; }

/* ── Fields ── */
.field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--punks-spacing-6);
}

.field label {
    font-weight: 500;
    color: var(--punks-input-label);
    margin-bottom: var(--punks-spacing-3);
}

.input {
    width: 100%;
    height: var(--control-height);
    background: var(--punks-input-bg);
    border: var(--punks-border-width-1) solid var(--punks-input-border);
    border-radius: var(--punks-corner-radius-sm);
    color: var(--punks-input-text);
    font: 400 var(--punks-text-body-sm) / var(--punks-line-height-body-sm) var(--font);
    padding: 0 var(--punks-spacing-5);
    outline: none;
}

.input::placeholder { color: var(--punks-input-placeholder); }
/* fires `animationstart` when the browser autofills, see syncSubmit() in the templates */
@keyframes autofill-hook { from { opacity: 1; } to { opacity: 1; } }
.input:-webkit-autofill, .input:autofill { animation: autofill-hook 1ms; }

.input:hover { border-color: var(--punks-input-border--hover); }

.input:focus { border-color: var(--punks-input-border--active); }

.field.invalid .input { border-color: var(--punks-input-border--error); }   /* the dial code is never the invalid part */

.field-error {
    color: var(--punks-input-hint--error);
    font-size: var(--punks-text-body-xs);
    line-height: var(--punks-line-height-body-xs);
    margin-top: var(--punks-spacing-3);
}

/* Port of the frontend punks-alert (type="alert" appearance="fill"), same custom properties as libs/shared/ui */
.error-msg {
    --punks-alert-icon-color: var(--colors-accent-950);
    --punks-alert-border-color: var(--colors-red-400);
    --punks-alert-background: var(--colors-red-400);
    --punks-alert-text-color: var(--colors-accent-950);
    --punks-alert-border-radius: var(--punks-corner-radius-md);
    --punks-alert-gap: var(--punks-spacing-3);
    display: flex;
    align-items: flex-start;
    gap: var(--punks-alert-gap);
    padding: var(--punks-spacing-5) var(--punks-spacing-6);
    border-radius: var(--punks-alert-border-radius);
    background: var(--punks-alert-background);
    border: var(--punks-border-width-1) solid var(--punks-alert-border-color);
    color: var(--punks-alert-text-color);
    font-size: var(--punks-text-body-sm);
    line-height: var(--punks-line-height-body-sm);
    letter-spacing: 0.004em;
    margin-bottom: var(--punks-spacing-6);
}

.error-msg svg { flex-shrink: 0; width: var(--punks-icon-md); height: var(--punks-icon-md); color: var(--punks-alert-icon-color); }

/* ── Buttons ── */
.btn {
    height: var(--control-height);
    border-radius: var(--punks-corner-radius-sm);
    border: var(--punks-border-width-1) solid transparent;
    font: 500 var(--punks-text-body-sm) / var(--punks-line-height-body-sm) var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--punks-animation-duration, 150ms), border-color var(--punks-animation-duration, 150ms);
}

.btn:disabled { cursor: not-allowed; }

.btn-primary {
    width: 100%;
    background: var(--punks-button-primary-bg);
    border-color: var(--punks-button-primary-border);
    color: var(--punks-button-primary-fg);
}

.btn-primary:hover:not(:disabled) { background: var(--punks-button-primary-bg--hover); color: var(--punks-button-primary-fg--hover); }

.btn-primary:disabled { background: var(--punks-button-primary-bg--disabled); color: var(--punks-button-primary-fg--disabled); }

.btn-secondary {
    background: var(--punks-button-secondary-bg);
    border-color: var(--punks-button-secondary-border);
    color: var(--punks-button-secondary-fg);
}

.btn-secondary:hover:not(:disabled) { background: var(--punks-button-secondary-bg--hover); border-color: var(--punks-button-secondary-border--hover); }

.btn-secondary:disabled { background: var(--punks-button-secondary-bg--disabled); border-color: var(--punks-button-secondary-border--disabled); color: var(--punks-button-secondary-fg--disabled); }

.divider {
    display: flex;
    align-items: center;
    gap: var(--punks-spacing-6);
    color: var(--colors-neutral-200);           /* Figma: neutral-200 */
    font-size: var(--punks-text-body-xs);
    line-height: var(--punks-line-height-body-xs);
    margin: var(--punks-spacing-6) 0;
}

.divider::before,
.divider::after { content: ''; flex: 1; height: var(--punks-border-width-1); background: var(--punks-border-secondary); }

.social { display: flex; gap: var(--punks-spacing-6); }

.social .btn { flex: 1; }

.powered {
    text-align: center;
    color: var(--punks-text-tertiary);
    margin-top: var(--punks-spacing-6);
}

.powered b { color: var(--punks-text-brand-secondary); font-weight: 400; }

.switch {
    text-align: center;
    color: var(--colors-neutral-200);           /* Figma: neutral-200 */
    margin-top: var(--punks-spacing-6);
}

.switch a { color: inherit; text-decoration: underline; }

.switch a:hover { color: var(--punks-text-primary); }

/* ── Email / phone combo field (markup built by identifier-field.js) ── */
.ident-row {
    position: relative;
    display: flex;
    gap: var(--punks-spacing-3);
}

.dial { flex-shrink: 0; }

.dial-btn {
    width: var(--dial-width);
    height: var(--control-height);
    padding: 0 var(--punks-spacing-5);
    display: flex;
    align-items: center;
    gap: var(--punks-spacing-3);
    background: var(--punks-input-bg);
    border: var(--punks-border-width-1) solid var(--punks-input-border);
    border-radius: var(--punks-corner-radius-sm);
    color: var(--punks-input-text);
    font: 400 var(--punks-text-body-sm) / var(--punks-line-height-body-sm) var(--font);
    cursor: pointer;
}

.dial-btn:hover { border-color: var(--punks-input-border--hover); }

.dial-btn:focus-visible,
.dial-btn[aria-expanded="true"] { border-color: var(--punks-input-border--active); outline: none; }

.dial-flag { font-size: var(--punks-icon-sm); line-height: 1; }

.dial-btn .chev { margin-left: auto; display: flex; color: var(--punks-text-primary); }

.dial-btn .chev svg { width: var(--punks-icon-xxs); height: var(--punks-icon-xxs); }

.ident-wrap { position: relative; flex: 1; min-width: 0; }

.ident-wrap .input { padding-right: calc(var(--punks-spacing-5) + var(--punks-icon-md)); }

.ident-clear {
    position: absolute;
    right: var(--punks-spacing-5);
    top: 0;
    height: var(--control-height);
    display: flex;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--punks-input-search-clear);     /* Figma: neutral-400 ✕ */
    cursor: pointer;
}

.ident-clear svg { width: var(--punks-icon-sm); height: var(--punks-icon-sm); }

.ident-clear:hover { color: var(--punks-input-search-clear--hover); }

.dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--punks-spacing-2));
    z-index: 20;
    background: var(--punks-surface-floating-bg);
    border: var(--punks-surface-floating-border-width) solid var(--punks-surface-floating-border-color);
    border-radius: var(--punks-corner-radius-sm);
    box-shadow: var(--punks-shadow-400);
}

.dial-panel { padding: var(--punks-spacing-6) var(--punks-spacing-6) var(--punks-spacing-3); }

.dial-search-wrap { position: relative; margin-bottom: var(--punks-spacing-3); }

.dial-search-wrap svg {
    position: absolute;
    left: var(--punks-spacing-5);
    top: 50%;
    transform: translateY(-50%);
    width: var(--punks-icon-sm);
    height: var(--punks-icon-sm);
    color: var(--punks-input-search-icon);
    pointer-events: none;
}

.dial-search {
    height: var(--row-height);
    padding-left: calc(var(--punks-spacing-5) + var(--punks-icon-md));
    border-color: var(--punks-input-search-border);
    color: var(--punks-input-search-text);
}

.dial-search::placeholder { color: var(--punks-input-search-placeholder); }

.dial-search::-webkit-search-cancel-button { display: none; }

.dial-list {
    list-style: none;
    max-height: calc(5 * var(--row-height));
    overflow-y: auto;
    margin: 0 calc(-1 * var(--punks-spacing-6));
}

/* DS scrollbar tokens (libs/styles/desktop-scrollbar.scss): 4px, transparent track, 2px radius.
   Thumb is always visible: Chrome (152) does not repaint ::-webkit-scrollbar-thumb on the scroller's
   :hover, only on the thumb's own hover, so the DS hover-reveal would leave the list looking unscrollable. */
.dial-list::-webkit-scrollbar {
    width: calc(var(--punks-scrollbar-width) * 1px);
    background-color: var(--punks-scrollbar-track-bg);
}

.dial-list::-webkit-scrollbar-track { background-color: var(--punks-scrollbar-track-bg); }

.dial-list::-webkit-scrollbar-thumb {
    background-color: var(--punks-scrollbar-thumb-bg);
    border-radius: var(--punks-scrollbar-radius);
}

.dial-list::-webkit-scrollbar-thumb:hover { background-color: var(--punks-scrollbar-thumb-bg--hover); }

@supports not selector(::-webkit-scrollbar) {
    .dial-list { scrollbar-width: thin; scrollbar-color: var(--punks-scrollbar-thumb-bg) transparent; }
}

.dial-list li,
.suggest li {
    height: var(--row-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--punks-spacing-6);
    color: var(--punks-list-item-label);
    background: var(--punks-list-item-bg);
    cursor: pointer;
}

.dial-list li:hover,
.suggest li:hover { background: var(--punks-surface-primary-hover); color: var(--punks-list-item-label-selected); }

.dial-list li[aria-selected="true"] { background: var(--punks-list-item-bg-selected-subtle); color: var(--punks-list-item-label-selected); }

.dial-list .name { color: var(--punks-list-item-description); }

.suggest { list-style: none; padding: var(--punks-spacing-3) 0; }

.suggest li { justify-content: flex-start; }   /* typed part + domain read as one address */

/* Figma resolves list-item-description to neutral-400 here; the DS package maps it to neutral-300, so take the token that carries the Figma value */
.suggest b { color: var(--punks-text-tertiary); font-weight: 400; }

/* ── Popup / Telegram waiting overlay (not in Figma, same tokens) ── */
.overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--punks-surface-base) 85%, transparent);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--punks-spacing-6);
}

.overlay-box {
    width: min(360px, 100%);
    background: var(--punks-surface-primary);
    border: var(--punks-border-width-1) solid var(--punks-border-primary);
    border-radius: var(--punks-corner-radius-md);
    box-shadow: var(--punks-shadow-500);
    padding: var(--punks-spacing-7);
    text-align: center;
}

.overlay-title {
    font-size: var(--punks-text-body-lg);
    font-weight: 500;
    line-height: var(--punks-line-height-body-lg);
    margin-bottom: var(--punks-spacing-2);
}

.overlay-sub, .overlay-hint { color: var(--punks-text-tertiary); }

.overlay-spinner {
    width: var(--punks-icon-xlg);
    height: var(--punks-icon-xlg);
    margin: var(--punks-spacing-6) auto var(--punks-spacing-5);
    border: var(--punks-border-width-2) solid var(--punks-border-primary);
    border-top-color: var(--icons-brand);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

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

.btn-cancel { margin: var(--punks-spacing-6) auto 0; padding: 0 var(--punks-spacing-6); }

/* ── Blurred Punks trading page behind the panel (desktop, punks tenant only) ── */
.punks-bg-layer {
    position: fixed;
    inset: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border: none;
    filter: blur(4px);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}

body.punks-bg .punks-bg-layer { visibility: visible; }