/* ===========================
   Phonebook Auth v2 (Scoped)
   =========================== */

/* ---- Design tokens ---- */
.pb-authv2 {
    --pb-max: 560px;
    --pb-gap: clamp(16px, 3vw, 40px);
    --pb-pad-x: clamp(16px, 3vw, 40px);
    --pb-pad-y: clamp(16px, 3.5vh, 40px);
}

/* ---- Layout root (กันค่าธีมเด้ง + กันสกรอลล์) ---- */
.page.pb-authv2 {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100svh;
    min-height: 100svh;
    padding-block: 0 !important;
    padding-inline: clamp(12px, 3vw, 24px) !important;
    overflow: hidden;
}

/* Desktop: 2 คอลัมน์ */
.pb-authv2 .page-content {
    width: 100% !important;
    max-width: none !important;
    animation: none !important;
    height: 100%;
    min-height: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) min(var(--pb-max), 92vw);
    align-items: stretch;
    gap: var(--pb-gap);
}

/* ---- Left column (Brand) ---- */
.pb-authv2 .page-brand-info {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    text-align: center;
}

.pb-authv2 .brand {
    display: flex;
    flex-direction: column;
    /* รูปอยู่บนข้อความ */
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pb-authv2 .brand-img {
    border-radius: 50%;
    width: 88px;
    height: 88px;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
}

.pb-authv2 .brand-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
}

.pb-authv2 .brand-text {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 8px;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, .4);
}

.pb-authv2 .brand-description {
    color: rgba(255, 255, 255, .95);
    font-size: 1.05rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 25px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
}

/* ---- Right column (Login) ----
   5 แถว: [top spacer][header][card][bottom spacer][footer] */
.pb-authv2 .page-login-main {
    margin-left: auto;
    max-width: var(--pb-max);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto auto 1fr auto;
    row-gap: clamp(12px, 2vh, 24px);
    padding: var(--pb-pad-y) var(--pb-pad-x);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

.pb-authv2 .login-header {
    grid-row: 2;
    text-align: center;
    margin-bottom: 20px;
}

.pb-authv2 .thaid-auth-section {
    grid-row: 3;
    width: 100%;
    min-width: 0;
    margin-bottom: 90px;
}

.pb-authv2 .page-copyright {
    grid-row: 5;
    margin-top: 0 !important;
    padding-top: clamp(8px, 2vh, 16px);
    text-align: center;
    color: #6c757d;
    font-size: .8rem;
    border-top: 1px solid #dee2e6;
}

/* Header */
.pb-authv2 .login-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.pb-authv2 .login-description {
    color: #7f8c8d;
    font-size: 1rem;
    margin-bottom: 20px;
}

.pb-authv2 .login-info {
    background: linear-gradient(135deg, #e8f4fd 0%, #f8f9fa 100%);
    border-left: 5px solid #17a2b8;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(23, 162, 184, .1);
    text-align: left;
}

.pb-authv2 .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #495057;
}

.pb-authv2 .info-item:last-child {
    margin-bottom: 0;
}

.pb-authv2 .info-item i {
    color: #17a2b8;
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.pb-authv2 .info-item.special i {
    color: #6f42c1;
}

.pb-authv2 .info-item .text-primary {
    color: #007bff;
    font-weight: 600;
}

/* ThaiD card */
.pb-authv2 .thaiid-card {
    width: 100%;
    background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);
    border: 2px solid #bee5eb;
    border-left: 5px solid #17a2b8;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 15px 35px rgba(23, 162, 184, .15);
    transition: box-shadow .3s, transform .3s;
    margin-bottom: 50px;
}

.pb-authv2 .thaiid-card:hover {
    box-shadow: 0 20px 45px rgba(23, 162, 184, .2);
    transform: translateY(-3px);
}

.pb-authv2 .thaiid-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.pb-authv2 .thaiid-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(23, 162, 184, .3);
    background: linear-gradient(135deg, #17a2b8, #138496);
}

.pb-authv2 .thaiid-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pb-authv2 .thaiid-title h5 {
    margin: 0;
    color: #0c5460;
    font-weight: 600;
    font-size: 1.15rem;
}

.pb-authv2 .thaiid-title p {
    margin: 4px 0 0;
    color: #6c757d;
    font-size: .92rem;
}

.pb-authv2 .thaiid-content {
    margin-top: 18px;
}

/* Button */
.pb-authv2 .thaiid-login-btn {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 18px 22px;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(23, 162, 184, .3);
    transition: transform .2s, box-shadow .2s;
}

.pb-authv2 .thaiid-login-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transform: translateX(-100%);
    transition: transform .6s;
}

