@charset "utf-8";
/* Chatomat web store.
   Reuses the site's existing shell (.top.single header, .postContent card, .footer) so the store
   looks native rather than bolted on. Brand colours: #2F2771 primary, #150C5D dark. */

:root {
  --brand: #2F2771;
  --brand-dark: #150C5D;
  --brand-soft: #efeef7;
  --line: #e2e2ea;
  --text: #3a3a44;
  --muted: #7b7b88;
  --ok: #1e9e63;
  --warn: #c9a227;
  --bad: #cf3b3b;
}

/* ---------- shell tweaks ---------- */
.top.shopTop { height: 240px; }
.shopContent { margin-top: -150px; }
.shopBox { padding: 22px 24px 30px !important; }
.shopContent h2 { margin-bottom: 24px; }

.cartButton {
  float: left;
  position: relative;
  margin-top: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .14);
  text-align: center;
  transition: background-color .2s;
}
.cartButton:hover { background-color: rgba(255, 255, 255, .26); }
.cartButton i { color: #fff; font-size: 17px; line-height: 40px; }
.cartBadge {
  position: absolute;
  top: -3px; left: -3px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: #ff6b5b;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
}
.footerLink { color: #cfcbe6; }
.footerLink:hover { color: #fff; }

/* ---------- generic bits ---------- */
.shopIntro { padding: 0 4px 14px; font-size: 14px; line-height: 2.1; color: var(--text); text-align: justify; }

.shopState { padding: 46px 16px; text-align: center; color: var(--muted); font-size: 15px; }
.shopState p { margin-bottom: 16px; }

.shopError {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid #f2c9c9;
  border-radius: 8px;
  background-color: #fdf1f1;
  color: var(--bad);
  font-size: 13px;
  line-height: 1.9;
}

.shopClosed {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #f0dfa8;
  border-radius: 8px;
  background-color: #fdf8e6;
  color: #8a6d1b;
  font-size: 14px;
}

.btnPrimary, .btnGhost, .btnPay {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  font-family: iranyekan, prn-number;
  font-size: 14px;
  cursor: pointer;
  transition: all .18s;
}
.btnPrimary { background-color: var(--brand); color: #fff; }
.btnPrimary:hover { background-color: var(--brand-dark); color: #fff; }
.btnGhost { background-color: #fff; color: var(--brand); }
.btnGhost:hover { background-color: var(--brand-soft); }

/* ---------- steps ---------- */
.shopSteps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shopSteps li {
  flex: 1 1 210px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fafafd;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
}
.shopSteps li span {
  display: inline-block;
  width: 22px; height: 22px;
  margin-left: 7px;
  border-radius: 50%;
  background-color: var(--brand);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

/* ---------- product grid ---------- */
.shopSection { margin-bottom: 34px; }
.sectionTitle {
  margin: 0 0 6px;
  padding-right: 12px;
  border-right: 4px solid var(--brand);
  font-size: 19px;
  color: var(--brand);
}
.sectionDesc { margin: 0 0 16px; padding-right: 16px; font-size: 13px; color: var(--muted); line-height: 1.9; }

.productGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
}

.productCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.productCard:hover { box-shadow: 0 6px 20px rgba(47, 39, 113, .12); transform: translateY(-2px); }

/* The real product artwork is 200x256 (portrait), while the inline SVG fallback is square. A
   fixed-height flex box with auto width fits both without distorting either. */
.productMedia {
  height: 96px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.productMedia img {
  max-height: 96px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.productIcon { width: 72px; height: 72px; }

.productName { margin: 0 0 8px; font-size: 16px; color: #2b2b33; }

.priceWas { margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.priceWas s { margin-left: 6px; }
.discountBadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background-color: #ffe9e6;
  color: #d9503f;
  font-size: 11px;
}

.productPrice { margin-bottom: 14px; font-size: 13px; color: var(--text); }
.productPrice strong { font-size: 19px; color: var(--brand-dark); }

.addToCart {
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background-color: var(--brand);
  color: #fff;
  font-family: iranyekan, prn-number;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .18s;
}
.addToCart:hover { background-color: var(--brand-dark); }
.addToCart:disabled { background-color: #b9b9c4; cursor: not-allowed; }
.addToCart.isAdded { background-color: var(--ok); }
.addToCart.isError { background-color: var(--bad); }
.addToCart i { margin-left: 5px; }

.shopNote {
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: #fafafd;
}
.shopNote p { margin: 0 0 6px; font-size: 13px; line-height: 2; color: var(--text); text-align: justify; }
.shopNote p:first-child { font-size: 14px; color: var(--brand); }
.shopNote i { margin-left: 6px; }

/* ---------- cart ---------- */
.cartTableWrap { overflow-x: auto; }
.cartTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.cartTable th, .cartTable td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.cartTable thead th { color: var(--muted); font-size: 12px; }
.cartTable .cellName { color: #2b2b33; font-size: 14px; }
.cartTable .cellTotal { color: var(--brand-dark); }

.qtyControl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.qtyControl button {
  width: 30px; height: 30px;
  border: none;
  background-color: #f5f5f9;
  color: var(--brand);
  font-size: 16px;
  cursor: pointer;
}
.qtyControl button:hover { background-color: var(--brand-soft); }
.qtyControl span { min-width: 34px; text-align: center; font-size: 14px; }

.removeLine { border: none; background: none; color: var(--bad); cursor: pointer; font-size: 14px; padding: 6px; }

.cartSummary { margin-top: 20px; }
.cartTotalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  background-color: var(--brand-soft);
  font-size: 14px;
  color: var(--text);
}
.cartTotalRow strong { font-size: 19px; color: var(--brand-dark); }
.cartActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ---------- checkout ---------- */
.checkoutStep { padding: 18px 0; border-bottom: 1px solid var(--line); }
.checkoutStep:last-child { border-bottom: none; }
.checkoutStep h3 { margin: 0 0 12px; font-size: 17px; color: var(--brand); }
.stepNum {
  display: inline-block;
  width: 26px; height: 26px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: var(--brand);
  color: #fff;
  font-size: 13px;
  line-height: 26px;
  text-align: center;
}
.stepHint { margin: 0 0 16px; font-size: 13px; line-height: 2; color: var(--muted); text-align: justify; }

.orderSummary { list-style: none; margin: 0 0 12px; padding: 0; }
.orderSummary li {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  color: var(--text);
}
.orderSummary li strong { color: var(--brand-dark); }
.editCartLink { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--brand); }
.editCartLink:hover { text-decoration: underline !important; }

.fieldRow { margin-bottom: 16px; }
.fieldRow label { display: block; margin-bottom: 7px; font-size: 13px; color: var(--text); }
.fieldRow input[type=text] {
  width: 100%;
  max-width: 320px;
  height: 42px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: iranyekan, prn-number;
  font-size: 15px;
  color: #2b2b33;
  outline: none;
  transition: border-color .18s;
}
.fieldRow input[type=text]:focus { border-color: var(--brand); }
.optional { color: var(--muted); font-size: 12px; }
.fieldHint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.9; color: var(--muted); }

.captchaGroup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.captchaImage {
  width: 160px; height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #f4f4f8;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.captchaImage svg { display: block; }
.captchaLoading { color: var(--muted); font-size: 13px; }
.captchaReload {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--brand);
  cursor: pointer;
}
.captchaReload:hover { background-color: var(--brand-soft); }
.captchaRow input[type=text] { max-width: 150px; }

.recipientCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #cfe8d8;
  border-radius: 10px;
  background-color: #f2fbf6;
}
.recipientCard i { font-size: 26px; color: var(--ok); }
.recipientLabel { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.recipientName { display: block; font-size: 19px; color: #1d1d26; }
.recipientId { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.recipientWarn {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #f0dfa8;
  border-radius: 8px;
  background-color: #fdf8e6;
  font-size: 13px;
  line-height: 2;
  color: #8a6d1b;
  text-align: justify;
}
.recipientWarn i { margin-left: 6px; }

.termsCheck { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 18px; font-size: 13px; color: var(--text); cursor: pointer; }
.termsCheck input { margin-top: 3px; }
.termsCheck a { color: var(--brand); text-decoration: underline !important; }

.btnPay {
  width: 100%;
  max-width: 380px;
  padding: 14px 24px;
  border: none;
  background-color: var(--ok);
  color: #fff;
  font-size: 16px;
}
.btnPay:hover:not(:disabled) { background-color: #17804f; }
.btnPay:disabled { background-color: #b9b9c4; cursor: not-allowed; }
.btnPay i { margin-left: 7px; }
.payNote { margin-top: 14px; font-size: 12px; line-height: 2; color: var(--muted); text-align: justify; }

/* ---------- receipt ---------- */
.receiptBanner { padding: 26px 16px 22px; text-align: center; }
.receiptBanner i { font-size: 46px; margin-bottom: 12px; }
.receiptBanner h3 { margin: 0 0 8px; font-size: 20px; color: #2b2b33; }
.receiptBanner p { font-size: 13px; line-height: 2; color: var(--muted); max-width: 520px; margin: 0 auto; }
.receipt--success .receiptBanner i { color: var(--ok); }
.receipt--pending .receiptBanner i { color: var(--warn); }
.receipt--failed .receiptBanner i { color: var(--bad); }

.receiptTable { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 13px; }
.receiptTable th, .receiptTable td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: right; }
.receiptTable th { width: 42%; color: var(--muted); font-size: 12px; }
.receiptTable td { color: var(--text); }
.mono { font-family: prn-number, monospace; letter-spacing: .5px; direction: ltr; display: inline-block; }
.dim { color: var(--muted); font-size: 12px; }

.receiptSubhead { margin: 0 0 10px; font-size: 15px; color: var(--brand); }
.receiptItems { list-style: none; margin: 0 0 20px; padding: 0; }
.receiptItems li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  color: var(--text);
}
.receiptItems .itemQty { color: var(--muted); }
.receiptItems .itemTotal { color: var(--brand-dark); }

.creditedBox {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid #cfe8d8;
  border-radius: 10px;
  background-color: #f2fbf6;
}
.creditedBox i { font-size: 24px; color: var(--ok); }
.creditedBox strong { display: block; font-size: 14px; color: #1d1d26; margin-bottom: 3px; }
.creditedBox span { font-size: 13px; color: var(--text); }

.receiptActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.receiptKeep { font-size: 12px; line-height: 2; color: var(--muted); text-align: center; }

/* ---------- terms ---------- */
.termsDoc { padding: 4px; }
.termsDoc h3 { margin: 24px 0 10px; font-size: 16px; color: var(--brand); }
.termsDoc h3:first-child { margin-top: 4px; }
.termsDoc p { margin: 0 0 12px; font-size: 13px; line-height: 2.1; color: var(--text); text-align: justify; }
.termsDoc ul { margin: 0 0 14px; padding-right: 20px; }
.termsDoc li { margin-bottom: 9px; font-size: 13px; line-height: 2.1; color: var(--text); text-align: justify; list-style: disc; }
.termsDoc a { color: var(--brand); text-decoration: underline !important; }
.termsUpdated { margin-top: 26px; font-size: 12px; color: var(--muted); }

/* ---------- responsive ---------- */
@media screen and (max-width: 750px) {
  .top.shopTop { height: 210px; }
  .shopContent { margin-top: -130px; }
  .cartButton { margin-left: 44px; }
}

@media screen and (max-width: 620px) {
  .shopBox { padding: 16px 14px 24px !important; }
  .productGrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .cartTable th:nth-child(2), .cartTable td:nth-child(2) { display: none; }
  .cartActions, .receiptActions { justify-content: stretch; }
  .cartActions a, .receiptActions a { flex: 1 1 100%; text-align: center; }
  .receiptTable th { width: 46%; }
}

/* homepage hero CTA into the store */
.slider ul li .caption a.heroShopBtn {
  display: inline-block;
  float: none;
  margin-top: 22px;
  margin-left: 0;
  padding: 11px 26px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #2F2771;
  font-size: 15px;
}
.slider ul li .caption a.heroShopBtn:hover { background-color: #e6e3f5; }

/* ---------- 404 ---------- */
.notFoundBox { padding: 40px 20px; text-align: center; }
.notFoundCode {
  font-size: 76px;
  line-height: 1;
  color: var(--brand);
  opacity: .18;
  margin-bottom: 14px;
}
.notFoundBox p { font-size: 15px; line-height: 2; color: var(--muted); margin-bottom: 26px; }
.notFoundActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }