/* ==========================================================================
   LAMSET NOOR STUDIO — components.css
   Buttons, cards, forms, badges, media frames, modal, toast
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  --btn-pad-y: 1rem;
  --btn-pad-x: 2.3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-lux),
              color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast),
              box-shadow var(--t-fast);
  will-change: transform;
}

html[lang='ar'] .btn { letter-spacing: .04em; font-weight: 500; text-transform: none; font-size: .82rem; }

.btn:active { transform: scale(.97); }

.btn__icon {
  display: inline-flex;
  transition: transform var(--t-fast) var(--ease-lux);
}
.btn:hover .btn__icon { transform: translateX(4px); }
html[dir='rtl'] .btn:hover .btn__icon { transform: translateX(-4px); }

/* Primary — gold fill */
.btn--gold {
  color: #0A0810;
  background: var(--gold-grad);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 8px 30px rgba(212, 175, 55, .28);
}
.btn--gold:hover {
  background-position: 100% 50%;
  box-shadow: 0 14px 46px rgba(212, 175, 55, .45);
  transform: translateY(-3px);
}

/* Ghost — gold outline with sweep fill */
.btn--ghost {
  color: var(--text);
  border: 1px solid var(--line);
}
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-grad);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease-lux);
}
.btn--ghost:hover { color: #0A0810; border-color: transparent; transform: translateY(-3px); }
.btn--ghost:hover::before { transform: translateY(0); }

/* Bare text link with animated rule */
.btn--link {
  padding: .35rem 0;
  border-radius: 0;
  color: var(--gold-text);
  background: none;
}
/* transform-origin takes physical keywords only, so RTL is flipped explicitly */
.btn--link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease-lux);
}
.btn--link:hover::after { transform: scaleX(1); transform-origin: left; }
html[dir='rtl'] .btn--link::after { transform-origin: left; }
html[dir='rtl'] .btn--link:hover::after { transform-origin: right; }

.btn--sm { --btn-pad-y: .72rem; --btn-pad-x: 1.6rem; font-size: .68rem; }
.btn--lg { --btn-pad-y: 1.2rem; --btn-pad-x: 3rem; }
.btn--block { width: 100%; }

/* Icon-only circular button */
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface);
  transition: all var(--t-fast) var(--ease-lux);
}
.icon-btn:hover {
  color: var(--gold-text);
  border-color: var(--gold-400);
  transform: translateY(-3px) rotate(6deg);
  box-shadow: var(--glow);
}
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- Badge / pill ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(12px);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-2);
}
html[lang='ar'] .badge { letter-spacing: .03em; text-transform: none; }

.badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, .6);
  animation: pulseDot 2.4s var(--ease-soft) infinite;
}

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .55); }
  70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* ---------- Card ---------- */
.card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease-lux),
              border-color var(--t-mid),
              box-shadow var(--t-mid);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-grad-soft);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-soft);
}

.card:hover {
  transform: translateY(-8px);
  border-color: var(--line);
  box-shadow: var(--shadow-m);
}
.card:hover::before { opacity: 1; }

.card__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-400);
  opacity: .5;
  transition: opacity var(--t-mid);
}
.card:hover .card__num { opacity: 1; }

.card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold-text);
  margin-block-end: 1.4rem;
  transition: all var(--t-mid) var(--ease-back);
}
.card:hover .card__icon {
  background: var(--gold-grad);
  color: #0A0810;
  border-color: transparent;
  transform: rotate(-8deg) scale(1.06);
}
.card__icon svg { width: 22px; height: 22px; }

.card__title { font-size: 1.4rem; margin-block-end: .7rem; }
.card__text { font-size: var(--fs-body); line-height: 1.8; }

/* Glass variant */
.card--glass {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
}

/* Bordered ornate variant */
.card--ornate { border: 1px solid var(--line); }
.card--ornate::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius-m) - 6px);
  pointer-events: none;
  opacity: .6;
}

/* ---------- Media frame ---------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  isolation: isolate;
}

.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-lux), filter var(--t-mid);
}

.frame:hover img,
.frame:hover video { transform: scale(1.07); }

.frame--gold { border: 1px solid var(--line); box-shadow: var(--shadow-m); }

.frame--offset::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-400);
  border-radius: var(--radius-m);
  transform: translate(14px, 14px);
  opacity: .35;
  pointer-events: none;
  z-index: -1;
}

.ratio-1 { aspect-ratio: 1 / 1; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-34 { aspect-ratio: 3 / 4; }
.ratio-916 { aspect-ratio: 9 / 16; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-32 { aspect-ratio: 3 / 2; }

/* ---------- Forms ---------- */
.field { position: relative; display: flex; flex-direction: column; gap: .5rem; }

.field__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-3);
}
html[lang='ar'] .field__label { letter-spacing: .03em; text-transform: none; font-size: .78rem; }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.field__textarea { resize: vertical; min-height: 140px; line-height: 1.75; }

.field__select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 16px;
  padding-inline-end: 2.8rem;
}
html[dir='rtl'] .field__select {
  background-position: left 1.1rem center;
  padding-inline-end: 1.2rem;
  padding-inline-start: 2.8rem;
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-3); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .13);
  outline: none;
}

