/* =========================================================
   UZ Account UI – Responsive + RTL-safe (v2025-09-01)
   Notes:
   - All comments & strings are English (WPML-friendly).
   - Scoped to UZ classes to avoid affecting other areas.
   - Mobile drawer fixed; focus/esc support via JS file.
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --uz-bg:#030b0a;
  --uz-panel:#0c1f1b;
  --uz-line:#16332d;
  --uz-neon:#29ffa5;
  --uz-neon-2:#26d07c;
  --uz-text:#eafff5;
  --uz-sub:#8ddfbe;
  --uz-danger:#ff6b6b;
  --uz-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(41,255,165,.08) inset;
}

/* ---------- Page base ---------- */
body.uz-myaccount{
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(41,255,165,.06), transparent 60%),
    radial-gradient(900px 600px at 120% 10%, rgba(38,208,124,.05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.9));
  color: var(--uz-text);
}

/* Lock scroll when drawer is open */
body.uz-nav-open{ overflow:hidden; touch-action:none }

/* ---------- Layout ---------- */
.uz-account-wrap{
  max-width:1280px;
  margin:36px auto;
  padding:0 20px;
}
.uz-account-header{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 24px 0;
}
.uz-avatar{
  inline-size:64px;
  block-size:64px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--uz-line),
             0 0 0 6px rgba(41,255,165,.06),
             0 12px 30px rgba(0,0,0,.6);
}
.uz-title{
  font-size:36px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 0 24px rgba(41,255,165,.18);
}
.uz-sub{ color:var(--uz-sub); font-size:13px }

/* ---------- Card family ---------- */
.uz-card,
.uz-content .woocommerce,
.uz-mini,
.uz-reply,
.uz-form,
.uz-table,
.uz-hero,
.uz-stats,
.uz-term,
.uz-topnav{
  background: linear-gradient(180deg, rgba(41,255,165,.06), rgba(0,0,0,0));
  border-radius:18px;
  border:1px solid var(--uz-line);
  box-shadow: var(--uz-shadow);
  position:relative;
  overflow:hidden;
}

/* Grid shell */
.uz-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:22px;
}
@media (max-width:1100px){
  .uz-grid{ grid-template-columns:1fr }
}

/* Card + nav */
.uz-card{ padding:14px; backdrop-filter: blur(8px) }

.uz-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.uz-nav a,
.uz-nav .uz-nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.38px;
  position:relative;
  line-height:1;
  min-block-size:44px; /* finger-friendly */
}
.uz-nav a .dashicons{ font-size:18px; inline-size:18px; block-size:18px }
.uz-nav a .label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uz-nav a:hover{ background:rgba(41,255,165,.08) }
.uz-nav a.is-active{
  background:linear-gradient(90deg, var(--uz-neon) 0%, var(--uz-neon-2) 100%);
  color:#07271f;
  box-shadow:0 10px 20px rgba(41,255,165,.16);
  text-shadow:0 0 8px rgba(255,255,255,.25);
}

.uz-content .woocommerce{ padding:20px; backdrop-filter: blur(8px) saturate(120%) }

