/* Gabrist Order Tracking v1 */
:root{
  --bg:#f7f2e7;
  --surface:#fffaf0;
  --surface-2:#f0eadc;
  --ink:#14271f;
  --text:#52645a;
  --muted:#75847b;
  --green:#0d7f63;
  --green-dark:#064b3c;
  --green-soft:#e7f4e6;
  --gold:#d99632;
  --gold-soft:#fff0c9;
  --red:#dc2626;
  --border:rgba(13,127,99,.16);
  --shadow:0 22px 60px rgba(45,67,51,.13);
  --shadow-strong:0 32px 90px rgba(22,54,43,.22);
}
body[data-theme="dark"]{
  --bg:#07100d;
  --surface:#0e1b16;
  --surface-2:#12241d;
  --ink:#f5fff8;
  --text:#bfd0c7;
  --muted:#8fa69a;
  --green:#43d5ad;
  --green-dark:#dffdf4;
  --green-soft:#102b24;
  --gold:#efb55f;
  --gold-soft:#2e2615;
  --border:rgba(124,230,199,.17);
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --shadow-strong:0 36px 100px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Vazirmatn,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 78% 2%, rgba(13,127,99,.13), transparent 29%),
    radial-gradient(circle at 4% 18%, rgba(217,150,50,.13), transparent 27%),
    linear-gradient(180deg,var(--bg) 0%,#fffdf7 45%,var(--bg) 100%);
  color:var(--ink);
  min-height:100vh;
}
body[data-theme="dark"]{
  background:
    radial-gradient(circle at 78% 2%, rgba(67,213,173,.16), transparent 29%),
    radial-gradient(circle at 4% 18%, rgba(239,181,95,.09), transparent 27%),
    linear-gradient(180deg,#07100d 0%,#0a1511 45%,#07100d 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.26;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(13,127,99,.10) 1.2px, transparent 1.6px),
    linear-gradient(135deg, rgba(217,150,50,.045) 25%, transparent 25%);
  background-size:34px 34px,42px 42px;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.hidden{display:none!important}
.app-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:18px 0 56px}
.tracking-header{
  position:sticky;
  top:12px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,250,240,.78);
  border:1px solid rgba(13,127,99,.14);
  box-shadow:0 18px 48px rgba(45,67,51,.11);
  backdrop-filter:blur(20px);
}
body[data-theme="dark"] .tracking-header{background:rgba(9,22,18,.76);border-color:rgba(124,230,199,.14);box-shadow:0 18px 54px rgba(0,0,0,.42)}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#fff,var(--gold-soft));border:1px solid rgba(13,127,99,.12)}
.brand-mark img{width:42px;height:42px;object-fit:contain}
.brand strong{display:block;font-size:1.25rem;font-weight:950;color:var(--green-dark)}
.brand small{display:block;color:var(--muted);font-size:.78rem}
.header-actions{display:flex;align-items:center;gap:10px}
.site-link,.theme-toggle,.btn{
  border:1px solid rgba(13,127,99,.16);
  background:rgba(255,255,255,.72);
  color:var(--green-dark);
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}
body[data-theme="dark"] .site-link,body[data-theme="dark"] .theme-toggle,body[data-theme="dark"] .btn{background:rgba(255,255,255,.06);border-color:rgba(124,230,199,.16)}
.btn:hover,.site-link:hover,.theme-toggle:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff!important;border:0;box-shadow:0 16px 34px rgba(13,127,99,.27)}
.btn-secondary{background:rgba(255,255,255,.72);color:var(--green-dark)}
.btn-small{padding:8px 12px;font-size:.86rem}
.wide{width:100%;justify-content:center}
.hero-card{
  margin-top:44px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  align-items:center;
  gap:28px;
  padding:48px;
  min-height:520px;
  border-radius:38px;
  background:
    radial-gradient(circle at 82% 22%, rgba(13,127,99,.16), transparent 34%),
    linear-gradient(135deg,rgba(255,249,234,.90),rgba(237,246,230,.84));
  border:1px solid rgba(13,127,99,.14);
  box-shadow:var(--shadow);
  overflow:hidden;
}
body[data-theme="dark"] .hero-card{background:radial-gradient(circle at 82% 22%,rgba(67,213,173,.13),transparent 34%),linear-gradient(135deg,rgba(8,18,15,.92),rgba(13,33,26,.86))}
.eyebrow{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;background:rgba(13,127,99,.10);color:var(--green-dark);border:1px solid rgba(13,127,99,.14);font-weight:950}
.hero-copy h1{font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.22;margin:16px 0;color:var(--ink)}
.hero-copy p{color:var(--text);font-size:1rem;line-height:2}
.phone-form,.admin-login{margin-top:22px}
label{display:block;font-weight:850;color:var(--ink);margin-bottom:12px}
input,select,textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(13,127,99,.18);
  background:rgba(255,255,255,.78);
  color:var(--ink);
  padding:13px 14px;
  outline:none;
}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea{background:rgba(255,255,255,.055);border-color:rgba(124,230,199,.16);color:#f5fff8}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(13,127,99,.10)}
.phone-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.helper,.status-line{color:var(--muted);font-size:.88rem}
.status-line{min-height:28px;font-weight:850}
.hero-visual{display:grid;place-items:center}
.tracking-card-mini{
  width:min(300px,100%);
  padding:28px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,250,240,.86));
  border:1px solid var(--border);
  box-shadow:var(--shadow-strong);
  text-align:center;
}
body[data-theme="dark"] .tracking-card-mini{background:linear-gradient(180deg,rgba(18,36,29,.96),rgba(11,21,18,.92))}
.tracking-card-mini img{width:88px;height:88px;border-radius:24px}
.tracking-card-mini strong{display:block;margin-top:14px;color:var(--green-dark)}
.tracking-card-mini span{display:block;margin-top:5px;color:var(--text);font-size:.86rem}
.panel{
  margin-top:28px;
  padding:30px;
  border-radius:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,250,240,.92));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