.field__input:invalid:not(:placeholder-shown),
.field__textarea:invalid:not(:placeholder-shown) { border-color: #C7573F; }

/* Choice chips */
.chips { display: flex; flex-wrap: wrap; gap: .65rem; }

.chip {
  position: relative;
  cursor: pointer;
  padding: .68rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease-lux);
  user-select: none;
}
.chip:hover { border-color: var(--gold-400); color: var(--text); transform: translateY(-2px); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) {
  background: var(--gold-grad);
  color: #0A0810;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(212, 175, 55, .3);
}
.chip.is-active {
  background: var(--gold-grad);
  color: #0A0810;
  border-color: transparent;
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 3, 6, .88);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-soft), visibility var(--t-mid);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__body {
  position: relative;
  max-width: min(96vw, 1180px);
  max-height: 88vh;
  transform: scale(.94) translateY(18px);
  transition: transform var(--t-mid) var(--ease-lux);
}
.modal.is-open .modal__body { transform: scale(1) translateY(0); }

.modal__close {
  position: absolute;
  inset-block-start: -54px;
  inset-inline-end: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 235, .25);
  color: #F5F2EB;
  transition: all var(--t-fast);
}
.modal__close:hover { background: var(--gold-400); color: #0A0810; border-color: transparent; transform: rotate(90deg); }

.modal__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 235, .22);
  color: #F5F2EB;
  background: rgba(10, 8, 14, .5);
  backdrop-filter: blur(8px);
  transition: all var(--t-fast);
}
.modal__nav:hover { background: var(--gold-400); color: #0A0810; }
.modal__nav--prev { inset-inline-start: -68px; }
.modal__nav--next { inset-inline-end: -68px; }

@media (max-width: 900px) {
  .modal__nav--prev { inset-inline-start: 8px; }
  .modal__nav--next { inset-inline-end: 8px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  inset-block-end: 26px;
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--gold-400);
  box-shadow: var(--shadow-m), var(--glow);
  font-size: var(--fs-small);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--t-mid) var(--ease-lux);
  max-width: calc(100vw - 2rem);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--gold-400); flex-shrink: 0; }

/* ---------- Stat ---------- */
.stat { display: flex; flex-direction: column; gap: .35rem; text-align: center; }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1;
  font-weight: 300;
  background: var(--gold-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--text-3);
}
html[lang='ar'] .stat__label { letter-spacing: .03em; text-transform: none; font-size: .8rem; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  z-index: var(--z-nav);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #25D366, #128C7E);
  color: #fff;
  box-shadow: 0 10px 34px rgba(37, 211, 102, .38);
  transition: transform var(--t-fast) var(--ease-back), box-shadow var(--t-fast);
}
.wa-float:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 16px 44px rgba(37, 211, 102, .55); }
.wa-float svg { width: 27px; height: 27px; }
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: waRipple 2.6s var(--ease-soft) infinite;
}

@keyframes waRipple {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 26px;
  z-index: var(--z-nav);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(12px);
  color: var(--gold-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--t-fast) var(--ease-lux);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold-grad); color: #0A0810; border-color: transparent; }
.to-top svg { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .wa-float { width: 50px; height: 50px; inset-block-end: 18px; inset-inline-end: 18px; }
  .to-top { width: 40px; height: 40px; inset-block-end: 18px; inset-inline-start: 18px; }
}

/* ---------- Review card (Google listing layout) ---------- */
.rev-card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: border-color var(--t-mid), transform var(--t-mid) var(--ease-lux), box-shadow var(--t-mid);
}
.rev-card:hover { border-color: var(--gold-400); transform: translateY(-6px); box-shadow: var(--shadow-s); }

.rev-card__head { display: flex; align-items: center; gap: .8rem; }

.rev-card__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  flex-shrink: 0;
  text-transform: uppercase;
}

.rev-card__who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.rev-card__name {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-card__sub {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-micro);
  color: var(--text-3);
  flex-wrap: wrap;
}

.rev-card__guide {
  padding: .1rem .45rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--gold-text);
  font-size: .62rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

.rev-card__g {
  margin-inline-start: auto;
  width: 19px; height: 19px;
  flex-shrink: 0;
  opacity: .95;
}
.rev-card__g svg { width: 100%; height: 100%; }

.rev-card__stars { display: flex; gap: .1rem; color: #FBBC05; }
.rev-card__stars svg { width: 15px; height: 15px; }

.rev-card__text {
  font-size: .96rem;
  line-height: 1.78;
  color: var(--text-2);
  flex: 1;
}
html[lang='ar'] .rev-card__text { font-size: .98rem; line-height: 2.05; }

/* ---------- Google rating badge ---------- */
.g-badge {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.6rem);
  flex-wrap: wrap;
  padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.6vw, 2rem);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.g-badge__logo { width: 34px; height: 34px; flex-shrink: 0; }
.g-badge__logo svg { width: 100%; height: 100%; }

.g-badge__body { display: flex; flex-direction: column; gap: .18rem; }
.g-badge__top { display: flex; align-items: center; gap: .6rem; }

.g-badge__score {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--text);
}

.g-badge__stars { display: flex; gap: .1rem; color: #FBBC05; }
.g-badge__stars svg { width: 16px; height: 16px; }

.g-badge__meta { font-size: var(--fs-small); color: var(--text-3); }

.g-badge__link {
  margin-inline-start: auto;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--gold-text);
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
  transition: opacity var(--t-fast);
  white-space: nowrap;
}
html[lang='ar'] .g-badge__link { letter-spacing: .02em; text-transform: none; font-size: .85rem; }
.g-badge__link:hover { opacity: .7; }

@media (max-width: 620px) {
  .g-badge { justify-content: center; text-align: center; }
  .g-badge__link { margin-inline-start: 0; width: 100%; text-align: center; }
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  animation: marqueeMove 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 2.3rem);
  font-style: italic;
  color: var(--text-3);
  white-space: nowrap;
}
.marquee__item span { color: var(--gold-text); font-style: normal; opacity: .85; }

@keyframes marqueeMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html[dir='rtl'] .marquee__track { animation-name: marqueeMoveRtl; }
@keyframes marqueeMoveRtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}