/**
 * Mashoof Sales — shared styles.
 *
 * Written with logical properties (inline-start/end) rather than left/right so
 * it coexists with Flatsome's own RTL sheet instead of fighting it.
 */

:root {
  --msh-brand: #173f2a;
  --msh-brand-dark: #20372a;
  --msh-gold: #b68a3a;
  --msh-gold-light: #d7b56d;
  --msh-cream: #f7f1e5;
  --msh-ink: #20372a;
  --msh-muted: #6f766f;
  --msh-line: #e7ded0;
  --msh-surface: #ffffff;
  --msh-surface-2: #fbf8f1;
  --msh-danger: #c0392b;
  --msh-radius: 18px;
  --msh-shadow: 0 18px 48px rgba(32, 55, 42, 0.16);
}

.msh-retail-otp {
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-cream);
  color: var(--msh-ink);
  text-align: center;
}

.msh-retail-otp strong { display: block; font-size: 1.05rem; }
.msh-retail-otp p { margin: 7px 0 16px; color: var(--msh-muted); }
.msh-retail-otp button {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--msh-brand);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* ---------------------------------------------------------------- dialog shell */

.msh-auth {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  direction: rtl;
}

.msh-auth[hidden] {
  display: none;
}

.msh-auth__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(2px);
}

.msh-auth.is-visible .msh-auth__backdrop {
  opacity: 1;
}

.msh-auth__sheet {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 26px 26px;
  border-radius: var(--msh-radius);
  background: var(--msh-surface);
  box-shadow: var(--msh-shadow);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.msh-auth.is-visible .msh-auth__sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.msh-auth__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--msh-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.msh-auth__close:hover {
  background: var(--msh-surface-2);
}

/* Drag handle — only meaningful in the mobile bottom-sheet layout. */
.msh-auth__grip {
  display: none;
}

/* ------------------------------------------------------------------ typography */

.msh-auth__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--msh-ink);
  line-height: 1.6;
}

.msh-auth__subtitle {
  margin: 0 0 22px;
  font-size: 0.9rem;
  color: var(--msh-muted);
  line-height: 1.9;
}

.msh-auth__link {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--msh-brand);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------------- fields */

.msh-field {
  display: block;
  margin-bottom: 18px;
}

.msh-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--msh-ink);
}

.msh-field__input {
  display: block;
  width: 100%;
  height: 52px;
  padding-inline: 14px;
  border: 1.5px solid var(--msh-line);
  border-radius: 10px;
  background: var(--msh-surface);
  color: var(--msh-ink);
  font-size: 1.05rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.msh-field__input:focus {
  outline: none;
  border-color: var(--msh-brand);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.14);
}

.msh-field__input--phone {
  letter-spacing: 0.08em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The honeypot must be unreachable for humans but present for bots. */
.msh-honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------- otp boxes */

.msh-otp {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.msh-otp__box {
  width: 52px;
  height: 60px;
  padding: 0;
  border: 1.5px solid var(--msh-line);
  border-radius: 10px;
  background: var(--msh-surface);
  color: var(--msh-ink);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.msh-otp__box:focus {
  outline: none;
  border-color: var(--msh-brand);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.14);
}

/* --------------------------------------------------------------------- buttons */

.msh-auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--msh-brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.msh-auth__submit:hover:not(:disabled) {
  background: var(--msh-brand-dark);
}

.msh-auth__submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.msh-auth__resend {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--msh-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.msh-auth__resend:disabled {
  cursor: default;
  opacity: 0.7;
}

.msh-auth__resend:not(:disabled) {
  color: var(--msh-brand);
  text-decoration: underline;
}

/* -------------------------------------------------------------------- messages */

.msh-auth__error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.08);
  color: var(--msh-danger);
  font-size: 0.85rem;
  line-height: 1.8;
}


/* ========================================================================
   Embedded authentication and secure-code feedback
   ======================================================================== */
.msh-auth--inline{position:relative;inset:auto;z-index:auto;display:block;width:100%;font-family:inherit;text-align:right}
.msh-auth--inline .msh-auth__sheet{width:100%;max-height:none;overflow:visible;padding:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;transform:none}
.msh-auth--inline.is-visible .msh-auth__sheet{opacity:1;transform:none}
.msh-auth--inline .msh-auth__step{margin:0}
.msh-field__phone-wrap{position:relative;display:block}
.msh-field__phone-wrap>i{position:absolute;inset-block-start:8px;inset-inline-end:9px;display:grid;place-items:center;height:36px;min-width:45px;padding-inline:7px;border-radius:8px;background:#f3eee4;color:#8a6b2d;font-style:normal;font-size:.78rem;font-weight:800;direction:ltr;pointer-events:none}
.msh-field__phone-wrap .msh-field__input--phone{padding-inline:60px 14px;text-align:left;letter-spacing:.08em}
.msh-auth__privacy{display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 0;color:#859087;font-size:.72rem;line-height:1.8;text-align:center}
.msh-auth__privacy span{color:var(--msh-gold);font-size:1rem}
.msh-auth__error-action{display:flex;align-items:center;justify-content:center;min-height:42px;margin:-5px 0 14px;border:1px solid #d5b15f;border-radius:9px;background:#fff9ea;color:#745311;font-size:.82rem;font-weight:800;text-decoration:none}

.msh-otp-wrap{position:relative;margin-bottom:16px;padding:3px 0 0;overflow:hidden;border-radius:14px}
.msh-otp-wrap .msh-otp{margin-bottom:0}
.msh-auth__security{display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;margin-top:12px;color:#4a6557;font-size:.78rem}
.msh-auth__security-icon{position:relative;display:grid;place-items:center;width:25px;height:25px;border:2px solid #ccb477;border-top-color:var(--msh-brand);border-radius:50%}
.msh-auth__security-icon i{display:block;width:7px;height:7px;border-radius:50%;background:var(--msh-brand)}
.msh-auth.is-verifying .msh-auth__security-icon{animation:msh-auth-spin .8s linear infinite}
.msh-auth.is-verifying .msh-otp-wrap:after{content:"";position:absolute;inset-inline:8%;inset-block-start:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--msh-gold-light),var(--msh-brand),transparent);box-shadow:0 0 13px rgba(182,138,58,.7);animation:msh-auth-scan 1.05s ease-in-out infinite}
.msh-auth.is-verifying .msh-otp__box{border-color:#d8c69e;background:#fffcf5;color:#476052;box-shadow:inset 0 0 0 1px rgba(182,138,58,.1)}
.msh-auth.is-verified .msh-otp__box{border-color:#6ca483;background:#edf8f1;color:#0a6740;box-shadow:0 0 0 3px rgba(23,106,67,.08);animation:msh-auth-confirm .35s ease both}
.msh-auth.is-verified .msh-auth__security{color:#0a6740}
.msh-auth.is-verified .msh-auth__security-icon{border-color:#0a7548;background:#0a7548}
.msh-auth.is-verified .msh-auth__security-icon:after{content:"✓";color:#fff;font-size:14px;font-weight:900}
.msh-auth.is-verified .msh-auth__security-icon i{display:none}
.msh-auth.has-code-error .msh-otp{animation:msh-auth-shake .32s ease}
.msh-auth.has-code-error .msh-otp__box{border-color:#d9978f;background:#fff7f5}

@keyframes msh-auth-spin{to{transform:rotate(360deg)}}
@keyframes msh-auth-scan{0%,100%{transform:translateY(4px);opacity:.35}50%{transform:translateY(61px);opacity:1}}
@keyframes msh-auth-confirm{0%{transform:scale(.92)}70%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes msh-auth-shake{25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}

@media(max-width:640px){
  .msh-auth--inline{display:block;align-items:initial}
  .msh-auth--inline .msh-auth__sheet{width:100%;max-height:none;padding:0;border-radius:0;transform:none}
  .msh-auth--inline.is-visible .msh-auth__sheet{transform:none}
  .msh-auth--inline .msh-otp{gap:8px}
  .msh-auth--inline .msh-otp__box{width:min(52px,18vw);height:55px}
}

@media(prefers-reduced-motion:reduce){
  .msh-auth.is-verifying .msh-auth__security-icon,.msh-auth.is-verifying .msh-otp-wrap:after,.msh-auth.is-verified .msh-otp__box,.msh-auth.has-code-error .msh-otp{animation:none}
}

body.msh-auth-open {
  overflow: hidden;
}

/* ------------------------------------------------------------- mobile: sheet up */

@media (max-width: 640px) {
  .msh-auth {
    align-items: flex-end;
  }

  .msh-auth__sheet {
    width: 100%;
    max-height: 92vh;
    padding: 18px 20px 30px;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }

  .msh-auth.is-visible .msh-auth__sheet {
    transform: translateY(0);
  }

  .msh-auth__grip {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 99px;
    background: var(--msh-line);
  }

  .msh-auth__close {
    display: none;
  }

  .msh-otp__box {
    width: 46px;
    height: 56px;
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msh-auth__backdrop,
  .msh-auth__sheet {
    transition: none;
  }
}

/* ============================================================================
   Shared components
   These appear on WooCommerce pages too (checkout, thank-you), not only in the
   panel, so they live in the always-loaded sheet.
   ========================================================================== */

.msh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding-inline: 22px;
  border: 0;
  border-radius: 10px;
  background: var(--msh-brand);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.msh-button:hover {
  background: var(--msh-brand-dark);
  color: #fff !important;
}

.msh-button--ghost {
  background: transparent;
  border: 1.5px solid var(--msh-brand);
  color: var(--msh-brand) !important;
}

.msh-button--ghost:hover {
  background: rgba(31, 122, 77, 0.08);
  color: var(--msh-brand) !important;
}

.msh-button--small {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 0.82rem;
}

/* ------------------------------------------------------------ checkout gate */

.msh-checkout-gate {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 20px 22px;
  border: 1.5px solid var(--msh-brand);
  border-radius: var(--msh-radius);
  background: rgba(31, 122, 77, 0.05);
}

.msh-checkout-gate__icon {
  font-size: 1.8rem;
  line-height: 1;
}

.msh-checkout-gate__body {
  flex: 1 1 260px;
}

.msh-checkout-gate__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--msh-ink);
}

.msh-checkout-gate__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--msh-muted);
}

.msh-checkout-gate__button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding-inline: 22px;
  border-radius: 10px;
  background: var(--msh-brand);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

/* --------------------------------------------------------------- thank you */

.msh-thankyou {
  margin-bottom: 30px;
  padding: 30px 26px;
  border-radius: var(--msh-radius);
  background: var(--msh-surface-2);
  text-align: center;
}

.msh-thankyou__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--msh-brand);
  color: #fff;
  font-size: 1.8rem;
}

.msh-thankyou__title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
}

.msh-thankyou__lead {
  margin: 0 0 24px;
  color: var(--msh-muted);
}

.msh-thankyou__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 0 0 26px;
  text-align: center;
}

.msh-thankyou__facts dt {
  margin-bottom: 5px;
  font-size: 0.78rem;
  color: var(--msh-muted);
}

.msh-thankyou__facts dd {
  margin: 0;
  font-weight: 700;
  color: var(--msh-ink);
}

.msh-thankyou__cta {
  padding: 20px;
  border-radius: 12px;
  background: var(--msh-surface);
}

.msh-thankyou__cta-text {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--msh-muted);
}

.msh-thankyou__button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-inline: 28px;
  border-radius: 10px;
  background: var(--msh-brand);
  color: #fff !important;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.msh-thankyou__button:hover {
  background: var(--msh-brand-dark);
}

/* ---------------------------------------------------------------- timeline */

.msh-timeline {
  margin: 26px 0;
  padding: 24px 20px;
  border: 1px solid var(--msh-line);
  border-radius: var(--msh-radius);
  background: var(--msh-surface);
}

.msh-timeline__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: msh-step;
}

.msh-timeline__step {
  position: relative;
  flex: 1;
  padding-top: 30px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--msh-muted);
}