body[data-theme="dark"] .panel{background:linear-gradient(180deg,rgba(18,36,29,.96),rgba(11,21,18,.92))}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.panel-heading h2{margin:10px 0 0;font-size:clamp(1.5rem,3vw,2.4rem)}
.panel-heading p{margin:8px 0 0;color:var(--text)}
.orders-list{display:grid;gap:14px}
.order-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--border);
}
body[data-theme="dark"] .order-card{background:rgba(255,255,255,.045)}
.order-card h3{margin:0;color:var(--green-dark)}
.order-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;background:var(--green-soft);color:var(--green-dark);font-weight:850;font-size:.82rem}
.items{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.items li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:8px;color:var(--text)}
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.order-form,.search-card,.product-note{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--border);
}
body[data-theme="dark"] .order-form,body[data-theme="dark"] .search-card,body[data-theme="dark"] .product-note{background:rgba(255,255,255,.045)}
.order-form h3,.search-card h3{margin-top:0;color:var(--green-dark)}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.items-builder{margin:18px 0}
.items-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.items-title h4{margin:0}
#items-container{display:grid;gap:12px}
.item-row{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
  padding:14px;
  border:1px dashed rgba(13,127,99,.26);
  border-radius:18px;
}
.remove-item{width:38px;height:38px;border:0;border-radius:50%;background:#fee2e2;color:#991b1b;font-weight:950;cursor:pointer}
.admin-side{display:grid;gap:16px;position:sticky;top:106px}
.product-note p{color:var(--text);line-height:1.9}
.orders-table-wrap{margin-top:24px;overflow:auto;border-radius:22px;border:1px solid var(--border)}
.orders-table{width:100%;border-collapse:collapse;min-width:860px;background:rgba(255,255,255,.55)}
body[data-theme="dark"] .orders-table{background:rgba(255,255,255,.035)}
.orders-table th,.orders-table td{padding:13px;border-bottom:1px solid var(--border);text-align:right;vertical-align:top}
.orders-table th{color:var(--green-dark);background:rgba(13,127,99,.06)}
.table-actions{display:flex;gap:6px;flex-wrap:wrap}
.table-actions button{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--green-dark);padding:6px 10px;cursor:pointer;font-weight:850}
.table-actions .danger{color:#991b1b;background:#fee2e2}
.empty-state{padding:24px;border-radius:22px;background:rgba(255,255,255,.60);border:1px solid var(--border);color:var(--text);text-align:center;font-weight:800}
@media(max-width:920px){
  .tracking-header{border-radius:26px;align-items:flex-start}
  .header-actions{flex-wrap:wrap;justify-content:flex-end}
  .hero-card{grid-template-columns:1fr;padding:30px 20px}
  .admin-grid{grid-template-columns:1fr}
  .admin-side{position:static}
  .two-fields{grid-template-columns:1fr}
  .item-row{grid-template-columns:1fr 1fr}
  .remove-item{position:absolute;top:8px;left:8px}
}
@media(max-width:620px){
  .app-shell{width:min(100% - 18px,1180px);padding-top:10px}
  .tracking-header{position:relative;top:0;border-radius:22px;flex-direction:column}
  .header-actions{width:100%;justify-content:space-between}
  .site-link,.theme-toggle{font-size:.82rem;padding:9px 12px}
  .hero-card{margin-top:18px;min-height:auto;border-radius:26px}
  .hero-copy h1{font-size:2rem}
  .phone-row{grid-template-columns:1fr}
  .panel{padding:20px 14px;border-radius:24px}
  .panel-heading{align-items:flex-start;flex-direction:column}
  .item-row{grid-template-columns:1fr}
}


/* v2: customer notice + order status tracker */
.tracking-notice {
  margin: 18px 0 6px;
  padding: 15px 17px;
  border-radius: 18px;
  background: rgba(13,127,99,.075);
  border: 1px solid rgba(13,127,99,.15);
  color: var(--green-dark);
}

.tracking-notice strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 950;
}

