@charset "UTF-8";
@font-face {
  font-family: "IRANYekan";
  src: url("https://sazito.com/shop-fonts/fonts/iran-yekan/IRANYekanXVF.woff2?v=2026-09-29.1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --gp-orange: #f26529;
  --gp-peach: #ec9860;
  --gp-cream: #fff1e1;
  --gp-ink: #2c2c2d;
  --gp-muted: #75757b;
  --gp-border: #e8e0d6;
  font: 15px/1.9 "IRANYekan", Tahoma, sans-serif;
  color: var(--gp-ink);
  background: #fff;
}
* {box-sizing: border-box;}
body {margin: 0;}
button, input, select, textarea {font: inherit;}
button {cursor: pointer;}
.standalone {min-height: 100vh; background: #f8f6f3;}
.club-site-header {background: #fff;}
.shipping-ribbon {
  padding: 9px 12px; background: var(--gp-peach); color: #fff;
  text-align: center; font-size: 12px; font-weight: 700;
}
.site-nav {
  max-width: 1200px; margin: auto; padding: 13px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-logo {display: flex; align-items: center; gap: 10px; line-height: 1.5;}
.site-logo img, .brand-logo {display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;}
.site-logo strong {display: block; font-weight: 850; letter-spacing: .3px; font-size: 16px;}
.site-logo small {display: block; font-size: 10px; color: #85858c;}
.site-nav a {text-decoration: none; color: #5c5c65; font-size: 12px;}
.site-nav a:hover {color: var(--gp-orange);}
.club-shell {
  width: min(1100px, calc(100% - 36px)); margin: 30px auto 45px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border: 1px solid #f0e2d4; border-radius: 18px;
  overflow: hidden; box-shadow: 0 18px 60px #49302524;
}
.intro-panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--gp-cream); padding: 47px 50px 50px;
  color: var(--gp-ink); min-height: 550px;
  display: flex; flex-direction: column; justify-content: center;
}
.intro-panel:after {
  content: ""; position: absolute; left: -125px; bottom: -225px; z-index: -1;
  width: 460px; height: 460px; border: 1px solid #ccaa8d55; border-radius: 50%;
}
.orb {position: absolute; border: 1px solid #c7a18b33; border-radius: 50%; z-index: -1;}
.orb-one {width: 240px; height: 240px; left: -150px; top: -80px;}
.orb-two {width: 170px; height: 170px; right: -125px; bottom: -90px;}
.brand {display: flex; align-items: center; gap: 10px; margin-bottom: 27px;}
.brand-word {font-size: 15px; font-weight: 850; line-height: 1.55; letter-spacing: .5px;}
.brand-word span {display: block; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #8b786b;}
.eyebrow {font-size: 11px; font-weight: 750; color: #a96e4d; margin: 10px 0 4px;}
.intro-panel h1 {font-size: clamp(26px, 3.4vw, 37px); line-height: 1.72; font-weight: 900; margin: 6px 0 12px;}
.intro-copy {font-size: 13px; line-height: 2.1; color: #665a54; margin: 7px 0 10px; max-width: 385px;}
.benefits {list-style: none; padding: 0; margin: 20px 0 0; font-size: 12px; line-height: 2.7;}
.benefits li:before {content: "✦"; color: var(--gp-orange); margin-left: 9px;}
.saffron-emblem {position: absolute; left: 5px; bottom: 10px; opacity: .23; pointer-events: none;}
.form-panel {position: relative; background: #fff; padding: 46px 49px 27px;}
.form-kicker {font-size: 12px; color: var(--gp-orange); font-weight: 800;}
.form-panel h2 {font-size: 25px; line-height: 1.55; font-weight: 850; color: var(--gp-ink); margin: 7px 0;}
.form-description {font-size: 12px; color: #88888f; margin: 3px 0 18px; line-height: 2;}
label {display: block; font-size: 12px; font-weight: 650; color: #38383f; margin-bottom: 13px;}
label b {color: var(--gp-orange);}
label .optional {color: #8e8e94; font-size: 11px; font-weight: 450;}
label input:not([type="checkbox"]) {
  display: block; width: 100%; height: 45px; margin-top: 6px;
  border: 1px solid var(--gp-border); border-radius: 9px;
  padding: 9px 13px; background: #fff; color: var(--gp-ink);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
label input:focus {border-color: var(--gp-orange); box-shadow: 0 0 0 3px #f265291c;}
input::placeholder {color: #b4b4ba;}
.two-col {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.consent {display: flex; align-items: flex-start; gap: 9px; margin: 5px 0 15px; font-size: 10.5px; font-weight: 450; color: #777781; line-height: 2.05;}
.consent input {flex: none; margin: 5px 0 0; accent-color: var(--gp-orange);}
.join-button, .setup-form button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; border: 0; border-radius: 9px; min-height: 47px;
  background: var(--gp-orange); color: #fff; padding: 11px 18px;
  font-weight: 800; font-size: 13px; box-shadow: 0 9px 21px #f2652930;
}
.join-button:hover, .setup-form button:hover {background: #e3531e;}
button:disabled {opacity: .65; cursor: not-allowed;}
.form-message {margin-top: 8px; min-height: 19px; font-size: 11px; color: #ae342e;}
.form-message.ok {color: #26754b;}
.privacy {text-align: center; color: #99999f; font-size: 10px; line-height: 1.8; margin: 8px 0 0;}
.trap {position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important;}
.embedded {background: transparent;}
.embedded .club-site-header {display: none;}
.embedded .club-shell {width: 100%; margin: 0; height: 100vh; min-height: 0; border: 0; border-radius: 0; box-shadow: none;}
.embedded .intro-panel {min-height: 0;}
.embedded .form-panel {overflow-y: auto;}
.close-frame {
  position: absolute; top: 11px; left: 11px; z-index: 3;
  width: 33px; height: 33px; border: 1px solid #ead8c7; border-radius: 50%;
  color: #9b5937; background: #fff6ed; font: 23px/1 Arial, sans-serif;
}
.close-frame:hover {color: #fff; background: var(--gp-orange);}
.setup-page {display: grid; min-height: 100vh; place-items: center; background: #f8f6f3;}
.setup-card {width: min(530px, 94vw); padding: 34px; background: #fff; border: 1px solid var(--gp-border); border-radius: 18px; box-shadow: 0 15px 40px #49302519;}
.setup-card h1 {font-size: 22px;}
.setup-form input {display: block; width: 100%; height: 45px; border: 1px solid var(--gp-border); border-radius: 9px; padding: 10px; margin-top: 6px;}
.setup-form label {font-size: 12px;}
.brand-small {color: var(--gp-orange); direction: ltr; text-align: left; font-size: 24px; font-weight: 900;}
.brand-small span {font: 600 12px Arial, sans-serif; letter-spacing: 2px;}
.notice {padding: 12px; border-radius: 9px; font-size: 12px;}
.notice.success {background: #e4f6eb; color: #256645;}
.notice.error {background: #fff0ed; color: #aa3730;}
.hint {color: #777781; font-size: 12px; line-height: 2;}
.primary-link {display: block; text-align: center; padding: 11px; background: var(--gp-orange); color: #fff; text-decoration: none; border-radius: 9px;}
@media (max-width: 800px) {
  .club-shell {grid-template-columns: 1fr; max-width: 510px; margin: 15px auto;}
  .intro-panel {min-height: 0; padding: 24px 26px 16px;}
  .intro-panel h1 {font-size: 25px; margin: 0; line-height: 1.55;}
  .intro-panel h1 br {display: none;}
  .intro-copy {display: none;}
  .brand {margin-bottom: 9px;}
  .eyebrow {margin: 7px 0 3px;}
  .benefits {display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 10px; line-height: 2; margin: 8px 0 0;}
  .saffron-emblem {display: none;}
  .form-panel {padding: 23px 26px 20px;}
  .form-panel h2 {font-size: 22px;}
  .form-description {margin-bottom: 15px;}
  .embedded .club-shell {height: 100vh; display: block; overflow-y: auto;}
  .embedded .form-panel {overflow: visible;}
}
@media (max-width: 420px) {
  .site-nav {padding: 12px 15px;}
  .site-nav a {font-size: 10px;}
  .two-col {grid-template-columns: 1fr; gap: 0;}
  .form-panel {padding: 19px 20px;}
  .intro-panel {padding: 17px 21px 12px;}
  .intro-panel h1 {font-size: 22px;}
  .benefits {font-size: 9px;}
}
