/* MJG Order Form styles */
.mjggo-wrap{direction:rtl;margin:10px 0}
.mjggo-grid{display:grid;grid-template-columns:420px 1fr;gap:24px}
@media (max-width:900px){.mjggo-grid{grid-template-columns:1fr}}

/* ---------------- کارت قیمت بزرگ (دایره + عکس) ---------------- */
.mjggo-price-card{
  position:relative;background:#fff;border:1px solid #eee;border-radius:22px;
  padding:24px;box-shadow:0 10px 24px rgba(0,0,0,.06);overflow:hidden;

  /* مقادیر نهایی تو (گوشه راست-پایین) */
  --coin-size: 560px;
  --img-size:  440px;
  --coin-right: 100px;
  --coin-bottom: -84px;
  --img-right:  160px;
  --img-bottom: -20px;
}
.mjggo-price-line{margin-bottom:16px;position:relative;z-index:2}
.mjggo-price-number{font-size:32px;font-weight:800;color:#1abc9c}
.mjggo-price-number .mjggo-currency{font-size:16px;font-weight:600;margin-left:6px;opacity:.85}
.mjggo-price-caption{font-size:14px;font-weight:600;color:#444}
.mjggo-change{font-size:12px;margin-top:6px;position:relative;z-index:2}
.mjggo-change .up{color:#26a69a}
.mjggo-change .down{color:#ef5350}

/* --- فقط بخش مدیا (دایره + عکس) --- */
.mjggo-media{position:absolute; inset:0; pointer-events:none; z-index:1;}
.mjggo-coin{
  position:absolute;
  width: var(--coin-size); height: var(--coin-size); border-radius:50%;
  right: var(--coin-right); bottom: var(--coin-bottom);
  background: radial-gradient(closest-side, rgba(245,229,191,.95), rgba(231,200,120,.85) 60%, rgba(231,200,120,.35) 75%, rgba(231,200,120,.15) 100%);
  filter: blur(.3px);
  box-shadow: inset 0 0 60px rgba(255,255,255,.65), 0 10px 26px rgba(0,0,0,.06);
  opacity:.9;
}
.mjggo-coin-img{
  position:absolute;
  width: var(--img-size); height: var(--img-size);
  right: var(--img-right); bottom: var(--img-bottom);
  border-radius:50%;
  object-fit: contain;
  background: transparent;
  opacity:.92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.14))
          drop-shadow(0 2px 6px rgba(0,0,0,.08))
          saturate(1.05) contrast(1.02) brightness(1.02);
  transform: translateZ(0);
  will-change: filter, transform;
}

/* ---------------- فرم سمت چپ ---------------- */
.mjggo-form-card{background:#fff;border:1px solid #eee;border-radius:22px;padding:24px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.mjggo-tabs{display:flex;gap:12px;margin-bottom:16px}
.mjggo-tabs button{background:#2a3342;color:#fff;border:none;border-radius:12px;padding:12px 18px;font-weight:700}
.mjggo-tabs button.active{opacity:1}
.mjggo-form .mjggo-field{display:block;margin-bottom:14px}
.mjggo-form .mjggo-field span{display:block;font-size:12px;margin-bottom:6px;color:#666}
.mjggo-form input[type="text"], .mjggo-form input[type="number"]{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;font-size:14px}
.mjggo-hint{display:block;margin-top:6px;color:#999;font-size:11px}
.mjggo-total{margin:16px 0;font-size:14px}
.mjggo-total b{font-size:20px;font-weight:800;margin:0 6px}
.mjggo-submit{background:#f0c343;border:none;border-radius:14px;padding:12px 24px;font-weight:800;box-shadow:0 6px 14px rgba(240,195,67,.35);cursor:pointer}
.mjggo-error{background:#fff3f3;border:1px solid #ffd7d7;border-radius:12px;padding:14px}

/* --- ریسپانسیو فقط برای مدیا (دایره + عکسِ کارت بزرگ) --- */
@media (max-width:1360px){
  .mjggo-price-card{
    --coin-size: 480px; --img-size: 380px;
    --coin-right: 84px;  --coin-bottom: -78px;
    --img-right: 138px;  --img-bottom: -18px;
  }
}
@media (max-width:1100px){
  .mjggo-price-card{
    --coin-size: 420px; --img-size: 320px;
    --coin-right: 98px;  --coin-bottom: -68px;
    --img-right: 190px;  --img-bottom: -16px;
  }
}
@media (max-width:780px){
  .mjggo-price-card{
    --coin-size: 320px; --img-size: 240px;
    --coin-right: 156px; --coin-bottom: -72px;
    --img-right: 230px;  --img-bottom: -47px;
  }
}

/* =================================================================== */
/*                     گرید کارت‌ها (2×2) – حالت گروهی                */
/* =================================================================== */
.mjggo-grid-card-wrap{
  background:#fff;border:1px solid #eee;border-radius:22px;padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06)
}
.mjggo-grid-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 6px 12px;border-bottom:1px dashed #f0f0f0;margin-bottom:12px
}
.mjggo-grid-head span{color:#6c7382;font-size:13px}
.mjggo-grid-head .mjggo-grid-live{font-size:15px;font-weight:800;color:#1abc9c;display:flex;gap:8px;align-items:center}
.mjggo-grid-head .mjggo-grid-live b{font-size:22px}

.mjggo-grid-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:900px){.mjggo-grid-cards{grid-template-columns:1fr}}

/* کارت کوچک با همان حس کارت بزرگ */
.mjggo-card{
  position:relative;background:#fff;border:1px solid #eee;border-radius:18px;
  padding:14px 14px 80px 14px; overflow:hidden; text-align:right; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.05);
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.mjggo-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.07)}
.mjggo-card.is-active{border-color:rgba(26,188,156,.35); box-shadow:0 12px 30px rgba(26,188,156,.10)}
.mjggo-card.is-active::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1.5px rgba(26,188,156,.18);pointer-events:none}

/* مدیای کارت کوچک (دایره + عکس) */
.mjggo-card-media{position:absolute; inset:0; pointer-events:none; z-index:1;}
.mjggo-card-coin{
  position:absolute; width: var(--t-coin-size, 240px); height: var(--t-coin-size, 240px); border-radius:50%;
  right: var(--t-coin-right, 251px); bottom: var(--t-coin-bottom, -56px);
  background: radial-gradient(closest-side, rgba(245,229,191,.95), rgba(231,200,120,.85) 60%, rgba(231,200,120,.35) 75%, rgba(231,200,120,.15) 100%);
  filter: blur(.3px);
  box-shadow: inset 0 0 60px rgba(255,255,255,.65), 0 10px 26px rgba(0,0,0,.06);
  opacity:.9;
}
.mjggo-card-img{
  position:absolute; width: var(--t-img-size, 220px); height: var(--t-img-size, 182px); border-radius:50%;
  right: var(--t-img-right, 284px); bottom: var(--t-img-bottom, -42px);
  object-fit:contain; background:transparent;
  opacity:.52; filter:drop-shadow(0 10px 22px rgba(0,0,0,.14)) drop-shadow(0 2px 6px rgba(0,0,0,.08)) saturate(1.05) contrast(1.02) brightness(1.02);
}

/* ------ چیدمان جدید: عنوان بالا / قیمت زیرش (بدون Flex) ------ */
.mjggo-grid-cards .mjggo-card{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:min-content min-content; /* title | price */
  grid-template-areas:
    "title"
    "price";
  align-content:start;

  /* متغیرهای راحت برای سایزدهی */
  --card-title-size: 22px;
  --card-number-size: 20px;
  --card-currency-size: 22px;
  --card-gap: 6px;
}

/* عنوان بالای کارت */
.mjggo-grid-cards .mjggo-card-title{
  grid-area:title;
  margin:0 0 var(--card-gap);
  font-size:var(--card-title-size);
  font-weight:800; line-height:1.6; color:#3e4250;
  position:relative; z-index:2; text-align:right;
}

/* قیمت در ردیف دوم */
.mjggo-grid-cards .mjggo-card-price{
  grid-area:price;
  display:block !important;   /* فلکس نباشه */
  margin:0; text-align:right;
  color:#1abc9c; font-weight:800; position:relative; z-index:2;
}
.mjggo-grid-cards .mjggo-card-price b{
  font-size:var(--card-number-size); font-weight:800;
}
.mjggo-grid-cards .mjggo-card-price .cur{
  font-size:var(--card-currency-size); opacity:.85; margin-right:6px; vertical-align:baseline;
}

/* کوچیک‌تر در اسکرین‌های پایین */
@media (max-width:1100px){
  .mjggo-card-price{font-size:18px}
  .mjggo-card-coin{ --t-coin-size: 220px; --t-coin-right: 560px; --t-coin-bottom: -52px; }
  .mjggo-card-img{  --t-img-size:  170px; --t-img-right: 580px; --t-img-bottom: -18px; }

  .mjggo-grid-cards .mjggo-card{
    --card-title-size: 13px;
    --card-number-size: 18px;
    --card-currency-size: 12px;
  }
}
@media (max-width:780px){
  .mjggo-card-price{font-size:17px}
  .mjggo-card-coin{ --t-coin-size: 200px; --t-coin-right: 135px; --t-coin-bottom: -48px; }
  .mjggo-card-img{  --t-img-size:  152px; --t-img-right: 156px; --t-img-bottom: -16px; }

  .mjggo-grid-cards .mjggo-card{
    --card-title-size: 13px;
    --card-number-size: 17px;
    --card-currency-size: 11px;
  }
}


/* Glass background for each item card */
:root{
  --mjg-glass-bg: #d3c2b363;            /* RRGGBBAA */
  --mjg-glass-border: #ffffff5c;        /* قاب ظریف */
}

/* کارت‌های گریدی (همون آیتم‌ها) */
.mjggo-card{
  background: var(--mjg-glass-bg) !important;
  border-color: var(--mjg-glass-border) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%); /* برای Safari */
}

/* حالت انتخاب‌شده هم کمی درخشان‌تر */
.mjggo-card.is-active{
  background: color-mix(in srgb, var(--mjg-glass-bg) 85%, #ecfdf5);
  border-color: #1abc9c66;
}

/* اگر خواستی خودِ کانتینر کارت‌ها بی‌رنگ باشه تا افکت بهتر دیده بشه: */
.mjggo-grid-card-wrap{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* --- Swap: فرم چپ | گرید راست (دسکتاپ) --- */
.mjggo-grid{
  direction: ltr;                 /* فقط جهت چیدمان گرید، نه متن */
  grid-template-columns: 420px 1fr;  /* ستون اول = فرم (چپ) | ستون دوم = گرید (راست) */
}
.mjggo-form-card,
.mjggo-grid-card-wrap{
  direction: rtl;                 /* متن و اعداد فارسی بماند */
}

/* اگر در موبایل می‌خواهی گرید بالای فرم بیاد (اختیاری) */
@media (max-width:900px){
  .mjggo-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "cards"
      "form";
  }
  .mjggo-grid-card-wrap{ grid-area: cards; }
  .mjggo-form-card{      grid-area: form; }
}