/* ===== Cuplate — Design System ===== */
:root{
  --color-bg: #f6faf6;
  --color-surface: #ffffff;
  --color-surface-alt: #eef7ee;
  --color-border: #d9ebd8;
  --color-text: #17291c;
  --color-text-muted: #5d6f5f;
  --color-primary: #5fb84e;      /* ירוק הלוגו — EcoCuplate */
  --color-primary-dark: #3f9a3a;
  --color-primary-contrast: #ffffff;
  --color-accent: #1f9d9a;       /* טורקיז מהלוגו */
  --color-accent-dark: #157875;
  --color-danger: #b3261e;
  --color-warning: #a16207;
  --color-focus: #1a56db;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(23,41,28,.08);
  --shadow-lg: 0 8px 30px rgba(23,41,28,.14);
  --font: "Assistant", "Segoe UI", Arial, sans-serif;
  --max-width: 1120px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg: #121a13;
    --color-surface: #1b261c;
    --color-surface-alt: #223023;
    --color-border: #33422f65;
    --color-text: #eaf3e8;
    --color-text-muted: #a9bba9;
    --color-primary: #7ecf6c;
    --color-primary-dark: #99dd8a;
    --color-primary-contrast: #10200f;
    --color-accent: #45c2be;
    --color-accent-dark: #7fdad7;
    --shadow: 0 2px 10px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --color-bg: #121a13;
  --color-surface: #1b261c;
  --color-surface-alt: #223023;
  --color-border: #33422f65;
  --color-text: #eaf3e8;
  --color-text-muted: #a9bba9;
  --color-primary: #7ecf6c;
  --color-primary-dark: #99dd8a;
  --color-primary-contrast: #10200f;
  --color-accent: #45c2be;
  --color-accent-dark: #7fdad7;
  --shadow: 0 2px 10px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 34px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{direction:rtl}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:var(--color-primary-dark)}

/* Skip link for keyboard/screen-reader users */
.skip-link{
  position:absolute; right:1rem; top:-3rem;
  background:var(--color-primary); color:var(--color-primary-contrast);
  padding:.6rem 1rem; border-radius:var(--radius-sm); z-index:1000;
  transition:top .15s ease;
}
.skip-link:focus{top:1rem}

:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}

/* ===== Header / Nav ===== */
.site-header{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  position:sticky; top:0; z-index:100;
}
.header-inner{
  max-width:var(--max-width); margin:0 auto; padding:.75rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--color-text)}
.brand-logo{
  height:42px; width:auto; flex:none;
}
.brand-name{font-weight:800; font-size:1.25rem}
.main-nav{display:flex; gap:.25rem; flex-wrap:wrap}
.main-nav a{
  text-decoration:none; color:var(--color-text); padding:.55rem .9rem;
  border-radius:var(--radius-sm); font-weight:600; font-size:.95rem;
}
.main-nav a:hover, .main-nav a:focus-visible{background:var(--color-surface-alt)}
.main-nav a[aria-current="page"]{background:var(--color-primary); color:var(--color-primary-contrast)}
.header-actions{display:flex; align-items:center; gap:.5rem}
.nav-toggle{display:none}

@media (max-width:840px){
  .header-inner{flex-wrap:wrap}
  .main-nav{
    width:100%; display:none; flex-direction:column; padding-top:.5rem;
    border-top:1px solid var(--color-border);
  }
  .main-nav.open{display:flex}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:var(--radius-sm);
    border:1px solid var(--color-border); background:var(--color-surface);
    font-size:1.3rem; cursor:pointer; color:var(--color-text);
  }
}

/* ===== Layout ===== */
.page{max-width:var(--max-width); margin:0 auto; padding:2rem 1.25rem 4rem}
.page-narrow{max-width:640px}
.page-title{font-size:1.9rem; margin:0 0 .35rem}
.page-subtitle{color:var(--color-text-muted); margin:0 0 1.75rem; font-size:1.05rem}

.card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow);
}
.card + .card{margin-top:1.25rem}
.grid{display:grid; gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ===== Forms ===== */
.field{margin-bottom:1.1rem}
.field label{display:block; font-weight:700; margin-bottom:.35rem; font-size:.95rem}
.required-mark{color:var(--color-danger)}
.field .hint{color:var(--color-text-muted); font-size:.85rem; margin-top:.3rem}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], select, textarea{
  width:100%; padding:.7rem .85rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--color-border); background:var(--color-surface);
  color:var(--color-text); font-family:inherit; font-size:1rem;
}
textarea{min-height:90px; resize:vertical}
input:focus, select:focus, textarea:focus{border-color:var(--color-primary)}
fieldset{border:1.5px solid var(--color-border); border-radius:var(--radius); padding:1rem 1.1rem; margin:0 0 1.1rem}
legend{font-weight:800; padding:0 .4rem; background:var(--color-surface)}
.radio-row, .checkbox-row{display:flex; align-items:center; gap:.5rem; margin:.4rem 0}
.file-drop{
  border:2px dashed var(--color-border); border-radius:var(--radius);
  padding:1.5rem; text-align:center; background:var(--color-surface-alt);
  cursor:pointer;
}
.file-drop.dragover{border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-alt))}
.file-drop input[type=file]{display:none}
.file-name{margin-top:.5rem; font-weight:600; font-size:.9rem; color:var(--color-accent)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.4rem; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none;
  transition:transform .08s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary); color:var(--color-primary-contrast)}
