/*
 * 後台與登入頁品牌樣式
 * 由 functions.php 的 my_theme_admin_custom_branding() 內嵌樣式抽出，內容未改動。
 */
/* 隱藏WordPress相關品牌元素 */
        .wp-admin #wpbody-content .wrap h1:first-child:before,
        .wp-admin #wpbody-content .wrap h2:first-child:before {
            display: none !important;
        }
        
        /* 自定義後台標題樣式 */
        .wp-admin #wpbody-content .wrap h1 {
            font-size: 23px;
            font-weight: 400;
            margin: 0 0 20px 0;
            padding: 9px 0 4px 0;
            line-height: 1.3;
        }
        
        /* 移除WordPress默認的圖標 */
        .wp-admin #wpbody-content .wrap h1:before {
            content: none !important;
        }
        
        /* 防止水平滾動 - 全域設定 */
        html {
            overflow-x: hidden !important;
        }
        
        /* 自定義登入頁面樣式 */
        body.login {
            background-image: url(http://tiancom.local/wp-content/themes/my-theme/assets/images/15190%201.png) !important;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed !important;
            background-color: #f1f1f1 !important;
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* === Login UI（對齊設計稿/截圖）=== */
        body.login {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 8vw 40px 8vw;
            box-sizing: border-box;
            gap: 64px;
            position: relative;
        }

        /* 包裹容器：讓 LOGO 在登入卡片正上方 */
        body.login .my-login-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        /* LOGO 在登入卡片外上方 */
        body.login .my-login-logo {
            display: block;
            text-align: center;
            margin-bottom: 32px;
            max-width: 100%;
        }
        body.login .my-login-logo a {
            display: inline-block;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }
        body.login .my-login-logo a:hover {
            opacity: 0.8;
        }
        body.login .my-login-logo img {
            max-width: 320px;
            width: auto;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        body.login div#login {
            width: min(720px, calc(100% - 32px));
            max-width: 100%;
            padding: 56px 48px 44px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 28px;
            box-shadow: 0 16px 40px rgba(0,0,0,0.18);
            box-sizing: border-box;
        }
        
        /* 確保所有子元素不超出 */
        body.login * {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* 隱藏 WP 預設 logo，改用標題 */
        body.login #login h1 {
            display: none !important;
        }

        body.login #login:before {
            content: "會員登入";
            display: block;
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            color: #2d67a8;
            letter-spacing: 0.08em;
            margin: 0 0 42px 0;
        }

        body.login #loginform {
            margin-top: 0;
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        body.login #loginform p {
            margin: 0 0 22px 0;
        }

        body.login #loginform label {
            display: block;
            margin: 0 0 12px 0;
            font-size: 18px;
            font-weight: 700;
            color: #2d67a8;
        }

        body.login #loginform input[type="text"],
        body.login #loginform input[type="password"],
        body.login #loginform input[type="email"] {
            width: 100%;
            height: 52px;
            padding: 0 16px;
            border-radius: 12px;
            border: 1px solid #e6e6e6;
            background: #fff;
            color: #333;
            font-size: 16px;
            box-shadow: none;
            box-sizing: border-box;
        }

        body.login #loginform input[type="text"]:focus,
        body.login #loginform input[type="password"]:focus,
        body.login #loginform input[type="email"]:focus {
            border-color: rgba(45,103,168,0.55);
            box-shadow: 0 0 0 4px rgba(45,103,168,0.12);
            outline: none;
        }

        body.login #loginform input::placeholder {
            color: #bdbdbd;
        }

        /* 記住我 */
        body.login #loginform .forgetmenot {
            float: left;
            margin: 0;
        }
        body.login #loginform .forgetmenot label {
            margin: 0;
            font-size: 13px;
            font-weight: 500;
            color: #3b78b5;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        body.login #loginform .forgetmenot input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin: 0;
        }

        /* 忘記密碼 + 立即註冊：同一行（左：註冊 / 右：忘記密碼） */
        body.login #nav {
            margin: 12px 0 0 0;
            padding: 0;
            font-size: 13px;
            clear: both;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        body.login #nav .my-login-register-inline {
            color: #666;
            font-size: 13px;
            white-space: nowrap;
        }
        body.login #nav .my-login-register-inline a {
            color: #2d67a8 !important;
            text-decoration: none;
            font-weight: 700;
        }
        body.login #nav .my-login-register-inline a:hover {
            text-decoration: underline;
        }
        body.login #nav .my-login-or-inline {
            margin-left: 10px;
            color: #999;
        }
        body.login #nav .my-login-lostpw {
            margin-left: auto;
            white-space: nowrap;
        }
        body.login #nav a {
            color: #666 !important;
            text-decoration: none;
        }
        body.login #nav a:hover {
            color: #2d67a8 !important;
            text-decoration: underline;
        }
        body.login #loginform:after {
            content: "";
            display: block;
            clear: both;
        }

        /* 登入按鈕 */
        body.login #loginform p.submit {
            margin-top: 26px;
            margin-bottom: 0;
        }
        body.login #wp-submit {
            width: 100%;
            height: 56px;
            border-radius: 999px;
            border: 0;
            background: #2d67a8;
            box-shadow: none;
            text-shadow: none;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.12em;
        }
        body.login #wp-submit:hover {
            background: #255a92;
        }

        /* 左側：立即註冊（截圖位置） */
        body.login .my-login-side {
            display: none !important; /* 已改為與忘記密碼同一行，不再使用左側區塊 */
            max-width: 320px;
            color: #666;
            font-size: 14px;
            position: absolute;
            left: 6vw;
            top: 50%;
            transform: translateY(-50%);
        }
        body.login .my-login-side-row {
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
        }
        body.login .my-login-side a {
            color: #2d67a8;
            text-decoration: none;
            font-weight: 700;
        }
        body.login .my-login-side a:hover {
            text-decoration: underline;
        }
        body.login .my-login-side-or {
            margin-left: 14px;
            color: #999;
            font-size: 13px;
        }

        /* 卡片內：分隔線 + 社群按鈕 */
        body.login .my-login-divider {
            margin: 26px 0 18px 0;
            display: flex;
            align-items: center;
            gap: 14px;
            color: #999;
            font-size: 12px;
        }
        body.login .my-login-divider:before,
        body.login .my-login-divider:after {
            content: "";
            height: 1px;
            background: #d9d9d9;
            flex: 1;
        }
        body.login .my-login-divider span {
            padding: 0 2px;
        }

        body.login .my-login-social {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: nowrap; /* 三個按鈕保持同一行 */
        }
        body.login .my-social-btn {
            height: 42px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid #e6e6e6;
            background: #fff;
            color: #2d67a8;
            font-size: 12.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            box-shadow: 0 6px 14px rgba(0,0,0,0.10);
            white-space: nowrap;
        }
        body.login .my-social-btn:hover {
            box-shadow: 0 8px 18px rgba(0,0,0,0.14);
            transform: translateY(-1px);
        }
        body.login .my-social-icon {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Modal */
        body.login .my-login-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            z-index: 999999;
        }
        body.login .my-login-modal.is-open {
            display: flex;
        }
        body.login .my-login-modal-card {
            width: min(420px, 100%);
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 18px 44px rgba(0,0,0,0.28);
            padding: 18px 18px 16px;
        }
        body.login .my-login-modal-title {
            font-size: 16px;
            font-weight: 800;
            color: #2d67a8;
            margin: 4px 0 10px 0;
        }
        body.login .my-login-modal-body {
            font-size: 14px;
            color: #333;
            margin: 0 0 14px 0;
        }
        body.login .my-login-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        body.login .my-login-modal-close {
            height: 36px;
            padding: 0 14px;
            border-radius: 999px;
            border: 0;
            background: #2d67a8;
            color: #fff;
            font-weight: 700;
            cursor: pointer;
        }

        /* 隱藏不在設計稿中的元素 */
        body.login #backtoblog,
        body.login .language-switcher,
        body.login #language-switcher,
        body.login .privacy-policy-page-link {
            display: none !important;
        }

        /* 若外掛自動插入社群登入，先整段隱藏（之後要加再解鎖） */
        body.login .nsl-container,
        body.login .nsl-container-block,
        body.login .wp-social-login-widget,
        body.login .nextend-social-login {
            display: none !important;
        }

        /* 隱藏 WP 預設 register link（避免重複） */
        body.login #nav a[href*="action=register"] {
            display: none !important;
        }

        /* === 行動裝置：等比例縮小，維持相同排版比例 === */
        @media (max-width: 768px) {
            html, body.login {
                overflow-x: hidden !important;
                max-width: 100vw !important;
            }
            body.login {
                padding: 20px 12px;
                min-height: 100vh;
                min-height: 100dvh; /* 動態視口高度 */
            }
            
            /* LOGO 等比例縮小 */
            body.login .my-login-logo {
                margin-bottom: 16px;
                max-width: 100%;
            }
            body.login .my-login-logo img {
                max-width: 160px; /* 再縮小 */
            }
            
            /* 登入卡片等比例縮小 */
            body.login div#login {
                width: calc(100% - 24px);
                max-width: 380px; /* 縮小卡片最大寬度 */
                overflow: hidden; /* 防止內容溢出 */
                padding: 28px 20px 24px;
                border-radius: 18px;
            }
            
            /* 標題等比例縮小 */
            body.login #login:before {
                font-size: 20px;
                margin-bottom: 24px;
            }
            
            /* 欄位標籤等比例縮小 */
            body.login #loginform label {
                font-size: 14px;
                margin-bottom: 6px;
            }
            
            body.login #loginform p {
                margin-bottom: 16px;
            }
            
            /* 輸入框等比例縮小 */
            body.login #loginform input[type="text"],
            body.login #loginform input[type="password"],
            body.login #loginform input[type="email"] {
                height: 40px;
                padding: 0 12px;
                border-radius: 8px;
                font-size: 14px;
            }
            
            /* 登入按鈕等比例縮小 */
            body.login #loginform p.submit {
                margin-top: 20px;
            }
            body.login #wp-submit {
                height: 44px;
                font-size: 15px;
            }
            
            /* 記住我 / 忘記密碼 / 立即註冊 */
            body.login #loginform .forgetmenot label {
                font-size: 11px;
                gap: 6px;
            }
            body.login #loginform .forgetmenot input[type="checkbox"] {
                width: 12px;
                height: 12px;
            }
            body.login #nav {
                font-size: 11px;
                gap: 8px;
                margin-top: 10px;
            }
            body.login #nav .my-login-register-inline {
                font-size: 11px;
            }
            body.login #nav .my-login-or-inline {
                margin-left: 6px;
            }
            
            /* 分隔線 */
            body.login .my-login-divider {
                margin: 16px 0 12px 0;
                font-size: 10px;
                gap: 10px;
            }
            
            /* 社群按鈕等比例縮小，保持同一行 */
            body.login .my-login-social {
                gap: 6px;
                flex-wrap: nowrap; /* 保持同一行 */
            }
            body.login .my-social-btn {
                height: 32px;
                padding: 0 8px;
                font-size: 10px;
                gap: 4px;
                box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            }
            body.login .my-social-icon {
                width: 14px;
                height: 14px;
            }
            body.login .my-social-icon svg {
                width: 14px;
                height: 14px;
            }
            
            /* 隱藏左側區塊 */
            body.login .my-login-side {
                display: none !important;
            }
        }
        
        /* === 超小螢幕：進一步縮小 === */
        @media (max-width: 380px) {
            body.login {
                padding: 16px 8px;
            }
            
            body.login .my-login-logo {
                margin-bottom: 12px;
            }
            body.login .my-login-logo img {
                max-width: 140px;
            }
            
            body.login div#login {
                width: calc(100% - 16px);
                max-width: none; /* 讓寬度自適應 */
                padding: 24px 16px 20px;
                border-radius: 14px;
            }
            
            /* 社群按鈕在超小螢幕允許換行 */
            body.login .my-login-social {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            body.login #login:before {
                font-size: 18px;
                margin-bottom: 20px;
            }
            
            body.login #loginform label {
                font-size: 13px;
            }
            
            body.login #loginform p {
                margin-bottom: 14px;
            }
            
            body.login #loginform input[type="text"],
            body.login #loginform input[type="password"],
            body.login #loginform input[type="email"] {
                height: 36px;
                font-size: 13px;
                padding: 0 10px;
            }
            
            body.login #loginform p.submit {
                margin-top: 16px;
            }
            body.login #wp-submit {
                height: 40px;
                font-size: 14px;
            }
            
            body.login #loginform .forgetmenot label {
                font-size: 10px;
            }
            body.login #nav {
                font-size: 10px;
                gap: 6px;
            }
            body.login #nav .my-login-register-inline {
                font-size: 10px;
            }
            
            body.login .my-login-divider {
                margin: 14px 0 10px 0;
                font-size: 9px;
            }
            
            /* 社群按鈕更小，但仍保持同一行 */
            body.login .my-login-social {
                gap: 4px;
            }
            body.login .my-social-btn {
                height: 28px;
                padding: 0 6px;
                font-size: 9px;
                gap: 3px;
            }
            body.login .my-social-icon {
                width: 12px;
                height: 12px;
            }
            body.login .my-social-icon svg {
                width: 12px;
                height: 12px;
            }
        }

        .login h1 a {
            background-image: url(http://tiancom.local/wp-content/themes/my-theme/assets/images/wpdb_logo.webp) !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            width: 320px !important;
            height: 80px !important;
        }
        
        /* 移除登入頁面的"Powered by WordPress" */
        .login #nav,
        .login #backtoblog {
            text-align: center;
        }
        
        .login #nav a,
        .login #backtoblog a {
            color: #666 !important;
            text-decoration: none;
        }
        
        .login #nav a:hover,
        .login #backtoblog a:hover {
            color: #0073aa !important;
        }