/* ============================================================
   DDOCTOR — Auth Pages (Login / Register)
   Uses the same design tokens as custom.css (--fs-*, --dd-*)
   ============================================================ */

/* ══ Page Layout ══════════════════════════════════════════ */
.dd-auth-page {
    min-height: calc(100vh - 68px);
    display:    flex;
    background: var(--dd-bg-page);
}

.dd-auth-wrap {
    display:    flex;
    width:      100%;
    min-height: calc(100vh - 68px);
}

/* ══ LEFT PANEL ═══════════════════════════════════════════ */
.dd-auth-left {
    width:       40%;
    flex-shrink: 0;
    background:  linear-gradient(145deg, #051040 0%, #0A1760 40%, #1B2B8C 75%, #2541B2 100%);
    position:    relative;
    overflow:    hidden;
    display:     flex;
    align-items: center;
}
.dd-auth-left::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.dd-auth-left-inner {
    position: relative;
    z-index:  2;
    padding:  3.5rem 2.75rem;
    width:    100%;
}

.dd-auth-brand {
    display:         flex;
    align-items:     center;
    gap:             .65rem;
    text-decoration: none;
    margin-bottom:   2.25rem;
}
.dd-auth-brand .dd-brand-icon {
    width:         44px; height: 44px;
    background:    linear-gradient(135deg, #F59E0B, #F97316);
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #fff;
    font-size:     var(--fs-h4);
}
.dd-auth-brand .dd-brand-name {
    font-size:   var(--fs-h3);
    font-weight: 900;
    color:       #fff;
    letter-spacing: -.02em;
}

.dd-auth-left-title {
    font-size:     var(--fs-h2);
    font-weight:   800;
    color:         #fff;
    line-height:   1.25;
    margin-bottom: .85rem;
}

.dd-auth-left-desc {
    font-size:     var(--fs-sm);
    color:         rgba(255,255,255,.65);
    line-height:   1.7;
    margin-bottom: 2rem;
}

.dd-auth-benefits {
    list-style:    none;
    padding:       0;
    margin:        0 0 2.25rem;
}
.dd-auth-benefits li {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    font-size:     var(--fs-sm);
    color:         rgba(255,255,255,.8);
    margin-bottom: .7rem;
    line-height:   1.5;
}
.dd-auth-benefits li i {
    color:       #4ADE80;
    font-size:   var(--fs-sm);
    margin-top:  .1rem;
    flex-shrink: 0;
}

.dd-auth-stats {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   .75rem;
}
.dd-auth-stat {
    background:    rgba(255,255,255,.07);
    border:        1px solid rgba(255,255,255,.11);
    border-radius: var(--dd-r-md);
    padding:       .9rem .75rem;
    text-align:    center;
    transition:    all .2s;
}
.dd-auth-stat:hover { background: rgba(255,255,255,.12); }
.dd-auth-stat-num {
    display:     block;
    font-size:   var(--fs-h4);
    font-weight: 900;
    color:       #F59E0B;
    line-height: 1;
}
.dd-auth-stat-lbl {
    display:        block;
    font-size:      var(--fs-xxs);
    color:          rgba(255,255,255,.55);
    font-weight:    600;
    margin-top:     .22rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Decorative circles */
.dd-auth-deco-circle {
    position:      absolute;
    border-radius: 50%;
    border:        1.5px solid rgba(255,255,255,.06);
    pointer-events: none;
}
.dd-auth-deco-1 { width: 400px; height: 400px; top: -150px; right: -150px; }
.dd-auth-deco-2 { width: 260px; height: 260px; bottom: -100px; left: -90px; }


/* ══ RIGHT PANEL ══════════════════════════════════════════ */
.dd-auth-right {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3rem 4rem;
    background:      var(--dd-bg-page);
    overflow-y:      auto;
}

.dd-auth-form-wrap {
    width:     100%;
 
}

.dd-auth-back {
    display:         inline-flex;
    align-items:     center;
    gap:             .45rem;
    font-size:       var(--fs-xxs);
    font-weight:     600;
    color:           var(--dd-text-muted);
    text-decoration: none;
    margin-bottom:   2rem;
    transition:      color .15s;
}
.dd-auth-back:hover { color: var(--dd-primary); text-decoration: none; }

.dd-auth-form-header { margin-bottom: 1.75rem; }
.dd-auth-form-title {
    font-size:     var(--fs-h2);
    font-weight:   800;
    color:         var(--dd-text-dark);
    margin-bottom: .3rem;
    line-height:   1.2;
}
.dd-auth-form-sub {
    font-size: var(--fs-sm);
    color:     var(--dd-text-muted);
    margin:    0;
}

/* ── Step Indicator ─────────────────────────────────────── */
.dd-auth-steps {
    display:       flex;
    align-items:   center;
    margin-bottom: 2rem;
    gap:           0;
}
.dd-auth-step {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-shrink: 0;
}
.dd-step-dot {
    width:         30px; height: 30px;
    border-radius: 50%;
    border:        2px solid var(--dd-border);
    background:    #fff;
    color:         var(--dd-text-muted);
    font-size:     var(--fs-xxs);
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all .2s;
}
.dd-auth-step span {
    font-size:  var(--fs-xxs);
    font-weight: 600;
    color:      var(--dd-text-muted);
    white-space: nowrap;
    transition: color .2s;
}
.dd-step-line {
    flex:       1;
    height:     2px;
    background: var(--dd-border);
    margin:     0 .6rem;
    border-radius: 2px;
    min-width:  28px;
}
.dd-step-active .dd-step-dot {
    background:   var(--dd-primary);
    border-color: var(--dd-primary);
    color:        #fff;
    box-shadow:   0 0 0 4px rgba(27,43,140,.15);
}
.dd-step-active span { color: var(--dd-primary); font-weight: 700; }
.dd-step-done .dd-step-dot {
    background:   #22C55E;
    border-color: #22C55E;
    color:        #fff;
    font-size:    .65rem;
}
.dd-step-done span { color: #22C55E; }

/* ── Account Type Cards ─────────────────────────────────── */
.dd-step-instruction {
    font-size:   var(--fs-sm);
    color:       var(--dd-text-muted);
    margin-bottom: 1.1rem;
}

.dd-type-grid-lg {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   .85rem;
    margin-bottom:         1.75rem;
}

.dd-type-card-lg { cursor: pointer; margin: 0; display: block; }
.dd-type-card-lg input[type="radio"] { display: none; }

.dd-type-card-lg-inner {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       1rem 1.1rem;
    border:        1.5px solid var(--dd-border);
    border-radius: var(--dd-r-md);
    background:    #fff;
    transition:    all .18s;
    position:      relative;
    box-shadow:    var(--dd-shadow-xs);
}
.dd-type-card-lg:hover .dd-type-card-lg-inner {
    border-color: var(--dd-primary-light);
    background:   var(--dd-bg-subtle);
    box-shadow:   var(--dd-shadow-sm);
}
.dd-type-card-selected .dd-type-card-lg-inner {
    border-color: var(--dd-primary);
    background:   var(--dd-bg-subtle);
    box-shadow:   0 0 0 3px rgba(27,43,140,.12);
}

.dd-type-icon {
    width:         50px; height: 50px;
    border-radius: var(--dd-r-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     var(--fs-h3);
    flex-shrink:   0;
}
.dd-type-info { flex: 1; }
.dd-type-info strong {
    display:     block;
    font-size:   var(--fs-sm);
    font-weight: 700;
    color:       var(--dd-text-dark);
    margin-bottom: .1rem;
}
.dd-type-info span {
    font-size:   var(--fs-xxs);
    color:       var(--dd-text-muted);
    line-height: 1.4;
}
.dd-type-check {
    width:         24px; height: 24px;
    border-radius: 50%;
    border:        1.5px solid var(--dd-border);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     .65rem;
    color:         transparent;
    flex-shrink:   0;
    transition:    all .18s;
}
.dd-type-card-selected .dd-type-check {
    background:   var(--dd-primary);
    border-color: var(--dd-primary);
    color:        #fff;
}

/* ── Form Fields ─────────────────────────────────────────── */
.dd-auth-field { margin-bottom: 1.2rem; }

.dd-auth-label {
    display:       flex;
    align-items:   center;
    gap:           .38rem;
    font-size:     var(--fs-xxs);
    font-weight:   700;
    color:         var(--dd-text-base);
    margin-bottom: .5rem;
}
.dd-auth-label i { color: var(--dd-primary-light); font-size: var(--fs-xxs); }

.dd-auth-input {
    width:         100%;
    padding:       .8rem 1.15rem;
    border:        1.5px solid var(--dd-border);
    border-radius: var(--dd-r-md);
    font-family:   var(--font-base);
    font-size:     var(--fs-sm);
    color:         var(--dd-text-base);
    background:    #fff;
    transition:    all .18s;
    outline:       none;
    box-shadow:    var(--dd-shadow-xs);
}
.dd-auth-input:focus {
    border-color: var(--dd-primary-light);
    box-shadow:   0 0 0 3.5px rgba(58,86,212,.12);
}
.dd-auth-input::placeholder { color: var(--dd-text-light); }

/* Phone wrap */
.dd-auth-phone-wrap {
    display:     flex;
    align-items: stretch;
    border:      1.5px solid var(--dd-border);
    border-radius: var(--dd-r-md);
    overflow:    hidden;
    background:  #fff;
    box-shadow:  var(--dd-shadow-xs);
    transition:  border-color .18s, box-shadow .18s;
}
.dd-auth-phone-wrap:focus-within {
    border-color: var(--dd-primary-light);
    box-shadow:   0 0 0 3.5px rgba(58,86,212,.12);
}
.dd-phone-prefix {
    padding:      .8rem 1.1rem;
    font-size:    var(--fs-xxs);
    font-weight:  700;
    color:        var(--dd-text-base);
    border-right: 1.5px solid var(--dd-border);
    background:   var(--dd-bg-subtle);
    white-space:  nowrap;
    display:      flex;
    align-items:  center;
    user-select:  none;
}
.dd-auth-input-phone {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
    padding: .8rem 1rem;
}
.dd-auth-input-phone:focus { box-shadow: none !important; }

/* Password wrap */
.dd-auth-pw-wrap { position: relative; }
.dd-auth-pw-wrap .dd-auth-input { padding-right: 3.2rem; }
.dd-pw-toggle {
    position:   absolute;
    right:      .9rem;
    top:        50%;
    transform:  translateY(-50%);
    border:     none;
    background: transparent;
    color:      var(--dd-text-muted);
    cursor:     pointer;
    font-size:  var(--fs-sm);
    padding:    0;
    line-height: 1;
    transition: color .15s;
}
.dd-pw-toggle:hover { color: var(--dd-primary); }

/* Password Strength */
.dd-pw-strength {
    height:        4px;
    background:    var(--dd-border);
    border-radius: 2px;
    margin-top:    .5rem;
    overflow:      hidden;
}
.dd-pw-bar {
    height:        100%;
    width:         0%;
    border-radius: 2px;
    transition:    width .3s, background .3s;
}
.dd-pw-hint {
    font-size:   var(--fs-micro);
    font-weight: 600;
    display:     block;
    margin-top:  .22rem;
}

/* Forgot link */
.dd-forgot-link {
    font-size:       var(--fs-xxs);
    font-weight:     600;
    color:           var(--dd-primary-mid);
    text-decoration: none;
    transition:      .15s;
    margin-bottom:   .5rem;
    display:         block;
}
.dd-forgot-link:hover { text-decoration: underline; color: var(--dd-primary); }

/* Remember me */
.dd-auth-remember { margin-bottom: 1.35rem; }

/* ── Social Login ────────────────────────────────────────── */
.dd-social-login {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           .85rem;
    margin-bottom: 1.35rem;
}
.dd-social-btn-google,
.dd-social-btn-phone {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .55rem;
    padding:         .78rem 1rem;
    border-radius:   var(--dd-r-md);
    font-family:     var(--font-base);
    font-size:       var(--fs-xxs);
    font-weight:     600;
    cursor:          pointer;
    transition:      all .18s;
    white-space:     nowrap;
    box-shadow:      var(--dd-shadow-xs);
}
.dd-social-btn-google {
    border:     1.5px solid var(--dd-border);
    background: #fff;
    color:      var(--dd-text-base);
}
.dd-social-btn-google:hover {
    border-color: #EA4335;
    background:   #FFF8F7;
    box-shadow:   0 2px 10px rgba(234,67,53,.12);
}
.dd-social-btn-phone {
    border:     1.5px solid var(--dd-border);
    background: #fff;
    color:      var(--dd-text-base);
}
.dd-social-btn-phone:hover {
    border-color: var(--dd-primary-light);
    background:   var(--dd-bg-subtle);
}

/* Divider */
.dd-divider {
    display:        flex;
    align-items:    center;
    gap:            .85rem;
    margin:         1.35rem 0;
    color:          var(--dd-text-light);
    font-size:      var(--fs-micro);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.dd-divider::before,
.dd-divider::after {
    content:    '';
    flex:       1;
    height:     1.5px;
    background: var(--dd-border);
}

/* ── Review Box ─────────────────────────────────────────── */
.dd-review-box {
    background:    var(--dd-bg-subtle);
    border:        1.5px solid var(--dd-border-blue);
    border-radius: var(--dd-r-md);
    padding:       1.35rem 1.5rem;
    margin-bottom: 1.35rem;
}
.dd-review-title {
    font-size:     var(--fs-sm);
    font-weight:   700;
    color:         var(--dd-primary);
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1.5px solid var(--dd-border-blue);
}
.dd-review-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         .55rem 0;
    border-bottom:   1px solid var(--dd-border);
    gap:             1rem;
}
.dd-review-row:last-child { border-bottom: none; }
.dd-review-lbl {
    font-size:   var(--fs-xxs);
    font-weight: 600;
    color:       var(--dd-text-muted);
}
.dd-review-val {
    font-size:   var(--fs-sm);
    font-weight: 700;
    color:       var(--dd-text-dark);
    text-align:  right;
}

/* ── Terms ──────────────────────────────────────────────── */
.dd-auth-terms { margin-bottom: 1.35rem; }
.dd-terms-check {
    display:     flex;
    align-items: flex-start;
    gap:         .6rem;
    cursor:      pointer;
    font-size:   var(--fs-xxs);
    color:       var(--dd-text-muted);
    line-height: 1.55;
}
.dd-terms-check input[type="checkbox"] {
    width:       17px; height: 17px;
    flex-shrink: 0;
    margin-top:  .1rem;
    accent-color: var(--dd-primary);
    cursor:      pointer;
}
.dd-terms-check a {
    color:       var(--dd-primary);
    font-weight: 600;
    text-decoration: none;
}
.dd-terms-check a:hover { text-decoration: underline; }

/* ── Buttons ─────────────────────────────────────────────── */
.dd-auth-row-btns {
    display:    flex;
    gap:        .85rem;
    margin-top: .6rem;
}
.dd-auth-btn-next {
    flex:          1;
    padding:       .88rem 1.5rem;
    border:        none;
    border-radius: var(--dd-r-md);
    background:    linear-gradient(90deg, var(--dd-primary), var(--dd-primary-mid));
    color:         #fff;
    font-family:   var(--font-base);
    font-size:     var(--fs-sm);
    font-weight:   700;
    cursor:        pointer;
    transition:    all .2s;
    box-shadow:    0 4px 14px rgba(27,43,140,.28);
}
.dd-auth-btn-next:hover {
    filter:     brightness(1.1);
    transform:  translateY(-1px);
    box-shadow: 0 6px 18px rgba(27,43,140,.38);
}
.dd-auth-btn-back {
    padding:       .88rem 1.35rem;
    border:        1.5px solid var(--dd-border);
    border-radius: var(--dd-r-md);
    background:    #fff;
    color:         var(--dd-text-muted);
    font-family:   var(--font-base);
    font-size:     var(--fs-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    all .2s;
    box-shadow:    var(--dd-shadow-xs);
}
.dd-auth-btn-back:hover {
    border-color: var(--dd-primary-light);
    color:        var(--dd-primary);
    background:   var(--dd-bg-subtle);
}
.dd-auth-btn-submit {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .45rem;
    padding:         .92rem 1.5rem;
    border:          none;
    border-radius:   var(--dd-r-md);
    background:      linear-gradient(90deg, var(--dd-primary), var(--dd-primary-mid));
    color:           #fff;
    font-family:     var(--font-base);
    font-size:       var(--fs-sm);
    font-weight:     800;
    cursor:          pointer;
    transition:      all .2s;
    box-shadow:      0 4px 14px rgba(27,43,140,.28);
    text-decoration: none;
    width:           100%;
}
.dd-auth-btn-submit:hover {
    filter:     brightness(1.1);
    transform:  translateY(-1px);
    box-shadow: 0 6px 18px rgba(27,43,140,.38);
    color:      #fff;
}
.dd-auth-btn-submit:disabled {
    opacity:   .7;
    transform: none;
    cursor:    not-allowed;
}

.dd-auth-switch {
    text-align:    center;
    font-size:     var(--fs-xxs);
    color:         var(--dd-text-muted);
    margin-top:    1rem;
    margin-bottom: .3rem;
}
.dd-auth-switch a {
    color:           var(--dd-primary);
    font-weight:     700;
    text-decoration: none;
}
.dd-auth-switch a:hover { text-decoration: underline; }


/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .dd-auth-right { padding: 2.5rem 3rem; }
}

@media (max-width: 991.98px) {
    .dd-auth-left  { width: 42%; }
    .dd-auth-right { padding: 2rem 2rem; }
    .dd-auth-left-inner { padding: 2.5rem 2rem; }
    .dd-auth-left-title { font-size: var(--fs-h3); }
}

@media (max-width: 767.98px) {
    .dd-auth-wrap { flex-direction: column; }
    .dd-auth-left { width: 100%; }
    .dd-auth-left-inner { padding: 2rem 1.5rem; }
    .dd-auth-left-title { font-size: var(--fs-h3); margin-bottom: .6rem; }
    .dd-auth-left-desc  { display: none; }
    .dd-auth-benefits   { display: none; }
    .dd-auth-stats { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
    .dd-auth-stat-num { font-size: var(--fs-sm); }
    .dd-auth-right { padding: 2rem 1.5rem; }
    .dd-auth-form-wrap { max-width: 100%; }
}

@media (max-width: 575.98px) {
    .dd-auth-stats { grid-template-columns: repeat(2, 1fr); }
    .dd-type-grid-lg { grid-template-columns: 1fr; }
    .dd-social-login { grid-template-columns: 1fr; }
    .dd-auth-form-title { font-size: var(--fs-h3); }
    .dd-auth-steps { display: none; }
    .dd-auth-right { padding: 1.5rem 1.25rem; }
}