/* The connector sits behind the dots and stops at the first and last step. */
.msh-timeline__step::before {
  content: '';
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 50%;
  width: 100%;
  height: 3px;
  background: var(--msh-line);
}

.msh-timeline__step:last-child::before {
  display: none;
}

.msh-timeline__step.is-done::before {
  background: var(--msh-brand);
}

.msh-timeline__dot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 19px;
  height: 19px;
  border: 3px solid var(--msh-line);
  border-radius: 50%;
  background: var(--msh-surface);
  z-index: 1;
}

.msh-timeline__step.is-done .msh-timeline__dot {
  border-color: var(--msh-brand);
  background: var(--msh-brand);
}

.msh-timeline__step.is-current .msh-timeline__dot {
  border-color: var(--msh-brand);
  background: var(--msh-surface);
  box-shadow: 0 0 0 5px rgba(31, 122, 77, 0.16);
}

.msh-timeline__step.is-done,
.msh-timeline__step.is-current {
  color: var(--msh-ink);
  font-weight: 700;
}

.msh-timeline__label {
  display: block;
}

.msh-timeline__date {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--msh-muted);
}

.msh-timeline__tracking {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--msh-line);
}

.msh-timeline__tracking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.msh-timeline__tracking-label {
  font-size: 0.85rem;
  color: var(--msh-muted);
}