.btn-primary:hover{background:var(--color-primary-dark)}
.btn-outline{background:transparent; border-color:var(--color-primary); color:var(--color-primary-dark)}
.btn-outline:hover{background:var(--color-surface-alt)}
.btn-ghost{background:transparent; color:var(--color-text)}
.btn-danger{background:var(--color-danger); color:#fff}
.btn-sm{padding:.5rem 1rem; font-size:.9rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; min-width:640px}
th, td{padding:.75rem .9rem; text-align:right; border-bottom:1px solid var(--color-border)}
thead th{background:var(--color-surface-alt); font-size:.85rem; color:var(--color-text-muted)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--color-surface-alt)}

/* ===== Status badges ===== */
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:999px; font-size:.82rem; font-weight:700}
.badge-pending{background:#fef3c7; color:#92400e}
.badge-prep{background:#dbeafe; color:#1e40af}
.badge-print{background:#ede9fe; color:#5b21b6}
.badge-bind{background:#fce7f3; color:#9d174d}
.badge-done{background:#dcfce7; color:#166534}
.badge-business{background:var(--color-accent); color:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge-pending{background:#78350f55;color:#fcd34d}
  :root:not([data-theme="light"]) .badge-prep{background:#1e3a8a55;color:#93c5fd}
  :root:not([data-theme="light"]) .badge-print{background:#4c1d9555;color:#c4b5fd}
  :root:not([data-theme="light"]) .badge-bind{background:#83184855;color:#f9a8d4}
  :root:not([data-theme="light"]) .badge-done{background:#14532d55;color:#86efac}
}

/* ===== Alerts / toasts ===== */
.alert{padding:.9rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1.1rem; font-weight:600}
.alert-info{background:#e0f2fe; color:#075985}
.alert-success{background:#dcfce7; color:#166534}
.alert-error{background:#fee2e2; color:#991b1b}
[role="status"], [role="alert"]{}

/* ===== Hero (home) ===== */
.hero{
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color:#fff; border-radius:var(--radius); padding:2.5rem 2rem; margin-bottom:2rem; overflow:hidden;
}
.hero-inner{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  max-width:100%;
}
.hero-text{flex:1 1 360px; min-width:280px; text-align:start}
.hero h1{font-size:2.2rem; margin:0 0 .6rem}
.hero p{font-size:1.15rem; opacity:.95; margin:0 0 1.5rem}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap}
.hero .btn-outline{border-color:#fff; color:#fff}
.hero .btn-outline:hover{background:rgba(255,255,255,.15)}
.hero-image{
  flex:0 1 230px; max-width:230px;
  background:#fff; border-radius:20px; padding:.85rem;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 36px -12px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.6);
}
.hero-image img{width:100%; height:auto; display:block; border-radius:12px}
@media (max-width:640px){
  .hero-inner{justify-content:center; text-align:center}
  .hero-text{text-align:center}
  .hero-actions{justify-content:center}
}

/* ===== Steps section (premium) ===== */
.steps-section{
  text-align:center; padding:3rem 1rem 1rem;
  position:relative;
}
.steps-title{
  font-size:2rem; margin:0 0 .4rem;
  background:linear-gradient(90deg, var(--color-primary-dark), var(--color-accent-dark, var(--color-accent)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}
.steps-subtitle{color:var(--color-text-muted); font-size:1.05rem; margin:0 0 2.5rem}
.steps-grid{gap:2.25rem}
.step-card{
  position:relative;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:20px;
  padding:2.75rem 1.75rem 2rem;
  box-shadow:0 1px 3px rgba(23,41,28,.06), 0 12px 28px -12px rgba(23,41,28,.16);
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:center;
}
.step-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px; border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.step-card:hover, .step-card:focus-within{
  transform:translateY(-6px);
  box-shadow:0 1px 3px rgba(23,41,28,.08), 0 24px 40px -16px rgba(23,41,28,.28);
}
.step-badge{
  position:relative;
  width:76px; height:76px; margin:0 auto 1.25rem;
  border-radius:50%;
  background:linear-gradient(145deg, var(--color-primary), var(--color-accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 10px 20px -6px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.step-num{
  position:absolute; top:-6px; inset-inline-end:-6px;
  width:26px; height:26px; border-radius:50%;
  background:var(--color-surface); color:var(--color-primary-dark);
  font-weight:800; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--color-primary);
}
.step-card h3{font-size:1.2rem; margin:0 0 .6rem; color:var(--color-text)}
.step-card p{color:var(--color-text-muted); margin:0; line-height:1.6}
.step-card p a{color:var(--color-accent-dark, var(--color-accent)); font-weight:700}

.price-total{font-size:1.6rem; font-weight:800; color:var(--color-accent)}
.price-breakdown{color:var(--color-text-muted); font-size:.9rem}

.tabs{display:flex; gap:.4rem; border-bottom:2px solid var(--color-border); margin-bottom:1.5rem; flex-wrap:wrap}
.tab-btn{background:none; border:none; padding:.75rem 1.1rem; font-weight:700; cursor:pointer; color:var(--color-text-muted); border-bottom:3px solid transparent; margin-bottom:-2px}
.tab-btn[aria-selected="true"]{color:var(--color-primary-dark); border-color:var(--color-primary)}

footer.site-footer{text-align:center; padding:2rem 1rem; color:var(--color-text-muted); font-size:.9rem}

/* ===== 3D preview modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; z-index:1000;
}
.modal-3d-box{
  background:var(--color-surface); border-radius:var(--radius);
  padding:1.25rem; width:100%; max-width:820px;
  box-shadow:var(--shadow-lg);
}
#three-canvas-container{
  width:100%; aspect-ratio:8/5; border-radius:var(--radius-sm);
  background:var(--color-surface-alt); touch-action:none; cursor:grab;
  overflow:hidden;
}
#three-canvas-container:active{cursor:grabbing}
#three-canvas-container canvas{display:block; width:100%; height:100%}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}