/* ============================================================
   BOUYIN GIFT CARD CO — B2B PORTAL STYLESHEET
   Brand palette (matches /portal-purchase/, 29 Jul 2026 restyle):
     Dark bg:      #292929
     Gold CTA:     #e8c97e
     Gold hover:   #d4b565
     Text on gold: #1a1a2e
     White:        #ffffff
     Light bg:     #f7f7f7
     Border:       #e2e2e2
     Text:         #1a1a1a
     Muted text:   #666666
     Success:      #27ae60
     Error/Danger: #c0392b   (reserved for alerts, failed status, log-out —
                              not used decoratively anymore)
   ============================================================ */

/* ---- WRAPPER ---- */
.bouyin-portal-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1a1a1a;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* ---- NAV BAR ---- */
.bouyin-nav {
    background: #292929;
    padding: 0 24px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: -20px;
    margin-right: -20px;
}
.bouyin-nav__logo {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 2px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 18px 0;
    text-decoration: none;
}
.bouyin-nav__logo span {
    color: #e8c97e;
}
.bouyin-nav__links {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 0;
}
.bouyin-nav__links a {
    color: #cccccc;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.bouyin-nav__links a:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}
.bouyin-nav__links .sep {
    color: #444;
    font-size: 12px;
}
.bouyin-nav__user {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    padding: 6px 14px;
    border-radius: 20px;
}

/* ---- PAGE HEADER ---- */
.bouyin-page-header {
    margin-bottom: 32px;
}
.bouyin-page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px 0;
}
.bouyin-page-header p {
    font-size: 15px;
    color: #666;
    margin: 0;
}

/* ---- ALERTS ---- */
.bouyin-alert {
    padding: 14px 18px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    border-left: 4px solid transparent;
}
.bouyin-alert--success {
    background: #eaf7ef;
    border-color: #27ae60;
    color: #1a7a40;
}
.bouyin-alert--error {
    background: #fdecea;
    border-color: #c0392b;
    color: #922b21;
}
.bouyin-alert--warning {
    background: #fdf3e3;
    border-color: #e67e22;
    color: #a04000;
}
.bouyin-alert ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

/* ---- STAT BANNER ---- */
.bouyin-stat-banner {
    background: #292929;
    color: #ffffff;
    padding: 24px 28px;
    border-radius: 6px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.bouyin-stat-banner__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #aaa;
    font-weight: 600;
    margin-bottom: 6px;
}
.bouyin-stat-banner__value {
    font-size: 42px;
    font-weight: 800;
    color: #e8c97e;
    line-height: 1;
}
.bouyin-stat-banner__icon {
    opacity: 0.15;
    color: #ffffff;
}
.bouyin-stat-banner__icon svg {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
}

/* ---- TILE GRID ---- */
.bouyin-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.bouyin-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 24px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.bouyin-tile:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.bouyin-tile__icon {
    width: 40px;
    height: 40px;
    background: #292929;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bouyin-tile__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
}
.bouyin-tile h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.bouyin-tile p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* ---- CARDS / PANELS ---- */
.bouyin-card {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 28px 30px;
    margin-bottom: 24px;
}
.bouyin-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e2e2;
}

/* ---- FORMS ---- */
.bouyin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}
.bouyin-form-group {
    display: flex;
    flex-direction: column;
}
.bouyin-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.bouyin-form-group input,
.bouyin-form-group select,
.bouyin-form-group textarea {
    padding: 10px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    color: #1a1a1a;
    background: #ffffff;
    transition: border-color 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.bouyin-form-group input:focus,
.bouyin-form-group select:focus,
.bouyin-form-group textarea:focus {
    outline: none;
    border-color: #292929;
}
.bouyin-form-group input:disabled,
.bouyin-form-group input[readonly] {
    background: #f7f7f7;
    color: #999;
    cursor: not-allowed;
}
.bouyin-required {
    color: #c0392b;
}
.bouyin-field-hint {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* ---- SECTION DIVIDER ---- */
.bouyin-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #292929;
    display: inline-block;
}

/* ---- BUTTONS ---- */
.bouyin-btn {
    display: inline-block;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.bouyin-btn--primary {
    background: #e8c97e;
    color: #1a1a2e;
}
.bouyin-btn--primary:hover {
    background: #d4b565;
}
.bouyin-btn--dark {
    background: #292929;
    color: #ffffff;
}
.bouyin-btn--dark:hover {
    background: #111;
    color: #ffffff;
}
.bouyin-btn--outline {
    background: transparent;
    color: #292929;
    border: 1px solid #292929;
}
.bouyin-btn--outline:hover {
    background: #292929;
    color: #ffffff;
}

/* ---- TABLE ---- */
.bouyin-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
}
.bouyin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}
.bouyin-table thead tr {
    background: #f7f7f7;
    border-bottom: 1px solid #e2e2e2;
}
.bouyin-table thead th {
    padding: 13px 16px;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
    white-space: nowrap;
}
.bouyin-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}
.bouyin-table tbody tr:last-child {
    border-bottom: none;
}
.bouyin-table tbody td {
    padding: 13px 16px;
    color: #1a1a1a;
    vertical-align: middle;
}