.msh-timeline__tracking-code {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--msh-surface-2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.msh-copy {
  padding: 6px 12px;
  border: 1px solid var(--msh-line);
  border-radius: 8px;
  background: var(--msh-surface);
  font: inherit;
  font-size: 0.78rem;
  color: var(--msh-muted);
  cursor: pointer;
}

.msh-copy.is-copied {
  border-color: var(--msh-brand);
  color: var(--msh-brand);
}

.msh-timeline__carrier {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--msh-muted);
}

.msh-timeline__tracking-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--msh-brand);
  font-size: 0.85rem;
}

.msh-timeline--stopped .msh-timeline__stopped {
  margin: 0;
  text-align: center;
  color: var(--msh-muted);
}

/* On a narrow screen a five-step horizontal bar becomes unreadable. */
@media (max-width: 640px) {
  .msh-timeline__track {
    flex-direction: column;
    gap: 20px;
  }

  .msh-timeline__step {
    padding: 0 0 0 34px;
    padding-inline-start: 34px;
    text-align: start;
  }

  .msh-timeline__step::before {
    inset-block-start: 20px;
    inset-inline-start: 9px;
    width: 3px;
    height: calc(100% + 20px);
    transform: none;
  }

  .msh-timeline__dot {
    inset-block-start: 1px;
    inset-inline-start: 0;
    transform: none;
  }

  .msh-timeline__date {
    display: inline;
    margin-inline-start: 8px;
  }
}

/* Test-mode banner inside the login sheet. Server-rendered: if it is not
   visible, test mode is genuinely off. */
.msh-auth__mode {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #fdf3d4;
  border: 1px solid #e8c86a;
  color: #7a5b06;
  font-size: 0.78rem;
  line-height: 1.9;
}

.msh-auth__test {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: #fdf3d4;
  border: 1px dashed #e8c86a;
  color: #7a5b06;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  direction: ltr;
  text-align: center;
}

/* ==========================================================================
   MASHOOUF SHARED AUTH UI SYSTEM
   ========================================================================== */
:where(.msh-auth-tabs,.msh-login-tabs){
	background:#f4f3ef;
	border:1px solid #e7e3da;
	border-radius:14px;
	padding:4px;
	gap:4px;
}
:where(.msh-auth-tabs,.msh-login-tabs) button{
	min-height:42px;
	border:0;
	border-radius:10px;
	background:transparent;
	color:#5d625f;
	font-weight:700;
	box-shadow:none;
	transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
:where(.msh-auth-tabs,.msh-login-tabs) button.is-active{
	background:#fff;
	color:#173f2a;
	box-shadow:0 1px 4px rgba(23,63,42,.08);
}
:where(.msh-auth-widget,.msh-login-widget) input{
	min-height:52px;
	border:1px solid #dcded9;
	border-radius:12px;
	background:#fff;
	box-shadow:none;
	transition:border-color .18s ease,box-shadow .18s ease;
}
:where(.msh-auth-widget,.msh-login-widget) input:focus{
	border-color:#8fa995;
	box-shadow:0 0 0 3px rgba(23,63,42,.08);
	outline:none;
}
:where(.msh-auth-widget,.msh-login-widget) button[type="submit"],
:where(.msh-auth-widget,.msh-login-widget) .msh-btn--primary{
	min-height:52px;
	border:1px solid #173f2a;
	border-radius:12px;
	background:#173f2a;
	color:#fff;
	font-weight:800;
	box-shadow:none;
	transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
:where(.msh-auth-widget,.msh-login-widget) button[type="submit"]:hover,
:where(.msh-auth-widget,.msh-login-widget) .msh-btn--primary:hover{
	background:#20372a;
	border-color:#20372a;
}
:where(.msh-auth-widget,.msh-login-widget) button[type="submit"]:active,
:where(.msh-auth-widget,.msh-login-widget) .msh-btn--primary:active{
	transform:translateY(1px);
}