/* includes/gift/gift.web.css
   Gift Books — desktop (≥900px) styling per the delivered design
   (2-Gift books- Masaustu-Teslim, July 2026). Site font ("gfb") replaces the
   prototype's Plus Jakarta Sans stand-in, matching the web-wide font. Accent
   #FF501C / #F4511E, quote box #FBE9E2, hero panels #050505 / #333537. */

.gift-web { background: #fff; color: #111318; }

/* [hidden] must win over the display:flex screen/panel classes below */
.gift-web [hidden] { display: none !important; }

/* Honeypot — visually gone, still fillable by bots */
.gift-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Hero banner (listing sub-page pattern: .web-listing__hero) ---- */
.gift-web__hero {
  background: #050505;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.gift-web__hero-inner {
  max-width: 1312px;
  margin: 0 auto;
  min-height: 280px;
  display: flex;
  align-items: stretch;
  position: relative;
}
.gift-web__hero-text {
  flex: 0 0 auto;
  width: 50%;
  padding: 56px 24px 56px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: #ffffff;
  position: relative;
  z-index: 2;
}
.gift-web__hero-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.gift-web__hero-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
  color: #e6e6e6;
}
.gift-web__hero-subtitle--dim { color: #b9bcc1; }
.gift-web__hero-image {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background: #333537;
  /* Same steep diagonal slice as the listing hero image area. */
  clip-path: polygon(180px 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  padding: 20px 0;
}
.gift-web__hero-row { display: flex; gap: 14px; }
.gift-web__hero-row--a { margin-left: 60px; }
.gift-web__hero-row--b { margin-left: 10px; }
.gift-web__hero-cover {
  flex: none;
  width: 88px;
  aspect-ratio: 166 / 238;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}

/* ---- Breadcrumb bar (listing pattern) ---- */
.gift-web__bar {
  max-width: 1312px;
  margin: 0 auto;
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.gift-web__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #101010;
}
.gift-web__crumb a { color: #101010; text-decoration: none; }
.gift-web__crumb a:hover { color: #F4511E; }
.gift-web__crumb-sep { color: #8a8f96; }

/* Responsive fallback — same breakpoints as the listing hero */
@media (max-width: 1360px) {
  .gift-web__hero-inner,
  .gift-web__bar { padding-left: 24px; padding-right: 24px; max-width: 100%; }
}
@media (max-width: 1024px) {
  .gift-web__hero-title { font-size: 44px; }
  .gift-web__hero-image { width: 50%; }
}

/* ---- Gift section ---- */
.gift-web__section, .gift-web__closed { padding: 0 clamp(20px, 4vw, 48px); }
.gift-web__heading {
  margin: 56px 0 0;
  text-align: center;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.4px;
}
.gift-web__ribbon { display: flex; justify-content: center; margin-top: 18px; }

.gift-web__quote {
  max-width: 1160px;
  margin: 36px auto 0;
  background: #FBE9E2;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 4vw, 60px);
  text-align: center;
}
.gift-web__quote-text { margin: 0; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; color: #111318; }
.gift-web__quote-author { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: #111318; }

/* ---- Form ---- */
.gift-web__form {
  max-width: 640px;
  margin: 56px auto 90px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.gift-web__field { position: relative; }
.gift-web__label { display: block; font-size: 14.5px; font-weight: 500; color: #101010; margin-bottom: 9px; }
.gift-web__req { color: #F4511E; }
.gift-web__hint { color: #8a8f96; font-weight: 400; }

.gift-web__input {
  width: 100%;
  height: 52px;
  background: #fff;
  border: 1.5px solid #808080;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 15px;
  font-family: inherit;
  color: #111318;
  outline: none;
}
.gift-web__input:focus { border-color: #111318; }
.gift-web__input::placeholder { color: #a7abb2; }
.gift-web__input.is-invalid { border-color: #c62828; }
.gift-web__input.is-edit { border-color: #F4511E; }
.gift-web__textarea { height: auto; padding: 14px 16px; line-height: 1.5; resize: none; }

.gift-web__row { display: flex; flex-wrap: wrap; gap: 20px; }
.gift-web__field--half { flex: 1 1 260px; min-width: 0; }

.gift-web__phone { display: flex; gap: 10px; position: relative; }
.gift-web__dial {
  flex: none;
  height: 52px;
  background: #fff;
  border: 1.5px solid #808080;
  border-radius: 8px;
  padding: 0 12px 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #111318;
}
.gift-web__dial:hover { border-color: #8a8f96; }
.gift-web__dial.is-invalid { border-color: #c62828; }
.gift-web__dial.is-edit { border-color: #F4511E; }
.gift-web__input--phone { flex: 1; min-width: 0; }

.gift-web__langbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 0 16px;
  text-align: left;
  cursor: pointer;
}
.gift-web__langbtn:hover { border-color: #8a8f96; }
.gift-web__langbtn-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #111318;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-web__langbtn-label.is-placeholder { color: #a7abb2; }
.gift-web__langbtn svg { flex: none; }

/* ---- Popovers (desktop pattern: anchored panel, 14px corners) ---- */
@keyframes gift-pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.gift-web__pop {
  position: absolute;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(17, 19, 24, .22);
  z-index: 30;
  display: flex;
  flex-direction: column;
  animation: gift-pop .18s ease;
}
.gift-web__pop--dial { left: 0; width: min(380px, 88vw); max-height: 400px; }
.gift-web__pop--lang { left: 0; right: 0; max-height: 420px; }
.gift-web__pop-search { position: relative; padding: 14px 14px 10px; flex: none; }
.gift-web__pop-search svg { position: absolute; left: 26px; top: 27px; }
.gift-web__pop-search input {
  width: 100%;
  border: 1.5px solid #d6d9dd;
  border-radius: 9px;
  height: 42px;
  padding: 0 12px 0 37px;
  font-size: 14px;
  font-family: inherit;
  color: #111318;
  outline: none;
  background: transparent;
}
.gift-web__pop-list { flex: 1; overflow-y: auto; padding: 0 6px 8px; scrollbar-width: thin; }
.gift-web__pop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.gift-web__pop-row:hover { background: #f4f5f6; }
.gift-web__pop-row.is-sel { background: rgba(244, 81, 30, .07); }
.gift-web__pop-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gift-web__pop-row-name {
  font-size: 14.5px;
  font-weight: 500;
  color: #111318;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-web__pop-row.is-sel .gift-web__pop-row-name { color: #F4511E; }
.gift-web__pop-row--lang .gift-web__pop-row-name { font-weight: 600; }
.gift-web__pop-row-sub { font-size: 12px; color: #8a8f96; }
.gift-web__pop-row-code { flex: none; font-size: 14px; font-weight: 600; color: #8a8f96; }
.gift-web__pop-row-check { flex: none; }
.gift-web__pop-empty { padding: 30px 16px; text-align: center; color: #8a8f96; font-size: 13.5px; }
.gift-web__pop-foot { flex: none; padding: 10px 14px 14px; border-top: 1px solid #eceef0; }
.gift-web__pop-warn { text-align: center; font-size: 13px; font-weight: 600; color: #c62828; padding-bottom: 9px; }
.gift-web__pop-done {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #FF501C;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.gift-web__pop-done:hover { background: #d8430f; }

.gift-web__catcher { position: fixed; inset: 0; z-index: 25; }

/* ---- Error + submit ---- */
.gift-web__error { margin: 0; text-align: center; font-size: 13.5px; font-weight: 600; color: #c62828; }
.gift-web__submit-row { display: flex; justify-content: center; margin-top: 8px; }
.gift-web__submit {
  height: 48px;
  padding: 0 42px;
  border: 0;
  border-radius: 8px;
  background: #FF501C;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity .25s ease, background .2s, transform .15s ease;
}
.gift-web__submit:hover { background: #d8430f; }
.gift-web__submit:active { transform: scale(.97); }
.gift-web__submit.is-idle { opacity: .5; }
.gift-web__submit.is-busy { opacity: .6; pointer-events: none; }

/* ---- Thank-you ---- */
.gift-web__done {
  max-width: 640px;
  margin: 70px auto 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@keyframes gift-pop-in { 0% { transform: scale(.8); } 55% { transform: scale(1.09); } 100% { transform: scale(1); } }
.gift-web__done-badge {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(46, 125, 50, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gift-pop .35s ease;
}
.gift-web__done-title {
  margin: 30px 0 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  max-width: 420px;
  text-wrap: balance;
}
.gift-web__done-sub { margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; color: #5a5f66; }

.gift-web__cta {
  height: 48px;
  padding: 0 38px;
  border: 0;
  border-radius: 8px;
  background: #FF501C;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  margin-top: 36px;
}
.gift-web__cta:hover { background: #d8430f; }

/* ---- Closed (coffee) ---- */
.gift-web__closed {
  max-width: 640px;
  margin: 90px auto 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gift-web__closed-title {
  margin: 28px 0 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  max-width: 340px;
  text-wrap: balance;
}
.gift-web__closed-body { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: #5a5f66; max-width: 420px; }

/* ---- WhatsApp confirm modal ---- */
.gift-web__modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(17, 19, 24, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gift-web__modal {
  width: 520px;
  max-width: 94vw;
  background: #fff;
  border-radius: 18px;
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .4);
  animation: gift-pop .22s ease;
}
.gift-web__modal-badge {
  width: 84px; height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(37, 211, 102, .1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-web__modal-title { margin: 22px 0 0; font-size: 22px; font-weight: 700; }
.gift-web__modal-sub { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: #5a5f66; }
.gift-web__modal-number { margin-top: 18px; font-size: 26px; font-weight: 700; letter-spacing: .5px; color: #F4511E; }
.gift-web__modal-yes {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 8px;
  background: #FF501C;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  margin-top: 28px;
}
.gift-web__modal-yes:hover { background: #d8430f; }
.gift-web__modal-edit {
  width: 100%;
  height: 50px;
  border: 1.5px solid #d6d9dd;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #111318;
  cursor: pointer;
  margin-top: 12px;
}
.gift-web__modal-edit:hover { background: #f4f5f6; }