/* Partner app restyled to the Wagty design system (customer Figma, Oct 2026):
   orange primary with dark labels, Cairo for both scripts, 12/16/24 radii,
   cool neutrals, light gradient heads, quiet borders instead of shadows.
   Every rule is scoped to the Partner device so the Customer app is untouched. */

.device[data-app=partner] {
  --c-primary: #FF650B;
  --c-primary-press: #F28B4B;
  --c-primary-soft: #FFF0E5;
  --c-primary-dark: #A93400;
  --c-red: #EA001B;
  --c-amber: #F79F1A;
  --g-brand: linear-gradient(135deg, #F79F1A 0%, #FF650B 50%, #EA001B 100%);
  --g-head: linear-gradient(180deg, #FFDCC6 0%, #FFF0E5 55%, #F8F9FA 100%);
  --c-on-primary: #10141C;
  --c-text-main: #1B202A;
  --c-text-general: #515967;
  --c-text-secondary: #656D7B;
  --c-text-placeholder: #969DA8;
  --c-text-brand: #A93400;
  --c-border-1: #E4E6EA;
  --c-border-2: #F1F2F4;
  --c-list-header: #F8F9FA;
  --c-bg-floating: #F8F9FA;
  --c-success: #067647;
  --c-warning: #B54708;
  --c-urgent: #D92D20;
  --c-wallet: #10141C;
  --r-md: 12px;
  --r-lg: 16px;
  --r-sheet: 24px;
  font-family: 'Cairo', 'HuaweiSans', system-ui, sans-serif;
}
.device[data-app=partner][lang=ar] { font-family: 'Cairo', 'HuaweiSans', sans-serif; }

/* status bar turns dark over the light gradient heads */
.device[data-app=partner][data-tone=brand]:has(.screen.active :is(.p-hero, .my-head, .qr-page, .bv-hero, .tu-hero)) .device-statusbar { color: var(--c-text-main); }

/* ---------- buttons & links ---------- */
.device[data-app=partner] .btn { height: 52px; border-radius: var(--r-md); font-weight: 700; }
.device[data-app=partner] .btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.device[data-app=partner] .btn-primary:active { background: var(--c-primary-press); }
.device[data-app=partner] .btn-primary:disabled { background: var(--c-border-1); color: var(--c-text-secondary); opacity: 1; }
.device[data-app=partner] .btn-outline { border: 1px solid var(--c-primary-dark); color: var(--c-primary-dark); background: #fff; }
.device[data-app=partner] .btn-ghost { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.device[data-app=partner] .btn-mini { background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--r-md); }
.device[data-app=partner] .dialog-actions .btn { height: 44px; }
.device[data-app=partner] :is(.link, .accent, .tu-sel, .countdown, .center-card) { color: var(--c-primary-dark); }
.device[data-app=partner] :is(.pm, .op-line, .tips, .tx-card) .ic,
.device[data-app=partner] .fic { color: var(--c-primary-dark); }

/* ---------- top bar ---------- */
.device[data-app=partner] .topbar { background: #fff; }
.device[data-app=partner] .topbar-title { font-size: 18px; font-weight: 600; }
.device[data-app=partner] .capsule { border-color: var(--c-border-1); background: #fff; }

/* ---------- inputs ---------- */
.device[data-app=partner] .field { gap: 8px; }
.device[data-app=partner] .field-label { font-size: 14px; color: var(--c-text-main); }
.device[data-app=partner] .field-box { height: 52px; border-color: var(--c-text-secondary); border-radius: var(--r-md); }
.device[data-app=partner] .field-box:focus-within { border-color: var(--c-primary-dark); box-shadow: inset 0 0 0 1px var(--c-primary-dark); }
.device[data-app=partner] .field.has-error .field-box { border-color: var(--c-urgent); box-shadow: inset 0 0 0 1px var(--c-urgent); }
.device[data-app=partner] .field-error { color: #912018; }
.device[data-app=partner] .note-input { border-color: var(--c-text-secondary); border-radius: var(--r-md); height: 48px; }
.device[data-app=partner] .pinf { border: 2px solid var(--c-primary-dark); border-radius: var(--r-md); height: 52px; }
.device[data-app=partner] .pin-box { width: 44px; height: 56px; border-radius: 8px; border-color: var(--c-text-secondary); background: #fff; }
.device[data-app=partner] .key { background: transparent; box-shadow: none; font-size: 24px; }
.device[data-app=partner] .key:active { background: var(--c-border-2); }

/* ---------- selection ---------- */
.device[data-app=partner] .chip { border-radius: 999px; }
.device[data-app=partner] :is(.chip.on, .req-chip.on) { border-color: var(--c-primary-dark); color: var(--c-primary-dark); background: var(--c-primary-soft); }
.device[data-app=partner] .segmented { border-radius: var(--r-md); border: 1px solid var(--c-border-1); }
.device[data-app=partner] .segmented button { border-radius: 8px; }
.device[data-app=partner] .segmented button.on { color: var(--c-primary-dark); }
.device[data-app=partner] .req-chip { border-radius: var(--r-md); color: var(--c-primary-dark); }
.device[data-app=partner] :is(.tu-chip, .pkg b) { color: var(--c-primary-dark); }

/* ---------- surfaces ---------- */
.device[data-app=partner] :is(.card, .list, .summary, .opt, .lp-option, .qr-card2) { border: 1px solid var(--c-border-1); border-radius: var(--r-lg); box-shadow: none; }
.device[data-app=partner] .list-row, .device[data-app=partner] .tx-row { border-bottom-color: var(--c-border-2); }
.device[data-app=partner] .list-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--c-border-2); color: #3C4350; }
.device[data-app=partner] .list-label { color: var(--c-text-main); }
.device[data-app=partner] .list-chev { color: var(--c-text-placeholder); }
.device[data-app=partner] .summary-row .v { color: var(--c-text-main); }
.device[data-app=partner] .opt-ic { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.device[data-app=partner] .avatar { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.device[data-app=partner] .section-head { font-size: 16px; font-weight: 700; }
.device[data-app=partner] .section-title { font-size: 14px; font-weight: 600; color: var(--c-text-general); }
.device[data-app=partner] .shop-photo { border-color: var(--c-primary-dark); color: var(--c-primary-dark); }
.device[data-app=partner] .info-dot { background: var(--c-primary-dark); }

/* function tiles: brand icon in a soft circle */
.device[data-app=partner] .tile { color: var(--c-text-main); font-weight: 600; }
.device[data-app=partner] .tile-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-dark); }

/* ---------- status ---------- */
.device[data-app=partner] .tag { border-radius: 999px; padding: 2px 10px; background: var(--c-primary-soft); color: var(--c-primary-dark); }
.device[data-app=partner] .tag-grey { background: var(--c-border-2); color: var(--c-text-general); }
.device[data-app=partner] .tx-amt .tag-grey { background: #FFFAEB; color: var(--c-warning); }
.device[data-app=partner] .tag-green { background: #ECFDF3; color: var(--c-success); }
.device[data-app=partner] .tips { border: 1px solid #B2DDFF; border-radius: var(--r-md); background: #EFF8FF; color: #1849A9; }
.device[data-app=partner] .tips .ic { color: #175CD3; }
.device[data-app=partner] :is(.result-icon, .res-ic) { width: 64px; height: 64px; border: 0; border-radius: 50%; background: #ECFDF3; color: var(--c-success); }
.device[data-app=partner] :is(.result-icon.pending, .res-ic.pend) { background: #FFFAEB; color: var(--c-warning); }

/* ---------- overlays ---------- */
.device[data-app=partner] .sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
.device[data-app=partner] .sheet::before { content: ''; flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--c-border-1); margin-bottom: -4px; }
.device[data-app=partner] .dialog { border-radius: 20px; }
.device[data-app=partner] .toast { background: rgba(16, 20, 28, .94); border-radius: var(--r-md); }
.device[data-app=partner] :is(.sheet-backdrop, .dialog-wrap) { background: rgba(16, 20, 28, .6); }

/* ---------- bottom navigation: dark-orange active item on a soft pill ---------- */
.device[data-app=partner] .bottom-nav { border-top-color: var(--c-border-2); padding-top: 8px; }
.device[data-app=partner] .nav-item { gap: 4px; color: #3C4350; font-size: 11px; }
.device[data-app=partner] .nav-item .ic { box-sizing: content-box; padding: 4px 14px; border-radius: 999px; }
.device[data-app=partner] .nav-item.on { color: var(--c-primary-dark); font-weight: 600; }
.device[data-app=partner] .nav-item.on .ic { background: var(--c-primary-soft); }

/* ---------- home: light gradient head + dark wallet card ---------- */
.device[data-app=partner] .p-hero { background: var(--g-head); color: var(--c-text-main); padding-bottom: 60px; }
.device[data-app=partner] .p-top-title { font-weight: 700; }
.device[data-app=partner] .p-hero .icon-btn { width: 40px; height: 40px; background: #fff; color: var(--c-text-main); border: 1px solid var(--c-border-1); }
.device[data-app=partner] .p-balance { background: var(--c-wallet); color: #fff; border: 0; box-shadow: 0 8px 24px rgba(16, 20, 28, .12); }
.device[data-app=partner] .p-balance .avatar { background: rgba(255, 255, 255, .12); color: #fff; }
.device[data-app=partner] .p-balance :is(.list-sub, .p-bal-label, .eye-dark) { color: rgba(255, 255, 255, .78); }
.device[data-app=partner] .p-bal-value { font-size: 28px; }
.device[data-app=partner] .banner { border-radius: var(--r-lg); }

/* ---------- wallet tab ---------- */
.device[data-app=partner] .wallet-card { border: 1px solid var(--c-border-1); color: var(--c-text-secondary); }
.device[data-app=partner] .wallet-card.main { background: var(--c-wallet); border-color: var(--c-wallet); color: rgba(255, 255, 255, .78); }

/* ---------- my tab: profile card on brand-light ---------- */
.device[data-app=partner] .my-head { background: var(--g-head); color: var(--c-text-main); }
.device[data-app=partner] .my-head .user-row { color: var(--c-text-main); }
.device[data-app=partner] .my-head .avatar { background: #fff; color: var(--c-primary-dark); border: 1.5px solid var(--c-primary-dark); }
.device[data-app=partner] .my-head .user-phone { color: var(--c-text-secondary); opacity: 1; }

/* ---------- receive code & linked bank card ---------- */
.device[data-app=partner] .qr-card { border: 1px solid var(--c-border-1); border-radius: var(--r-lg); }
.device[data-app=partner] .qr-box { border-color: var(--c-border-1); }
.device[data-app=partner] .bank-card { background: var(--c-wallet); }

/* ---------- QR / bank-verify heads (white-on-brand before) ---------- */
.device[data-app=partner] :is(.qr-page, .bv-hero) { background: var(--g-head); }
.device[data-app=partner] :is(.qr-page, .bv-hero) .topbar { color: var(--c-text-main); }
.device[data-app=partner] :is(.qr-page, .bv-hero) .capsule { background: #fff; border-color: var(--c-border-1); color: var(--c-text-main); }
.device[data-app=partner] :is(.qr-page, .bv-hero) .capsule i { background: var(--c-border-1); }
.device[data-app=partner] .bv-logo { color: var(--c-primary-dark); border: 1px solid var(--c-border-1); }