.tracking-notice span {
  display: block;
  color: var(--text);
  line-height: 1.9;
  font-weight: 750;
}

.tracking-notice a {
  color: var(--green-dark);
  font-weight: 950;
  white-space: nowrap;
}

.status-tracker {
  margin: 14px 0 12px;
  padding: 13px 14px 15px;
  border-radius: 18px;
  background: rgba(13,127,99,.055);
  border: 1px solid rgba(13,127,99,.14);
}

.status-track-labels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .86rem;
}

.status-current {
  color: var(--green-dark);
  font-size: .94rem;
  white-space: nowrap;
  text-align: center;
}

.status-side {
  color: var(--muted);
  font-weight: 850;
}

.status-track-labels .status-side:first-child {
  text-align: right;
}

.status-track-labels .status-side:last-child {
  text-align: left;
}

.status-track-bar {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(13,127,99,.12);
  overflow: hidden;
}

.status-track-bar span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #4caf50);
}

.status-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -12px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.status-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #d9e8df;
  box-shadow: 0 0 0 1px rgba(13,127,99,.18);
}

.status-dot.done {
  background: var(--green);
}

.status-dot.active {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(13,127,99,.13);
}

body[data-theme="dark"] .tracking-notice,
body[data-theme="dark"] .status-tracker {
  background: rgba(67,213,173,.08);
  border-color: rgba(124,230,199,.14);
}

body[data-theme="dark"] .status-track-bar {
  background: rgba(124,230,199,.13);
}

body[data-theme="dark"] .status-dot {
  border-color: #0e1b16;
  background: #254139;
}