/* ---------- Terminal widget ---------- */
.uz-term{ padding:0; margin-block-end:14px }
.uz-term .bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-bottom:1px solid var(--uz-line);
  background:rgba(0,0,0,.25);
}
.uz-term .dot{ inline-size:10px; block-size:10px; border-radius:50% }
.uz-term .dot.red{ background:#ff5f56 }
.uz-term .dot.yellow{ background:#ffbd2e }
.uz-term .dot.green{ background:#27c93f }
.uz-term pre{
  margin:0; padding:14px; white-space:pre-wrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px; color:var(--uz-sub);
}
.uz-term .cmd{ color:var(--uz-text) }

/* ---------- Stats row ---------- */
.uz-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  margin-block-start:14px;
}
@media (max-width:1100px){ .uz-stats{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .uz-stats{ grid-template-columns:1fr } }

.uz-stat{
  padding:14px;
  display:flex; align-items:center; gap:12px;
}
.uz-stat .icon{
  inline-size:40px; block-size:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(41,255,165,.12);
  border:1px solid var(--uz-line);
}
.uz-stat .icon .dashicons{ font-size:20px; inline-size:20px; block-size:20px }
.uz-stat .meta{ display:flex; flex-direction:column; line-height:1.1 }
.uz-stat .meta .kpi{ font-size:18px; font-weight:900 }
.uz-stat .meta .label{ font-size:12px; color:var(--uz-sub) }

/* ---------- Quick links ---------- */
.uz-mini-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-block-start:14px;
}
@media (max-width:1100px){ .uz-mini-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .uz-mini-grid{ grid-template-columns:1fr } }

.uz-mini{ padding:14px }
.uz-mini .label{ color:var(--uz-sub); font-size:12px }
.uz-mini .value{ font-weight:900; font-size:18px }

/* ---------- Chips & badges ---------- */
.uz-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px }
.uz-chip,
.uz-badge{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:8px 12px;
  background:rgba(41,255,165,.1);
  border:1px solid var(--uz-line);
  font-weight:800; text-transform:uppercase; font-size:11px;
}

/* ---------- Tables ---------- */
.uz-table{ overflow:hidden }
.uz-content table.shop_table{ border:none }
.uz-content table.shop_table thead{ background:rgba(41,255,165,.08) }
.uz-content table.shop_table th,
.uz-content table.shop_table td{
  border-color:var(--uz-line);
  padding:12px 14px;
}
.uz-content table.shop_table tbody tr:hover{ background:rgba(41,255,165,.03) }
.woocommerce-orders-table__cell-order-actions .button{
  margin-inline-end:6px; /* RTL-safe */
}

/* ---------- Buttons ---------- */
.uz-button,
.uz-button-outline,
.uz-button-secondary{
  border-radius:14px!important;
  padding:12px 16px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.4px!important;
}
.uz-button{
  background:linear-gradient(90deg, var(--uz-neon), var(--uz-neon-2))!important;
  color:#06261e!important;
  border:none!important;
  box-shadow:0 12px 30px rgba(41,255,165,.2)!important;
}
.uz-button:hover{ filter:brightness(1.03) }
.uz-button-outline{
  background:transparent!important;
  color:var(--uz-text)!important;
  border:1px solid rgba(41,255,165,.5)!important;
  box-shadow:none!important;
}
.uz-button-outline:hover{ background:rgba(41,255,165,.08)!important }
.uz-button-secondary{
  background:rgba(0,0,0,.25)!important;
  color:var(--uz-text)!important;
  border:1px solid var(--uz-line)!important;
}

/* ---------- Forms ---------- */
.uz-form input, .uz-form select, .uz-form textarea,
.uz-reply-form textarea,
.uz-content form .form-row input,
.uz-content form .form-row select,
.uz-content form .form-row textarea{
  inline-size:100%;
  background:rgba(4,12,10,.65);
  border:1px solid var(--uz-line);
  border-radius:12px;
  color:var(--uz-text);
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.uz-form input:focus, .uz-form select:focus, .uz-form textarea:focus,
.uz-reply-form textarea:focus,
.uz-content form .form-row input:focus,
.uz-content form .form-row select:focus,
.uz-content form .form-row textarea:focus{
  outline:none;
  border-color:var(--uz-neon);
  box-shadow:0 0 0 2px rgba(41,255,165,.16) inset;
}

/* ---------- Mobile top navigation (sticky chip bar) ---------- */
.uz-topnav{
  display:none;
  padding:8px;
  margin-block-end:12px;
}
.uz-topnav .chips{
  display:flex; gap:8px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.uz-topnav .chips::-webkit-scrollbar{ display:none }
.uz-topnav a{
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--uz-line);
  background:rgba(41,255,165,.06);
  font-weight:800; text-transform:uppercase; font-size:12px;
}
.uz-topnav a.active{
  background:linear-gradient(90deg, var(--uz-neon), var(--uz-neon-2));
  color:#06261e; border-color:transparent;
}
@media (max-width:1100px){
  .uz-topnav{
    display:block;
    position:sticky; top:64px; z-index:100000;
  }
}

/* ---------- Mobile nav toggle + drawer ---------- */
.uz-nav-toggle{
  position:fixed; bottom:22px; inset-inline-end:20px; /* RTL-safe */
  z-index:100010;
  display:none; align-items:center; gap:10px;
  background:linear-gradient(90deg, var(--uz-neon), var(--uz-neon-2));
  color:#06261e; border:none; border-radius:999px;
  padding:12px 16px; font-weight:900; text-transform:uppercase;
  box-shadow:0 12px 30px rgba(41,255,165,.2);
}
.uz-nav-toggle:focus{ outline:2px solid rgba(41,255,165,.6) }
@media (max-width:1100px){ .uz-nav-toggle{ display:flex } }

/* Drawer (OFF-canvas on mobile, STATIC on desktop) */
@media (max-width:1100px){
  .uz-nav-drawer{
    position:fixed !important;
    top:0; inset-inline-start:0; /* RTL-safe */
    inline-size:min(86vw, 320px);
    block-size:100vh;
    transform:translateX(-100%);
    transition:transform .25s ease;
    padding:14px;
    z-index:100011;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    backdrop-filter: blur(8px);
  }
  /* RTL: slide in from the right */
  html[dir="rtl"] .uz-nav-drawer{ transform:translateX(100%) }
  body.uz-nav-open .uz-nav-drawer{ transform:none }

  .uz-nav-drawer .uz-nav{
    max-block-size:calc(100vh - 28px);
    overflow:auto;
  }

  .uz-nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    backdrop-filter: blur(2px);
    z-index:100009; display:none;
  }
  body.uz-nav-open .uz-nav-overlay{ display:block }

  /* Single column grid on mobile */
  .uz-grid{ grid-template-columns:1fr }
}

/* Better vh on mobile browsers that support dvh */
@supports (height: 100dvh){
  @media (max-width:1100px){
    .uz-nav-drawer{ block-size:100dvh }
    .uz-nav-drawer .uz-nav{ max-block-size:calc(100dvh - 28px) }
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .uz-nav-drawer{ transition:none }
}

/* ---------- Tickets (frontend) – chat UI ---------- */
.uz-ticket-chat .uz-divider{
  block-size:1px; margin:14px 0; border:none;
  background:linear-gradient(90deg, transparent, rgba(41,255,165,.35), transparent);
}
.uz-ticket-chat .uz-convo-title{
  margin:0 0 10px 0; font-size:18px; letter-spacing:.2px;
}

.uz-ticket-chat .uz-original{
  border:1px solid var(--uz-line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(41,255,165,.06), rgba(0,0,0,0));
  padding:12px 14px;
  box-shadow: var(--uz-shadow);
}
.uz-ticket-chat .uz-original-head{
  display:flex; align-items:center; gap:10px; margin-block-end:6px; flex-wrap:wrap;
}
.uz-ticket-chat .uz-original-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--uz-line);
  background:rgba(41,255,165,.10);
  font-size:11px; font-weight:800; text-transform:uppercase;
}
.uz-ticket-chat .uz-original-date{ font-size:12px; color:var(--uz-sub) }

