/*
 * Shared styling for the public subscriber module (login/register/plans/
 * checkout/account/history). Scoped to this module only - never touches
 * global theme CSS, so it can't affect ePaper reader/admin styling.
 * Accent color (#2478ff) matches the existing navBar.php "LOGIN" badge and
 * checkout_page.php's gateway-option hover, so the module reads as part of
 * the same site rather than a bolted-on tool.
 */

.sub-module { --sub-accent: #2478ff; --sub-accent-dark: #1a5fd6; --sub-border: #d0d5dd; --sub-border-focus: #2478ff; --sub-text-muted: #667085; --sub-bg-subtle: #f8f9fb; }

.sub-module .sub-shell { padding: 32px 0 56px; }
.sub-module .sub-card { background: #fff; border: 1px solid #e7e9ee; border-radius: 12px; box-shadow: 0 2px 10px rgba(16,24,40,.04); }
.sub-module .sub-card-body { padding: 28px; }
@media (max-width: 576px) { .sub-module .sub-card-body { padding: 20px; } }

.sub-module h1.sub-title, .sub-module h4.sub-title { font-weight: 700; letter-spacing: -.01em; }
.sub-module .sub-subtitle { color: var(--sub-text-muted); }

/* Form fields - explicit, unambiguous box so the border/background is never
   left to inherit from something else on the page. */
.sub-module .form-label { font-weight: 600; font-size: .875rem; color: #344054; margin-bottom: 6px; }
.sub-module .form-control,
.sub-module .form-select {
    display: block;
    width: 100%;
    height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: #101828;
    background-color: #ffffff;
    border: 1.5px solid var(--sub-border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sub-module textarea.form-control { height: auto; }
.sub-module .form-control::placeholder { color: #98a2b3; }
.sub-module .form-control:focus,
.sub-module .form-select:focus {
    border-color: var(--sub-border-focus);
    box-shadow: 0 0 0 3px rgba(36,120,255,.15);
    outline: none;
}
.sub-module .form-control.is-invalid { border-color: #dc3545; }
.sub-module .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.15); }
.sub-module .invalid-feedback { display: block; font-size: .8125rem; color: #dc3545; margin-top: 4px; }
.sub-module .form-hint { font-size: .8125rem; color: var(--sub-text-muted); margin-top: 4px; }

/* Input group (icon prefix and/or password show/hide button) - corner
   rounding is left to Bootstrap's own :first-child/:last-child input-group
   rules rather than hardcoded here, so this same markup works whether a
   field has an icon prefix, a trailing toggle button, both, or neither.
   width:1% + flex:1 1 auto overrides the base ".form-control{width:100%}"
   rule above - without this, the input demands the full row width, which
   (combined with Bootstrap's .input-group flex-wrap: wrap) pushes it onto
   its own line below the icon/toggle instead of sitting beside them. */
.sub-module .input-group .form-control {
    height: 46px;
    width: 1%;
    flex: 1 1 auto;
    min-width: 0;
}
.sub-module .input-group .toggle-password {
    height: 46px;
    border: 1.5px solid var(--sub-border);
    background: #f8f9fb;
    color: #475467;
    padding: 0 14px;
}
.sub-module .input-group .toggle-password:hover { background: #eef1f5; }
.sub-module .input-group > :not(:first-child) { border-left: none; }
.sub-module .input-group:focus-within .form-control,
.sub-module .input-group:focus-within .toggle-password,
.sub-module .input-group:focus-within .input-group-text { border-color: var(--sub-border-focus); }

/* Buttons */
.sub-module .btn-sub-primary {
    background: var(--sub-accent);
    border-color: var(--sub-accent);
    color: #fff;
    font-weight: 600;
    height: 46px;
    border-radius: 8px;
}
.sub-module .btn-sub-primary:hover { background: var(--sub-accent-dark); border-color: var(--sub-accent-dark); color: #fff; }
.sub-module .btn-sub-primary:disabled { opacity: .65; }
.sub-module a.sub-link { color: var(--sub-accent); font-weight: 600; text-decoration: none; }
.sub-module a.sub-link:hover { text-decoration: underline; }

/* Badges */
.sub-module .sub-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.sub-module .sub-badge-success { background: #ecfdf3; color: #027a48; }
.sub-module .sub-badge-danger { background: #fef3f2; color: #b42318; }
.sub-module .sub-badge-secondary { background: #f2f4f7; color: #475467; }
.sub-module .sub-badge-info { background: #eff8ff; color: #175cd3; }

/* Empty states */
.sub-module .sub-empty { text-align: center; padding: 40px 16px; color: var(--sub-text-muted); }
.sub-module .sub-empty i { font-size: 32px; margin-bottom: 10px; display: block; color: #d0d5dd; }

/* Tables -> responsive stacked cards on small screens */
.sub-module .sub-table-wrap { overflow-x: auto; }
.sub-module table.sub-table { width: 100%; margin-bottom: 0; }
.sub-module table.sub-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sub-text-muted); border-bottom: 1px solid #eaecf0; padding: 10px 12px; white-space: nowrap; }
.sub-module table.sub-table td { padding: 12px; vertical-align: middle; border-bottom: 1px solid #f2f4f7; }

/* Gateway option cards (checkout) */
.sub-module .gateway-option { cursor: pointer; transition: border-color .15s, background .15s; border: 1.5px solid #e7e9ee !important; border-radius: 10px; }
.sub-module .gateway-option:hover { border-color: var(--sub-accent) !important; }
.sub-module .gateway-option.active { border-color: var(--sub-accent) !important; background: #f5f9ff; }

/* Tabs */
.sub-module .sub-tabs .nav-link { color: #475467; font-weight: 600; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 4px; margin-right: 24px; }
.sub-module .sub-tabs .nav-link.active { color: var(--sub-accent); border-bottom-color: var(--sub-accent); background: none; }

/* Icon-prefixed inputs (login/register) - same input-group idiom as the
   password toggle above, just mirrored onto the left side. Corner rounding
   is handled by the :first-child/:last-child rules above. */
.sub-module .input-group .input-group-text {
    height: 46px;
    border: 1.5px solid var(--sub-border);
    background: #f8f9fb;
    color: #667085;
    padding: 0 14px;
}

/* Auth split layout (login/register) - illustration side is purely
   decorative CSS (gradient + blurred circles + dot grid), no image asset
   dependency, so it never breaks if a deployment has no custom artwork. */
.sub-module .auth-wrap { max-width: 1400px; margin: 0 auto; }
.sub-module .auth-split { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(16,24,40,.08); background: #fff; }
.sub-module .auth-illustration {
    background: linear-gradient(160deg, #eef4ff 0%, #f7faff 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}
.sub-module .auth-illustration::before,
.sub-module .auth-illustration::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,120,255,.16) 0%, rgba(36,120,255,0) 70%);
}
.sub-module .auth-illustration::before { width: 260px; height: 260px; top: -60px; left: -60px; }
.sub-module .auth-illustration::after { width: 220px; height: 220px; bottom: -50px; right: -50px; }
.sub-module .auth-illustration-dots {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 72px;
    height: 72px;
    background-image: radial-gradient(rgba(36,120,255,.25) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}
.sub-module .auth-illustration-content { position: relative; z-index: 1; }
.sub-module .auth-illustration h2 { font-weight: 700; letter-spacing: -.01em; color: #101828; }
.sub-module .auth-illustration .sub-subtitle a { color: var(--sub-accent); font-weight: 600; text-decoration: none; }
.sub-module .auth-brand-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(16,24,40,.10);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}
.sub-module .auth-brand-card img { max-width: 100%; max-height: 64px; }
.sub-module .auth-feature-list { list-style: none; padding: 0; margin: 20px 0 0; }
.sub-module .auth-feature-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sub-module .auth-feature-list .auth-feature-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e3edff; color: var(--sub-accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.sub-module .auth-feature-list strong { display: block; font-size: .9rem; color: #101828; }
.sub-module .auth-feature-list span { font-size: .8125rem; color: var(--sub-text-muted); }
.sub-module .auth-form-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #eff8ff; color: var(--sub-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

/* Social login buttons */
.sub-module .btn-sub-social {
    height: 46px; border-radius: 8px; border: 1.5px solid var(--sub-border);
    background: #fff; color: #344054; font-weight: 600; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.sub-module .btn-sub-social:hover { background: #f8f9fb; border-color: #98a2b3; color: #344054; }

@media (max-width: 991.98px) {
    .sub-module .auth-illustration { padding: 32px 24px; text-align: center; }
    .sub-module .auth-feature-list li { text-align: left; }
}