/**
 * @file
 * commerce-checkout-login.css
 *
 * World-class checkout login UI — Stripe / Shopify / Linear inspired.
 * Uses Aristotle theme CSS variables (dark-mode.css & dashboard-layout.css).
 */

/* ============================================================
   Wrapper — centers the card on the page
   ============================================================ */
.fk-checkout-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px 80px;
}

/* ============================================================
   The Card — matches .comment-form__container from dashboard-layout.css
   ============================================================ */
.fk-checkout-login-card {
    width: 100%;
    max-width: 480px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--fk-radius, 12px);
    box-shadow: var(--fk-shadow, 0 2px 10px rgba(0, 0, 0, 0.07));
    padding: 40px;
    transition: background 0.3s, border-color 0.3s;
}

/* ============================================================
   Heading
   ============================================================ */
.fk-checkout-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.fk-checkout-subtitle {
    font-family: var(--fk-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0 0 28px;
}

/* ============================================================
   Google SSO Block
   ============================================================ */
.fk-google-login-block {
    margin-bottom: 24px;
    text-align: center;
}

.fk-google-login-label {
    font-family: var(--fk-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 12px;
}

/* Google button — white bg required by Google brand guidelines */
#fk-checkout-google-btn,
.fskill-btn-google {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1.5px solid #dadce0 !important;
    border-radius: 8px !important;
    font-family: var(--fk-font-body, 'DM Sans', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #3c4043 !important;
    cursor: pointer !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

#fk-checkout-google-btn:hover,
.fskill-btn-google:hover {
    border-color: #c6c6c6 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.fk-google-divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
    font-family: var(--fk-font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fk-google-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-default);
    z-index: 0;
}

.fk-google-divider span {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    background: var(--surface-card);
}

/* ============================================================
   Pill Tabs — Linear / Vercel style
   ============================================================ */
.fk-login-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 24px;
}

.fk-tab {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--fk-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    position: relative;
}

.fk-tab.fk-tab--active,
.fk-tab[aria-selected="true"] {
    background: var(--surface-card);
    color: var(--accent-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fk-tab:hover:not(.fk-tab--active) {
    color: var(--text-primary);
}

/* ============================================================
   Tab Panels
   ============================================================ */
.fk-tab-pane {
    display: none;
}

.fk-tab-pane.fk-tab-pane--active {
    display: block;
    animation: fkFadeUp 0.2s ease both;
}

@keyframes fkFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Strip Drupal's fieldset styling inside tabs
   ============================================================ */
.fk-tab-pane fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fk-tab-pane fieldset legend,
.fk-tab-pane .fieldset-legend {
    display: none !important;
    /* Tabs replace the legend titles */
}

/* ============================================================
   Labels
   ============================================================ */
.fk-checkout-login-card label {
    font-family: var(--fk-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}

/* ============================================================
   Inputs — Stripe-caliber
   ============================================================ */
.fk-checkout-login-card input[type="text"],
.fk-checkout-login-card input[type="email"],
.fk-checkout-login-card input[type="password"],
.fk-checkout-login-card input[type="tel"],
.fk-checkout-login-card input.form-text,
.fk-checkout-login-card select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important;
    padding: 0 16px !important;
    background: var(--surface-input) !important;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: 8px !important;
    font-family: var(--fk-font-body, 'DM Sans', sans-serif) !important;
    font-size: 16px !important;
    /* 16px prevents iOS auto-zoom */
    color: var(--text-primary) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.fk-checkout-login-card textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 100px !important;
    padding: 12px 16px !important;
    background: var(--surface-input) !important;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: 8px !important;
    font-family: var(--fk-font-body, 'DM Sans', sans-serif) !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    resize: vertical !important;
}

.fk-checkout-login-card input::placeholder,
.fk-checkout-login-card textarea::placeholder {
    color: var(--text-tertiary) !important;
    opacity: 1 !important;
}

.fk-checkout-login-card input:focus,
.fk-checkout-login-card select:focus,
.fk-checkout-login-card textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
    background: var(--surface-card) !important;
}

/* ============================================================
   Form items spacing
   ============================================================ */
.fk-checkout-login-card .form-item {
    margin-bottom: 16px !important;
}

/* ============================================================
   Submit Buttons — F-Skill teal
   ============================================================ */
.fk-checkout-login-card input[type="submit"],
.fk-checkout-login-card .form-submit {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin-top: 20px !important;
    background: var(--accent-primary, #1B7A6E) !important;
    color: #ffffff !important;
    font-family: var(--fk-font-body, 'DM Sans', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: opacity 0.15s, box-shadow 0.15s !important;
    box-shadow: 0 2px 8px rgba(27, 122, 110, 0.25) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.fk-checkout-login-card input[type="submit"]:hover,
.fk-checkout-login-card .form-submit:hover {
    opacity: 0.88 !important;
    box-shadow: 0 4px 12px rgba(27, 122, 110, 0.3) !important;
}

/* ============================================================
   Descriptions
   ============================================================ */
.fk-checkout-login-card .description {
    font-family: var(--fk-font-body, 'DM Sans', sans-serif);
    font-size: 12px !important;
    color: var(--text-tertiary) !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

/* ============================================================
   Links (Forgot password etc.)
   ============================================================ */
.fk-checkout-login-card a {
    color: var(--accent-primary, #1B7A6E) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.fk-checkout-login-card a:hover {
    text-decoration: underline !important;
}

/* ============================================================
   HIDE verbose filter tips — aggressive selectors
   ============================================================ */
.fk-checkout-login-card .filter-wrapper,
.fk-checkout-login-card .filter-guidelines,
.fk-checkout-login-card .filter-help,
.fk-checkout-login-card .js-filter-wrapper,
.fk-checkout-login-card [id*="format--"],
.fk-checkout-login-card [id*="text-format"],
.fk-checkout-login-card .form-type-select.form-item-format,
.filter-wrapper,
.filter-guidelines,
[id*="format--2-wrapper"],
.text-format-wrapper .form-type-select {
    display: none !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 560px) {
    .fk-checkout-login-card {
        padding: 28px 20px;
    }
}

/* ============================================================
   Hide non-essential registration fields — EXACT IDs from live DOM
   ============================================================ */

/* About Me / Bio */
#edit-login-register-field-fskill-bio-wrapper,
.js-text-format-wrapper {
    display: none !important;
}

/* Cover Image */
#edit-login-register-field-fskill-cover-image-wrapper {
    display: none !important;
}

/* Recovery Email */
#edit-login-register-field-fskill-recovery-email-wrapper {
    display: none !important;
}

/* Make profile private checkbox */
#edit-login-register-field-private-profile-wrapper {
    display: none !important;
}

/* ============================================================
   Clean single-column layout
   ============================================================ */
#fk-pane-new fieldset,
#fk-pane-new .fieldset-wrapper {
    display: block !important;
}

/* ============================================================
   First Name + Last Name side by side
   Exact wrappers confirmed from live DOM inspection
   ============================================================ */
#edit-login-register-field-first-name-wrapper,
#edit-login-register-field-last-name-wrapper {
    display: inline-block !important;
    width: calc(50% - 7px) !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

#edit-login-register-field-first-name-wrapper {
    margin-right: 14px !important;
}

/* Password strength and confirm match — subtle */
.password-strength__title,
.password-strength__indicator,
.password-confirm {
    font-size: 11px !important;
    color: var(--text-tertiary) !important;
}


/* end */