.uz-thread-front{ display:flex; flex-direction:column; gap:12px }
.uz-thread-front .uz-reply{ padding:0; border:none; background:transparent }

.uz-reply-row{ display:flex; align-items:flex-start; gap:10px }
.uz-reply.from-owner .uz-reply-row{ flex-direction: row-reverse }

.uz-ava .uz-ava-img{
  inline-size:36px; block-size:36px; border-radius:50%;
  box-shadow:0 0 0 1px var(--uz-line), 0 8px 18px rgba(0,0,0,.45);
}

.uz-bubble{
  max-inline-size:780px; inline-size:fit-content;
  border-radius:14px; padding:12px 14px;
  border:1px solid var(--uz-line);
  background:rgba(4,12,10,.65);
  box-shadow: var(--uz-shadow);
}
.uz-reply.from-admin .uz-bubble{
  border-color:#1e2a44;
  background:linear-gradient(180deg,#0b1220 0%, #101826 100%);
}
.uz-reply.from-owner .uz-bubble{
  border-color:#1a3a30;
  background:linear-gradient(180deg, rgba(41,255,165,.10), rgba(0,0,0,.08));
  margin-inline-start:auto; /* RTL-safe "push to opposite side" */
}

.uz-reply-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-block-end:6px; font-size:12px; opacity:.95;
}
.uz-author{ color:var(--uz-text); font-weight:700 }
.uz-time{ color:var(--uz-sub) }

.uz-badge-role{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px;
  border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase;
  border:1px solid var(--uz-line); background:rgba(41,255,165,.10);
}
.uz-badge-seen{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:800; border:1px solid #0f766e; background:#064e3b; color:#a7f3d0;
}
.uz-badge-unseen{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:800; border:1px solid #991b1b; background:#7f1d1d; color:#fecaca;
}

/* Sticky composer (frontend) */
.uz-reply-form-sticky{
  position:sticky; inset-block-end:0; z-index:5;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  border:1px solid var(--uz-line);
  border-radius:16px; padding:12px 14px; margin-block-start:12px;
  box-shadow: var(--uz-shadow);
}
.uz-hint-shortcut{ margin-inline-start:10px; font-size:12px; color:var(--uz-sub) }

/* Small screen tweaks */
@media (max-width:560px){
  .uz-bubble{ max-inline-size:100% }
  .uz-ava .uz-ava-img{ inline-size:28px; block-size:28px }
}

/* ---------- RTL helpers (WPML sets dir="rtl") ---------- */
html[dir="rtl"] .uz-grid{ direction:rtl }
html[dir="rtl"] .uz-nav a{ flex-direction:row-reverse }
html[dir="rtl"] .uz-chip{ margin-inline-start:8px; margin-inline-end:0 }

/* End of file */