/* ---- STATUS BADGES ---- */
.bouyin-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.bouyin-badge--fulfilled { background: #eaf7ef; color: #1a7a40; }
.bouyin-badge--processing { background: #e8f0fe; color: #1a56b0; }
.bouyin-badge--pending { background: #fdf3e3; color: #a04000; }
.bouyin-badge--failed { background: #fdecea; color: #922b21; }

/* ---- EMPTY STATE ---- */
.bouyin-empty {
    background: #f7f7f7;
    border: 2px dashed #d4d4d4;
    border-radius: 6px;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 24px;
}
.bouyin-empty h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}
.bouyin-empty p {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
}

/* ---- LOGIN / REGISTER CENTERED FORMS ---- */
.bouyin-auth-wrap {
    max-width: 480px;
    margin: 40px auto 60px;
    padding: 0 20px;
}
.bouyin-auth-wrap--wide {
    max-width: 860px;
}
.bouyin-auth-card {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 36px 40px;
}
.bouyin-auth-logo {
    text-align: center;
    margin-bottom: 28px;
}
.bouyin-auth-logo__wordmark {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #292929;
}
.bouyin-auth-logo__wordmark span {
    color: #e8c97e;
}
.bouyin-auth-logo__sub {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.bouyin-auth-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 24px 0;
}
.bouyin-auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #666;
}
.bouyin-auth-footer a {
    color: #e8c97e;
    font-weight: 600;
    text-decoration: none;
}
.bouyin-auth-footer a:hover {
    text-decoration: underline;
}
.bouyin-form-group--full {
    grid-column: 1 / -1;
}

/* ---- PENDING PAGE ---- */
.bouyin-pending-wrap {
    max-width: 560px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}
.bouyin-pending-wrap h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}
.bouyin-pending-wrap p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
}
.bouyin-pending-icon {
    width: 64px;
    height: 64px;
    background: rgba(232,201,126,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border: 2px solid #e8c97e;
}
.bouyin-pending-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #e8c97e;
    stroke-width: 1.6;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 640px) {
    .bouyin-auth-card {
        padding: 24px 20px;
    }
    .bouyin-nav {
        gap: 0;
    }
    .bouyin-nav__logo {
        width: 100%;
        padding: 16px 0 8px;
    }
    .bouyin-nav__links {
        width: 100%;
        padding: 8px 0 12px;
        gap: 4px;
    }
    .bouyin-nav__user {
        display: none;
    }
    .bouyin-page-header h1 {
        font-size: 22px;
    }
    .bouyin-stat-banner__icon {
        display: none;
    }
}

/* ── Page-embedded form styles (register/login inside Elementor page) ─────── */
.bouyin-page-form-wrap {
    width: 100%;
}
.bouyin-page-form-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 48px 56px;
    width: 100%;
    box-sizing: border-box;
}
.bouyin-page-form-title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e8c97e;
    letter-spacing: 0.3px;
}

/* Override auth styles inside page context so they render on dark bg */
.bouyin-page-form-card .bouyin-form-section-title {
    color: #aaaaaa;
    border-bottom-color: #333;
}
.bouyin-page-form-card .bouyin-form-grid {
    margin-bottom: 24px;
}
.bouyin-page-form-card input[type=text],
.bouyin-page-form-card input[type=email],
.bouyin-page-form-card input[type=tel],
.bouyin-page-form-card input[type=password],
.bouyin-page-form-card select,
.bouyin-page-form-card textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #ffffff;
}
.bouyin-page-form-card input[type=text]:focus,
.bouyin-page-form-card input[type=email]:focus,
.bouyin-page-form-card input[type=tel]:focus,
.bouyin-page-form-card input[type=password]:focus {
    border-color: #e8c97e;
    outline: none;
    box-shadow: 0 0 0 2px rgba(232,201,126,0.2);
}
.bouyin-page-form-card .bouyin-form-label {
    color: #aaaaaa;
}
.bouyin-page-form-card .bouyin-form-notice {
    color: #888888;
}
.bouyin-page-form-card .bouyin-form-footer {
    color: #888888;
    border-top-color: #333;
}
.bouyin-page-form-card .bouyin-form-footer a {
    color: #e8c97e;
}

@media (max-width: 768px) {
    .bouyin-page-form-card {
        padding: 32px 24px;
    }
}