.pb-authv2 .thaiid-login-btn:hover::before {
    transform: translateX(100%);
}

.pb-authv2 .thaiid-login-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 15px 35px rgba(23, 162, 184, .4);
}

.pb-authv2 .thaiid-login-btn:active {
    transform: translateY(-1px);
}

.pb-authv2 .thaiid-login-btn .btn-content,
.pb-authv2 .thaiid-login-btn .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pb-authv2 .thaiid-login-btn .btn-loading {
    display: none;
}

.pb-authv2 .thaiid-login-btn.loading .btn-content {
    display: none;
}

.pb-authv2 .thaiid-login-btn.loading .btn-loading {
    display: flex;
}

.pb-authv2 .spin-animation {
    animation: spin 1s linear infinite;
}

.pb-authv2 .thaiid-manual-link {
    text-align: center;
    margin-top: 16px;
}

.pb-authv2 .thaiid-manual-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    color: #2196F3;
    background: rgba(33, 150, 243, .1);
    transition: .2s;
}

.pb-authv2 .thaiid-manual-link a:hover {
    background: #2196F3;
    color: #fff;
    box-shadow: 0 8px 20px rgba(33, 150, 243, .3);
}

/* ---- Animations ---- */
@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

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

/* ===== Responsive ===== */

/* iPad/ต่ำกว่า: ซ่อนซ้าย + โลโก้บนหัวข้อ + กล่องเต็ม viewport */
@media (max-width:1024px) {
    .page.pb-authv2 {
        padding-inline: 0 !important;
    }

    .pb-authv2 .page-content {
        grid-template-columns: 1fr !important;
    }

    .pb-authv2 .page-brand-info {
        display: none !important;
    }

    .pb-authv2 .page-login-main {
        margin: 0 !important;
        max-width: none;
        width: 100vw;
        height: 100svh;
        padding: var(--pb-pad-y) clamp(16px, 4vw, 28px);
        grid-template-rows: 1fr auto auto 1fr auto;
        /* คงกึ่งกลางแนวดิ่ง */
    }

    /* โลโก้หน้า login เฉพาะจอเล็ก */
    .pb-authv2 .login-header::before {
        content: "";
        display: block;
        width: clamp(68px, 10vw, 96px);
        height: clamp(68px, 10vw, 96px);
        margin: 0 auto clamp(14px, 2.2vh, 20px);
        background: url('../theme/assets/images/logo@2x.png') center/contain no-repeat;
        border-radius: 50%;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    }
}

/* Tablet/Mobile: ปรับระยะ */
@media (max-width:768px) {
    .pb-authv2 .page-login-main {
        padding: 24px 16px;
    }

    .pb-authv2 .thaiid-card {
        padding: 22px;
    }
}

@media (max-width:480px) {
    .pb-authv2 .page-login-main {
        padding: 20px 14px;
    }

    .pb-authv2 .login-title {
        font-size: 1.5rem;
    }

    .pb-authv2 .thaiid-login-btn {
        padding: 16px 18px;
        border-radius: 14px;
    }
}

/* iOS Safari fill-available fallback */
@supports (-webkit-touch-callout:none) {

    html,
    body {
        height: 100%;
    }

    .page.pb-authv2 {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

/* เคสหน้าอื่นของธีม */
.page-login-v2 .page-brand-info {
    margin: 0 !important;
}