/**
 * ============================================================================
 * Portal Cloud 9 - Account Styles
 * ============================================================================
 * 
 * Version: 8.3.6
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * License: GPL-2.0+
 * ============================================================================
 */

/* ── Layout wrapper ─────────────────────────────────────────────── */
.p9-account-wrapper {
    max-width:1200px;
    margin:0 auto;
    padding:2rem 1rem}

/* ── Fixed notification toasts ──────────────────────────────────── */
.p9-messages-container {
    position:fixed;
    top:2rem;
    right:2rem;
    z-index:10000;
    max-width:400px}

/* ── Notice base styles ─────────────────────────────────────────── */
.p9-notice {
    padding:1rem 1.5rem;
    border-radius:12px;
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    gap:.75rem;
    backdrop-filter:blur(20px);
    box-shadow:0 8px 32px rgb(0 0 0 / .1);
    animation:p9SlideIn 0.3s ease;
    font-size:.9375rem;
    font-weight:500}

.p9-notice.p9-success {
    background:linear-gradient(135deg,rgb(34 197 94 / .95),rgb(22 163 74 / .95));
    color:#fff}

.p9-notice.p9-error {
    background:linear-gradient(135deg,rgb(239 68 68 / .95),rgb(220 38 38 / .95));
    color:#fff}

@keyframes p9SlideIn {
    from {
    transform:translateX(400px);
    opacity:0}

to {
    transform:translateX(0);
    opacity:1}

}

/* ── Account header banner with gradient background ─────────────── */
.p9-account-header {
    background:linear-gradient(135deg,var(--p9-gradient-start,#1e90ff),var(--p9-gradient-end,#000));
    border-radius:20px;
    padding:2.5rem 2rem;
    margin-bottom:2rem;
    position:relative;
    overflow:hidden}

.p9-account-header::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg,rgb(255 255 255 / .1),transparent);
    pointer-events:none}

/* ── Header inner layout: avatar + user info side by side ──────── */
.p9-account-header-content {
    display:flex;
    align-items:center;
    gap:2rem;
    position:relative;
    z-index:1}

/* ── Avatar container and upload button ─────────────────────────── */
.p9-avatar-section {
    flex-shrink:0}

.p9-avatar-container {
    position:relative;
    width:120px;
    height:120px}

.p9-avatar-image {
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:4px solid rgb(255 255 255 / .3);
    transition:all 0.3s ease}

.p9-avatar-upload {
    position:absolute;
    bottom:0;
    right:0;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    border-radius:50% !important;
    /* White background + red→black diagonal gradient border */
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(135deg,#ff0000,#000000) border-box !important;
    border:2px solid transparent !important;
    box-shadow:none !important;
    outline:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0;
    cursor:pointer;
    transition:all 0.3s ease;
    padding:0 !important;
    line-height:1;
    overflow:hidden}

.p9-avatar-upload:hover {
    transform:scale(1.07);
    box-shadow:0 4px 14px rgba(30,144,255,.35)}

.p9-avatar-upload svg {
    width:16px !important;
    height:16px !important;
    flex-shrink:0;
    display:block;
    color:var(--p9-gradient-start,#1e90ff)}

/* ── User name, email and role badge ───────────────────────────── */
.p9-account-header-info {
    color:#fff}

.p9-account-header-info h1 {
    font-size:2rem;
    font-weight:700;
    margin:0 0 .5rem 0;
    color:#fff}

.p9-account-email {
    font-size:1rem;
    opacity:.9;
    margin:0 0 .75rem 0}

.p9-account-role {
    display:inline-block;
    padding:.375rem 1rem;
    background:rgb(255 255 255 / .2);
    backdrop-filter:blur(10px);
    border-radius:20px;
    font-size:.875rem;
    font-weight:600}

/* ── Tab bar wrapper with scroll fade indicators ────────────────── */
.p9-account-tabs-wrapper {
    position:relative;
    margin-bottom:2rem}

.p9-account-tabs-wrapper::before,.p9-account-tabs-wrapper::after {
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    width:40px;
    pointer-events:none;
    z-index:2;
    opacity:0;
    transition:opacity 0.3s ease}

.p9-account-tabs-wrapper::before {
    left:0;
    background:linear-gradient(to right,rgb(255 255 255 / .9),transparent)}

.p9-account-tabs-wrapper::after {
    right:0;
    background:linear-gradient(to left,rgb(255 255 255 / .9),transparent)}

.p9-account-tabs-wrapper.has-scroll::before,.p9-account-tabs-wrapper.has-scroll::after {
    opacity:1}

/* ── Horizontally scrollable tab strip ──────────────────────────── */
.p9-account-tabs {
    display:flex;
    gap:.75rem;
    overflow-x:auto;
    overflow-y:hidden;
    padding:.5rem 0;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:var(--p9-gradient-start,#1e90ff) rgb(0 0 0 / .05)}

.p9-account-tabs::-webkit-scrollbar {
    height:6px}

.p9-account-tabs::-webkit-scrollbar-track {
    background:rgb(0 0 0 / .05);
    border-radius:3px}

.p9-account-tabs::-webkit-scrollbar-thumb {
    background:var(--p9-gradient-start,#1e90ff);
    border-radius:3px}

.p9-account-tabs::-webkit-scrollbar-thumb:hover {
    background:var(--p9-gradient-end,#000)}

/* ── Individual tab button ──────────────────────────────────────── */
.p9-tab-btn {
    display:flex;
    align-items:center;
    gap:.625rem;
    padding:.875rem 1.5rem;
    background:rgb(255 255 255 / .6);
    backdrop-filter:blur(10px);
    border:2px solid #fff0;
    border-radius:12px;
    font-size:.9375rem;
    font-weight:600;
    color:var(--p9-text,#333);
    cursor:pointer;
    transition:all 0.3s cubic-bezier(.4,0,.2,1);
    white-space:nowrap;
    position:relative;
    overflow:hidden}

.p9-tab-btn::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,var(--p9-gradient-start,#1e90ff),var(--p9-gradient-end,#000));
    opacity:0;
    transition:opacity 0.3s ease}

.p9-tab-btn svg {
    width:20px;
    height:20px;
    position:relative;
    z-index:1;
    transition:all 0.3s ease}

.p9-tab-btn span {
    position:relative;
    z-index:1}

.p9-tab-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgb(0 0 0 / .12)}

.p9-tab-btn.active {
    background:#fff0;
    border-color:var(--p9-gradient-start,#1e90ff);
    color:#fff}

.p9-tab-btn.active::before {
    opacity:1}

/* ── Tab panel content area ─────────────────────────────────────── */
.p9-account-content {
    position:relative}

.p9-tab-content {
    display:none;
    animation:p9FadeIn 0.4s ease}

.p9-tab-content.active {
    display:block}

@keyframes p9FadeIn {
    from {
    opacity:0;
    transform:translateY(10px)}

to {
    opacity:1;
    transform:translateY(0)}

}

/* ── Glassmorphic content card ──────────────────────────────────── */
.p9-section {
    background:rgb(255 255 255 / .6);
    backdrop-filter:blur(20px);
    border-radius:16px;
    padding:2rem;
    margin-bottom:1.5rem;
    border:1px solid rgb(255 255 255 / .3);
    box-shadow:0 8px 32px rgb(0 0 0 / .08);
    position:relative;
    overflow:hidden}

.p9-section::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:200%;
    height:100%;
    background:linear-gradient(105deg,transparent 40%,rgb(255 255 255 / .18) 50%,transparent 60%);
    animation:glassShimmer 6s linear infinite;
    pointer-events:none;
    z-index:1}

.p9-section-title {
    font-size:1.5rem;
    font-weight:700;
    color:var(--p9-text,#333);
    margin:0 0 .5rem 0}

.p9-section-description {
    color:var(--p9-text-muted,#666);
    margin:0 0 1.5rem 0;
    font-size:.9375rem}

/* ── Responsive form grid and field groups ──────────────────────── */
.p9-form-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem}

.p9-form-group {
    display:flex;
    flex-direction:column;
    gap:.5rem}

.p9-form-group.p9-full-width {
    grid-column:1 / -1}

.p9-form-group label {
    font-weight:600;
    font-size:.9375rem;
    color:var(--p9-text,#333);
    display:flex;
    align-items:center;
    gap:.25rem}

.p9-required {
    color:#ef4444}

/* ── Input and textarea base styles ─────────────────────────────── */
.p9-input,.p9-textarea {
    width:100%;
    padding:.875rem 1.125rem;
    border:2px solid rgb(0 0 0 / .1);
    border-radius:10px;
    font-size:.9375rem;
    font-family:inherit;
    background:rgb(255 255 255 / .8);
    transition:all 0.3s ease;
    color:var(--p9-text,#333)}

.p9-input:focus,.p9-textarea:focus {
    outline:none;
    border-color:var(--p9-gradient-start,#1e90ff);
    background:#fff;
    box-shadow:0 0 0 4px rgb(30 144 255 / .1)}

.p9-textarea {
    resize:vertical;
    min-height:120px}

.p9-hint {
    font-size:.8125rem;
    color:var(--p9-text-muted,#666);
    font-style:italic}

.p9-password-input {
    position:relative;
    display:flex;
    align-items:center}

.p9-password-input .p9-input {
    padding-right:3rem}

.p9-password-toggle {
    position:absolute;
    right:.75rem;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:.5rem;
    cursor:pointer;
    transition:opacity 0.3s ease}

.p9-password-toggle:hover {
    opacity:.75}

/* Red→black diagonal gradient stroke on eye icons via CSS SVG property */
.p9-password-toggle svg {
    width:20px;
    height:20px;
    display:block;
    stroke:url(#p9-eye-gradient) !important;
    color:transparent}

/* Gradient definition injected once via inline SVG <defs> in account.php */

.p9-password-strength {
    margin-top:.75rem}

.p9-strength-bar {
    height:6px;
    background:rgb(0 0 0 / .1);
    border-radius:3px;
    overflow:hidden;
    margin-bottom:.5rem}

.p9-strength-fill {
    height:100%;
    width:0;
    transition:all 0.3s ease;
    border-radius:3px}

.p9-strength-fill.weak {
    background:#ef4444}

.p9-strength-fill.medium {
    background:#f59e0b}

.p9-strength-fill.strong {
    background:#22c55e}

.p9-strength-text {
    font-size:.8125rem;
    font-weight:600}

.p9-checkbox {
    display:flex;
    align-items:center;
    gap:.75rem;
    cursor:pointer;
    user-select:none}

.p9-checkbox input[type="checkbox"] {
    width:20px;
    height:20px;
    cursor:pointer;
    accent-color:var(--p9-gradient-start,#1e90ff)}

.p9-checkbox span {
    font-weight:500}

.p9-preferences-list {
    display:flex;
    flex-direction:column;
    gap:1rem}

.p9-preference-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
    padding:1.25rem;
    background:rgb(255 255 255 / .5);
    border-radius:12px;
    border:2px solid rgb(0 0 0 / .05);
    transition:all 0.3s ease}

.p9-preference-item:hover {
    border-color:var(--p9-gradient-start,#1e90ff);
    background:rgb(255 255 255 / .8)}

.p9-preference-info h4 {
    font-size:1rem;
    font-weight:600;
    color:var(--p9-text,#333);
    margin:0 0 .25rem 0}

.p9-preference-info p {
    font-size:.875rem;
    color:var(--p9-text-muted,#666);
    margin:0}

/* ── Toggle switch component ────────────────────────────────────── */
.p9-switch {
    position:relative;
    display:inline-block;
    width:52px;
    height:28px;
    flex-shrink:0}

.p9-switch input {
    opacity:0;
    width:0;
    height:0}

.p9-switch-slider {
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgb(0 0 0 / .2);
    transition:0.3s;
    border-radius:28px}

.p9-switch-slider:before {
    position:absolute;
    content:"";
    height:20px;
    width:20px;
    left:4px;
    bottom:4px;
    background-color:#fff;
    transition:0.3s;
    border-radius:50%;
    box-shadow:0 2px 4px rgb(0 0 0 / .2)}

.p9-switch input:checked+.p9-switch-slider {
    background:linear-gradient(135deg,var(--p9-gradient-start,#1e90ff),var(--p9-gradient-end,#000))}

.p9-switch input:checked+.p9-switch-slider:before {
    transform:translateX(24px)}

/* ── Privacy actions card grid ──────────────────────────────────── */
.p9-privacy-actions {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem}

.p9-privacy-card {
    background:rgb(255 255 255 / .5);
    border:2px solid rgb(0 0 0 / .05);
    border-radius:12px;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    transition:all 0.3s ease}

.p9-privacy-card:hover {
    border-color:var(--p9-gradient-start,#1e90ff);
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgb(0 0 0 / .1)}

.p9-privacy-card.p9-privacy-danger:hover {
    border-color:#ef4444}

.p9-privacy-icon {
    width:48px;
    height:48px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--p9-gradient-start,#1e90ff),var(--p9-gradient-end,#000));
    display:flex;
    align-items:center;
    justify-content:center}

.p9-privacy-danger .p9-privacy-icon {
    background:linear-gradient(135deg,#ef4444,#dc2626)}

.p9-privacy-icon svg {
    width:24px;
    height:24px;
    color:#fff}

.p9-privacy-content h4 {
    font-size:1.125rem;
    font-weight:700;
    color:var(--p9-text,#333);
    margin:0}

.p9-privacy-content p {
    font-size:.875rem;
    color:var(--p9-text-muted,#666);
    margin:0}

/* ── Info and warning callout boxes ─────────────────────────────── */
.p9-info-box {
    display:flex;
    gap:1rem;
    padding:1.25rem;
    background:rgb(30 144 255 / .1);
    border:2px solid rgb(30 144 255 / .2);
    border-radius:12px;
    margin-top:1.5rem}

.p9-info-box svg {
    width:24px;
    height:24px;
    color:var(--p9-gradient-start,#1e90ff);
    flex-shrink:0}

.p9-info-box strong {
    display:block;
    margin-bottom:.5rem;
    color:var(--p9-text,#333)}

.p9-info-box ul {
    margin:.5rem 0 0 1.25rem;
    padding:0}

.p9-info-box li {
    margin-bottom:.25rem;
    font-size:.9375rem}

.p9-info-warning {
    background:rgb(245 158 11 / .1);
    border-color:rgb(245 158 11 / .3)}

.p9-info-warning svg {
    color:#f59e0b}

/* ── Button base ────────────────────────────────────────────────── */
/* overflow:hidden removed — it clips gradient borders (padding-box/border-box trick) */
.p9-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.625rem;
    padding:.875rem 1.75rem;
    border-radius:999px !important;
    font-size:.9375rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(.4,0,.2,1);
    font-family:inherit;
    position:relative}

.p9-btn svg {
    width:18px;
    height:18px}

.p9-btn:disabled {
    opacity:.6;
    cursor:not-allowed;
    transform:none!important}

/* ── Save Changes ────────────────────────────────────────────────── */
/* White text | black→dodger-blue bg | grey→black gradient border   */
.p9-btn-primary {
    background:linear-gradient(135deg,#000000,#1e90ff) padding-box,
               linear-gradient(135deg,#888888,#000000) border-box !important;
    border:2px solid transparent !important;
    color:#ffffff !important;
    box-shadow:0 4px 12px rgba(30,144,255,.25)}

.p9-btn-primary:hover:not(:disabled) {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(30,144,255,.4)}

/* ── Reset Changes (light mode) ─────────────────────────────────── */
/* Dodger-blue text | transparent bg | dodger-blue→black border     */
.p9-btn-secondary {
    background:transparent padding-box,
               linear-gradient(135deg,#1e90ff,#000000) border-box !important;
    border:2px solid transparent !important;
    color:#1e90ff !important}

.p9-btn-secondary:hover:not(:disabled) {
    background:linear-gradient(135deg,#ff0000,#800000) padding-box,
               linear-gradient(135deg,#000000,#ffffff) border-box !important;
    border:2px solid transparent !important;
    color:#ffffff !important;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(255,0,0,.3)}

/* ── Delete Account ──────────────────────────────────────────────── */
/* White text | red→maroon gradient bg                               */
.p9-btn-danger {
    background:linear-gradient(135deg,#ff0000,#800000) !important;
    border:2px solid transparent !important;
    color:#ffffff !important;
    box-shadow:0 4px 12px rgba(255,0,0,.25)}

.p9-btn-danger:hover:not(:disabled) {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,0,0,.35)}

/* ── Download Data ───────────────────────────────────────────────── */
/* Dodger-blue text | transparent bg | dodger-blue→black border     */
#p9-export-data {
    background:transparent padding-box,
               linear-gradient(135deg,#1e90ff,#000000) border-box !important;
    border:2px solid transparent !important;
    color:#1e90ff !important;
    font-weight:700}

#p9-export-data:hover:not(:disabled) {
    background:linear-gradient(135deg,#ff0000,#800000) padding-box,
               linear-gradient(135deg,#000000,#ffffff) border-box !important;
    border:2px solid transparent !important;
    color:#ffffff !important;
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(255,0,0,.3)}

/* ── Form action bar with save/cancel buttons ───────────────────── */
.p9-form-actions {
    display:flex;
    justify-content:flex-end;
    gap:1rem;
    margin-top:2rem;
    padding-top:2rem;
    border-top:2px solid rgb(0 0 0 / .05)}

/* ── Dark mode overrides ─────────────────────────────────────────── */










/* ── Reset Changes (dark mode) ───────────────────────────────────── */
/* White text | transparent bg | white→black border                  */

/* ── Download Data (dark mode) ───────────────────────────────────── */
/* White text | transparent bg | dodger-blue→white border            */

/* ── Responsive: tablet and mobile ──────────────────────────────── */
@media (max-width:768px) {
    .p9-account-wrapper {
    padding:1rem .75rem}

.p9-account-header {
    padding:2rem 1.5rem;
    border-radius:16px}

.p9-account-header-content {
    flex-direction:column;
    text-align:center;
    gap:1.5rem}

.p9-account-header-info h1 {
    font-size:1.5rem}

.p9-account-tabs-wrapper {
    margin:0 -.75rem 1.5rem;
    padding:0 .75rem}

.p9-account-tabs {
    gap:.5rem;
    padding:.75rem 0}

.p9-tab-btn {
    padding:.875rem 1.25rem;
    font-size:.875rem;
    min-width:auto;
    flex-shrink:0}

.p9-tab-btn svg {
    width:20px;
    height:20px}

@media (max-width:480px) {
    .p9-tab-btn span {
    display:none}

.p9-tab-btn {
    padding:1rem;
    min-width:48px;
    justify-content:center}

.p9-tab-btn svg {
    margin:0}

}

.p9-section {
    padding:1.5rem 1.25rem;
    border-radius:12px}

.p9-section-title {
    font-size:1.25rem}

.p9-form-grid {
    grid-template-columns:1fr}

.p9-form-actions {
    flex-direction:column-reverse;
    position:sticky;
    bottom:0;
    background:rgb(255 255 255 / .95);
    backdrop-filter:blur(20px);
    padding:1rem;
    margin:0 -1.25rem -1.5rem;
    border-radius:0 0 12px 12px;
    gap:.75rem}

.p9-form-actions .p9-btn {
    width:100%;
    padding:1rem 1.75rem}

.p9-privacy-actions {
    grid-template-columns:1fr}

.p9-messages-container {
    right:1rem;
    left:1rem;
    top:1rem;
    max-width:none}

.p9-preference-item {
    flex-direction:column;
    align-items:flex-start;
    gap:1rem}

.p9-preference-item .p9-switch {
    align-self:flex-end}

}

/* ── Responsive: small phones ───────────────────────────────────── */
@media (max-width:480px) {
    .p9-avatar-container {
    width:100px;
    height:100px}

.p9-avatar-upload {
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    border-radius:50% !important;
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(135deg,#ff0000,#000000) border-box !important;
    border:2px solid transparent !important}

.p9-avatar-upload svg {
    width:16px;
    height:16px}

}