/* Force clean sans-serif on in-page form titles — override Elementor theme heading font */
.bouyin-page-form-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ── Portal content pages on dark Elementor background ────────────────────── */
.bouyin-portal-content {
    width: 100%;
    color: #e0e0e0;
}
.bouyin-portal-content .bouyin-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 32px 36px;
    margin-bottom: 24px;
}
.bouyin-portal-content .bouyin-card h2,
.bouyin-portal-content .bouyin-card h3 {
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8c97e;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.bouyin-portal-content .bouyin-form-label,
.bouyin-portal-content label {
    color: #aaaaaa;
}
.bouyin-portal-content input[type=text],
.bouyin-portal-content input[type=email],
.bouyin-portal-content input[type=tel],
.bouyin-portal-content input[type=password],
.bouyin-portal-content select,
.bouyin-portal-content textarea {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #ffffff;
    border-radius: 4px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
}
.bouyin-portal-content input:focus,
.bouyin-portal-content select:focus,
.bouyin-portal-content textarea:focus {
    border-color: #e8c97e;
    outline: none;
    box-shadow: 0 0 0 2px rgba(232,201,126,0.2);
}
.bouyin-portal-content .bouyin-stat-banner {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 24px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bouyin-portal-content .bouyin-stat-banner__label {
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bouyin-portal-content .bouyin-stat-banner__value {
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}
.bouyin-portal-content .bouyin-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.bouyin-portal-content .bouyin-tile {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 28px 24px;
    text-align: center;
    text-decoration: none;
    color: #e0e0e0;
    transition: border-color 0.2s, background 0.2s;
    display: block;
}
.bouyin-portal-content .bouyin-tile:hover {
    border-color: #e8c97e;
    background: #252525;
    color: #ffffff;
}
.bouyin-portal-content .bouyin-tile__icon {
    background: rgba(232,201,126,0.12);
}
.bouyin-portal-content .bouyin-tile__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #e8c97e;
    stroke-width: 1.8;
}
.bouyin-portal-content .bouyin-tile h3 {
    color: #ffffff;
}
.bouyin-portal-content .bouyin-tile p {
    color: #999999;
}
.bouyin-portal-content .bouyin-tile__label {
    font-size: 14px;
    font-weight: 600;
    color: #cccccc;
}
.bouyin-portal-content .bouyin-table-wrap {
    overflow-x: auto;
}
.bouyin-portal-content table {
    width: 100%;
    border-collapse: collapse;
    color: #e0e0e0;
}
.bouyin-portal-content thead th {
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #333;
}
.bouyin-portal-content tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #2a2a2a;
    font-size: 14px;
    color: #e0e0e0;
}
.bouyin-portal-content tbody tr:hover td {
    background: #252525;
}
.bouyin-portal-content .bouyin-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.bouyin-portal-content .bouyin-status-badge--pending   { background: rgba(243,156,18,0.15); color: #f39c12; }
.bouyin-portal-content .bouyin-status-badge--completed { background: rgba(39,174,96,0.15);  color: #27ae60; }
.bouyin-portal-content .bouyin-status-badge--failed    { background: rgba(192,57,43,0.15);  color: #c0392b; }
.bouyin-portal-content .bouyin-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 15px;
}
.bouyin-portal-content .bouyin-btn,
.bouyin-portal-content button[type=submit],
.bouyin-portal-content input[type=submit] {
    background: #e8c97e;
    color: #1a1a2e;
    border: none;
    border-radius: 4px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bouyin-portal-content .bouyin-btn:hover,
.bouyin-portal-content button[type=submit]:hover,
.bouyin-portal-content input[type=submit]:hover {
    background: #d4b565;
}
.bouyin-portal-content .bouyin-alert {
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
}
.bouyin-portal-content .bouyin-alert--success { background: rgba(39,174,96,0.12);  border-left: 3px solid #27ae60; color: #7dcea0; }
.bouyin-portal-content .bouyin-alert--error   { background: rgba(192,57,43,0.12);  border-left: 3px solid #c0392b; color: #e59b95; }
.bouyin-portal-content .bouyin-alert--warning { background: rgba(243,156,18,0.12); border-left: 3px solid #f39c12; color: #f9ca78; }

@media (max-width: 768px) {
    .bouyin-portal-content .bouyin-card { padding: 24px 20px; }
    .bouyin-portal-content .bouyin-tile-grid { grid-template-columns: 1fr 1fr; }
    .bouyin-portal-content .bouyin-stat-banner { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
    .bouyin-portal-content .bouyin-tile-grid { grid-template-columns: 1fr; }
}

/* ---- BROWSER AUTOFILL OVERRIDE ----
   Chrome/Safari/Edge paint autofilled inputs (email/password especially) with
   their own white/yellow background that plain background-color cannot
   override -- only the -webkit-box-shadow inset trick works. Applies the same
   dark theme colour (#2a2a2a bg, #ffffff text) used elsewhere on these forms. */
.bouyin-page-form-card input:-webkit-autofill,
.bouyin-page-form-card input:-webkit-autofill:hover,
.bouyin-page-form-card input:-webkit-autofill:focus,
.bouyin-portal-content input:-webkit-autofill,
.bouyin-portal-content input:-webkit-autofill:hover,
.bouyin-portal-content input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #2a2a2a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

/* ---- SECTION TITLE DARK-THEME OVERRIDE ----
   .bouyin-section-title defaults to #1a1a1a (near-black), designed for a
   light-background context. On the dark-themed form cards and portal pages
   this makes the heading text invisible against the dark background. */
.bouyin-page-form-card .bouyin-section-title,
.bouyin-portal-content .bouyin-section-title {
    color: #ffffff;
    border-bottom-color: #444;
}