:root{
      --cream:#fff7e6;--cream2:#f4ead4;--gold:#d4af37;--gold2:#b8860b;
      --ink:#2b2418;--line:rgba(184,134,11,.28);
      --shadow:0 12px 28px rgba(43,36,24,.12);
      --r:16px;
    }
    *{box-sizing:border-box}
    body{margin:0;background:radial-gradient(1200px 420px at 50% 0%, rgba(212,175,55,.14), transparent 60%);font-family:"Kalameh",Tahoma, IRANSans, Vazirmatn, sans-serif;-webkit-tap-highlight-color:transparent}
    .wrap{max-width:860px;margin:20px auto;padding:0 14px 28px}
    .card{background:rgba(255,255,255,.55);border:1px solid rgba(184,134,11,.25);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;backdrop-filter:blur(8px)}
    .h1{margin:0 0 10px;font-weight:1000;color:var(--ink);font-size:18px}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media(max-width:740px){.grid{grid-template-columns:1fr}}

    label{display:block;margin:10px 0 6px;font-weight:800;color:rgba(43,36,24,.85);font-size:13px}

    /* Picker buttons (open bottom-sheet) */
    .picker{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:12px 12px;border-radius:14px;border:1px solid rgba(43,36,24,.16);
      background:rgba(255,255,255,.70);font-weight:800;color:#1f180c;cursor:pointer;
    }
    .picker[disabled]{opacity:.6;cursor:not-allowed}
    .picker .value{display:flex;align-items:center;gap:10px;min-width:0}
    .picker .value span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .thumb{width:34px;height:34px;border-radius:12px;object-fit:cover;border:1px solid rgba(43,36,24,.12);flex:0 0 auto;display:none}
    .caret{opacity:.8}

    input,textarea,select{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(43,36,24,.16);font-weight:650;background:rgba(255,255,255,.70)}
    textarea{resize:none}

    .chips{display:flex;gap:10px}
    .chip{flex:1;padding:11px 12px;border-radius:14px;border:1px solid rgba(43,36,24,.18);background:rgba(255,255,255,.75);font-weight:1000;cursor:pointer}
    .chip.active{background:linear-gradient(180deg,#ffe8a6,var(--gold));border-color:rgba(184,134,11,.55)}

    .box{border-radius:14px;border:1px dashed rgba(43,36,24,.22);background:rgba(255,255,255,.55);padding:12px}
    .row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
    .muted{font-size:12px;color:rgba(43,36,24,.68);font-weight:800}
    .big{font-size:16px;font-weight:1000;color:#111}
    .sep{height:1px;background:rgba(43,36,24,.10);margin:12px 0}

    /* Sale highlight */
    .sale{background:rgba(255,244,210,.9);border:1px solid rgba(184,134,11,.45)}
    .saleTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
    .cap{font-size:11px;color:rgba(43,36,24,.75);font-weight:900;white-space:nowrap}

    .saleLine{display:flex;gap:10px;align-items:stretch;margin-top:10px}
    .saleWrap{flex:1;position:relative}
    .saleSuffix{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-weight:900;color:rgba(43,36,24,.70);font-size:12px}
    .saleDisplay{padding-left:62px;direction:ltr;text-align:left;font-size:18px;font-weight:1000}

    .stepper{display:flex;gap:8px}
    .step{width:48px;border-radius:14px;border:1px solid rgba(43,36,24,.16);background:linear-gradient(180deg,#ffe8a6,var(--gold));font-weight:1000;cursor:pointer}

    .pillRow{display:flex;gap:10px;align-items:center;margin-top:10px}
    .pills{display:flex;gap:8px}
    .pill{width:64px;border-radius:14px;border:1px solid rgba(43,36,24,.16);background:rgba(255,255,255,.75);font-weight:1000;cursor:pointer}
    .pill.active{background:linear-gradient(180deg,#ffe8a6,var(--gold));border-color:rgba(184,134,11,.55)}

    .discWrap{flex:1;position:relative}
    .discSuffix{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-weight:1000;color:rgba(43,36,24,.65);font-size:12px}
    .discDisplay{padding-left:44px;direction:ltr;text-align:left;font-weight:1000}

    .link{border:0;background:transparent;color:rgba(43,36,24,.85);font-weight:1000;cursor:pointer;text-decoration:underline;font-size:12px;padding:0}

    .manualTag{display:none;margin-top:8px;font-size:12px;font-weight:1000;color:#6a4b00}
    .manualTag.show{display:block}

    .btn{margin-top:14px;width:100%;padding:12px 14px;border-radius:14px;border:0;font-weight:1000;cursor:pointer;background:linear-gradient(180deg,#ffe8a6,var(--gold));color:#1f180c}
    .btn:disabled{opacity:.6;cursor:not-allowed}

    .hint{margin-top:10px;font-weight:800;color:rgba(43,36,24,.75);font-size:13px}

    .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
    .thumbCard{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(43,36,24,.12);background:#fff;height:64px}
    .thumbCard img{width:100%;height:100%;object-fit:cover}
    .thumbRm{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:10px;border:0;background:rgba(0,0,0,.55);color:#fff;font-weight:1000;cursor:pointer}
    @media(max-width:520px){.thumbs{grid-template-columns:repeat(3,1fr)}}

    .err,.ok{margin-top:10px;padding:10px;border-radius:14px;font-weight:900;display:none}
    .err{background:rgba(229,57,53,.08);border:1px solid rgba(229,57,53,.25);color:#8e1c1c}
    .ok{background:rgba(46,125,50,.10);border:1px solid rgba(46,125,50,.25);color:#1b5e20}

    /* Bottom Sheet */
    .sheetOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;z-index:99999;padding:12px}
    .sheetOverlay.show{display:flex}
    .sheetHead{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-bottom:1px solid rgba(43,36,24,.10)}
    .sheetTitle{font-weight:1000;color:#111}
    .sheetClose{width:40px;height:40px;border-radius:14px;border:1px solid rgba(43,36,24,.12);background:#fff;cursor:pointer;font-weight:1000}
    .sheetBody{max-height:40vh;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 14px}
    .sheetSearch{margin-bottom:10px}
    .list{display:flex;flex-direction:column;gap:8px}
    .item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid rgba(43,36,24,.12);background:rgba(255,255,255,.95);cursor:pointer}
    .item:hover{background:rgba(255,246,218,.95)}
    .itemThumb{width:38px;height:38px;border-radius:14px;border:1px solid rgba(43,36,24,.10);object-fit:cover;flex:0 0 auto;background:#fff}
    .itemText{font-weight:1000;color:#111}
    .itemSub{font-size:12px;color:rgba(43,36,24,.65);font-weight:800;margin-top:2px}

    /* Skeleton */
    .skel{height:58px;border-radius:14px;border:1px solid rgba(43,36,24,.10);background:linear-gradient(90deg,#f3f3f3 25%,#e9e9e9 37%,#f3f3f3 63%);background-size:400% 100%;animation:shimmer 1.2s ease-in-out infinite}
    @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

    /* Flash invalid (sale clamp) */
    .flashInvalid{border-color:rgba(229,57,53,.65)!important;box-shadow:0 0 0 3px rgba(229,57,53,.20);animation:shake .45s ease-in-out 0s 2}
    @keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}

    /* Small toggle */
    .toggleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 4px}
    .switch{display:flex;align-items:center;gap:10px}
    .switch input{width:auto}

    /* Jalali Date Picker (overlay) */
    .dateBox{position:relative}
    .dateBox input{cursor:pointer;padding-left:46px}
    .dateBtn{position:absolute;left:8px;top:50%;transform:translateY(-50%);
      width:34px;height:34px;border-radius:12px;border:1px solid rgba(43,36,24,.12);
      background:#fff;cursor:pointer;font-weight:1000
    }
    .dateOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100000;padding:12px}
    .dateOverlay.show{display:flex}
    .dateCard{width:100%;max-width:420px;background:#fff;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.22);
      border:1px solid rgba(43,36,24,.10);padding:14px
    }
    .dateTitle{font-weight:1000;color:#111;text-align:center;margin-bottom:10px}
    .dateRow{display:flex;gap:10px}
    .dateRow select{flex:1}
    .dateActions{display:flex;gap:10px;margin-top:12px}
    .ghostBtn{flex:1;border-radius:14px;border:1px solid rgba(43,36,24,.16);background:#fff;font-weight:1000;padding:12px;cursor:pointer}



    /* پاپ اپ */
    .create-wrap{ padding:14px; }

.gate-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.05);
}
.gate-title{
  font-weight:900;
  font-size:14px;
}
.gate-desc{
  margin-top:6px;
  font-size:12px;
  color:var(--muted, rgba(0,0,0,.65));
  line-height:1.6;
}
.gate-list{
  margin:10px 0 0;
  padding-right:16px;
  font-size:12px;
  line-height:1.9;
  color:rgba(0,0,0,.82);
}

.gate-btn{
  margin-top:12px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  font-size:13px;
  color:#1f1f1f;
  text-decoration:none;
  background:linear-gradient(135deg,#D4AF37,#F7E27C);
  box-shadow:0 12px 26px rgba(212,175,55,.22);
}

/* Bottom Sheet */
.sheet-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:9998;
}
.sheet-backdrop--open{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; top:0;
  transform:translateY(110%);
  transition:transform .25s ease;
  z-index:9999;
  background:#fff;
  border-radius:20px 20px 0 0;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 -20px 50px rgba(0,0,0,.15);
  padding:10px 14px 16px;
  width:100%;
  max-height:60% !important;
  margin:0 auto;
  overflow:hidden;
  top: -168px;
}
.sheet--open{ transform:translateY(0); }

.sheet__handle{
  width:44px; height:5px;
  border-radius:99px;
  background:rgba(0,0,0,.15);
  margin:4px auto 10px;
}
.sheet__header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sheet__title{ font-weight:900; font-size:14px; line-height:1.4; }
.sheet__close{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.03);
  font-size:20px;
  line-height:1;
}
.sheet__text{ font-size:12px; color:rgba(0,0,0,.65); }
.sheet__list{
  margin:10px 0 12px;
  padding-right:16px;
  font-size:12px;
  line-height:1.9;
  color:rgba(0,0,0,.82);
}
.sheet__cta{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  font-size:13px;
  color:#1f1f1f;
  text-decoration:none;
  background:linear-gradient(135deg,#D4AF37,#F7E27C);
  border:1px solid rgba(212,175,55,.55);
  box-shadow:0 12px 26px rgba(212,175,55,.22);
}
.sheet__hint{
  margin-top:10px;
  font-size:12px;
  color:rgba(0,0,0,.65);
  text-align:center;
}

/* انتخاب عکس */
.photo-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.btn {
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2c2c2c;
    transition: all .25s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0,0,0,0.16);
}

.camera-btn {
    background: linear-gradient(135deg, #ffcc4d, #ffde7d);
}

.gallery-btn {
    background: linear-gradient(135deg, #86d8ff, #b4edff);
}

#cameraInput,
#galleryInput {
    display: none;
}

/* پیش‌نمایش */
.preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.preview-box {
    position: relative;
    width: 95px;
    height: 95px;
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all .25s ease;
}

.preview-box:hover {
    transform: scale(1.04);
}

.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* دکمه حذف */
.remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 60, 60, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 24px;
    transition: .2s;
}

.remove-btn:hover {
    background: crimson;
}