@media(max-width:720px) {
  .status-track-labels {
    grid-template-columns: 1fr;
    text-align: right;
    gap: 4px;
  }

  .status-current {
    text-align: right;
    white-space: normal;
    order: -1;
  }

  .status-track-labels .status-side:first-child,
  .status-track-labels .status-side:last-child {
    text-align: right;
  }

  .status-dot {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}


/* v3: price calculation fields and customer totals */
.item-row {
  grid-template-columns: 1.15fr .8fr .85fr .85fr auto;
}

.item-total {
  background: rgba(13,127,99,.06) !important;
  color: var(--green-dark) !important;
  font-weight: 900;
}

.customer-item-row {
  display: grid !important;
  grid-template-columns: minmax(160px,1.3fr) .7fr .9fr .9fr;
  align-items: center;
  gap: 12px;
}

.customer-item-row .item-name {
  color: var(--ink);
  font-weight: 900;
}

.customer-item-row b,
.customer-item-row strong {
  color: var(--green-dark);
}

.order-grand-total {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(13,127,99,.08);
  border: 1px solid rgba(13,127,99,.14);
  color: var(--green-dark);
  font-weight: 950;
  text-align: left;
}

.order-grand-total strong {
  font-size: 1.08rem;
}

body[data-theme="dark"] .item-total {
  background: rgba(67,213,173,.08) !important;
  color: var(--green-dark) !important;
}

body[data-theme="dark"] .order-grand-total {
  background: rgba(67,213,173,.08);
  border-color: rgba(124,230,199,.14);
}

@media(max-width:920px) {
  .item-row {
    grid-template-columns: 1fr 1fr;
  }

  .customer-item-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .order-grand-total {
    text-align: right;
  }
}

@media(max-width:620px) {
  .item-row {
    grid-template-columns: 1fr;
  }
}


/* v4: editable orders, currency field and soft animations */
.form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.order-form:has(#edit-order-id[value]:not([value=""])) {
  box-shadow: 0 26px 80px rgba(13,127,99,.18);
}

.table-actions [data-edit] {
  background: var(--green-soft);
  color: var(--green-dark);
}

.tracking-notice span[dir="ltr"],
.tracking-notice span span[dir="ltr"] {
  font-weight: 950;
  color: var(--green-dark);
}

.hero-card,
.panel,
.order-card,
.order-form,
.search-card,
.product-note,
.tracking-card-mini {
  animation: softRise .55s ease both;
}

.order-card {
  animation-duration: .45s;
}

.status-dot.active {
  animation: activePulse 1.45s ease-in-out infinite;
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
}

.btn-primary:hover::after {
  animation: buttonShine .78s ease;
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes activePulse {
  0%, 100% {
    box-shadow: 0 0 0 5px rgba(13,127,99,.13);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(13,127,99,.08);
  }
}

@keyframes buttonShine {
  to {
    transform: translateX(-120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .panel,
  .order-card,
  .order-form,
  .search-card,
  .product-note,
  .tracking-card-mini,
  .status-dot.active,
  .btn-primary::after {
    animation: none !important;
  }
}


/* v5: keep domain inline inside tracking notice */
.tracking-notice {
  text-align: center;
}

.tracking-notice strong {
  display: block;
  text-align: center;
}

.domain-inline {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-weight: 950;
  color: var(--green-dark);
  vertical-align: baseline;
  margin-inline: 4px;
}

@media (min-width: 760px) {
  .tracking-notice strong {
    white-space: nowrap;
    font-size: clamp(.88rem, 1.15vw, 1rem);
  }
}

@media (max-width: 759px) {
  .tracking-notice strong {
    line-height: 1.9;
  }
}


/* v6: avoid RTL/LTR mixing issue by showing domain as a separate badge */
.tracking-notice {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.tracking-notice strong {
  white-space: normal !important;
  text-align: center;
  line-height: 1.85;
}

.domain-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(13,127,99,.10);
  border: 1px solid rgba(13,127,99,.18);
  color: var(--green-dark);
  font-weight: 950;
  letter-spacing: .01em;
}

body[data-theme="dark"] .domain-badge {
  background: rgba(67,213,173,.10);
  border-color: rgba(124,230,199,.16);
}

@media (min-width: 760px) {
  .tracking-notice strong {
    font-size: 1rem;
  }
}