#offer-dialog {
  width: min(882px, calc(100vw - 36px));
  max-width: none;
  max-height: none;
  top: 11px;
  padding: 0;
  margin: auto;
  border: 0;
  background: transparent;
  color: #302923;
  overflow: visible;
  isolation: isolate;
  box-shadow: none;
}

#offer-dialog::backdrop { background: rgba(4, 19, 32, .58); backdrop-filter: none; }
#offer-dialog[open] { animation: offer-appear .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes offer-appear { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

#offer-dialog .offer-sheet {
  position: absolute;
  z-index: -1;
  top: 8%;
  bottom: 7%;
  width: 24%;
  background: #d8d1c6;
  border-radius: 13px;
  box-shadow: 0 22px 40px #07192455;
}
#offer-dialog .offer-sheet-left { left: -3%; transform: rotate(-2.7deg); }
#offer-dialog .offer-sheet-right { right: -3%; transform: rotate(2.7deg); }

#offer-dialog .offer-shell {
  position: relative;
  height: 700px;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: #f3f0eb;
  box-shadow: 0 25px 70px #041421a1;
}

#offer-dialog .offer-visual { position: relative; overflow: hidden; color: #36352f; }
#offer-dialog .offer-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
#offer-dialog .offer-visual-copy {
  position: absolute;
  top: 35.5%;
  left: 19%;
  font: 11px/1.72 Georgia, serif;
  letter-spacing: .32em;
  text-shadow: 0 1px 12px #fff9;
}
#offer-dialog .offer-visual-copy p { margin: 0; }
#offer-dialog .offer-small-rule { display: block; width: 28px; height: 1px; margin: 17px 0; background: currentColor; opacity: .7; }

#offer-dialog .offer-content {
  position: relative;
  padding: 44px 20px 20px 56px;
  background: radial-gradient(ellipse at 18% 25%,#fffefa 0,#f6f3ee 45%,#ede9e2 100%);
}
#offer-dialog .offer-main { position: relative; z-index: 1; width: 383px; max-width: 100%; }
#offer-dialog .offer-close {
  position: absolute;
  z-index: 4;
  top: 21px;
  right: 22px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #292520;
}
#offer-dialog .offer-close:hover { transform: rotate(90deg); transition: transform .35s; }
#offer-dialog .offer-eyebrow { font: 11px/1.3 Georgia,serif; letter-spacing: .31em; color: #786d63; }
#offer-dialog .offer-eyebrow span { color: #c8ac7a; }
#offer-dialog h2 {
  width: 475px;
  max-width: none;
  margin: 16px 0 0;
  font: 400 64px/.91 var(--serif);
  letter-spacing: -.032em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleX(1.2);
  transform-origin: left center;
}
#offer-dialog .offer-subtitle {
  margin: 7px 0 17px;
  font: italic 30px/.94 var(--script);
  letter-spacing: -.026em;
}
#offer-dialog form { width: 383px; max-width: 100%; }
#offer-dialog .offer-field {
  width: 100%;
  height: 57px;
  display: flex;
  align-items: center;
  border: 1px solid #d7d0c5;
  border-radius: 17px;
  background: rgba(255,255,255,.22);
  color: #a4a09b;
}
#offer-dialog .offer-phone-field { border-color: #c7ad80; color: #302923; }
#offer-dialog .offer-name-field { height: 54px; margin-top: 9px; }
#offer-dialog .offer-phone-prefix { display: flex; align-items: center; gap: 7px; padding: 0 11px 0 24px; }
#offer-dialog .offer-flag { width: 18px; height: 12px; display: inline-block; flex: 0 0 auto; border: 1px solid #ddd; background: linear-gradient(to bottom,#fff 0 33.33%,#1655a4 33.33% 66.66%,#df1d36 66.66%); }
#offer-dialog .offer-flag[data-country="by"] { background: linear-gradient(to bottom,#c72334 0 65%,#179653 65%); }
#offer-dialog .offer-flag[data-country="kg"] { background: #e63830; }
#offer-dialog .offer-phone-prefix select { width: 26px; border: 0; padding: 0; background: transparent; color: #302923; appearance: none; font: 14px Arial,sans-serif; cursor: pointer; }
#offer-dialog .offer-phone-prefix select:has(option[value="+375"]:checked),#offer-dialog .offer-phone-prefix select:has(option[value="+996"]:checked) { width: 37px; }
#offer-dialog .offer-chevron { flex: 0 0 auto; pointer-events: none; margin-left: -4px; }
#offer-dialog .offer-field-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
#offer-dialog .offer-field-copy>span { font: 10px/1.1 Georgia,serif; letter-spacing: .16em; color: #9c948a; }
#offer-dialog .offer-field-copy input { display: block; width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #302923; font: 13px/1.5 Arial,sans-serif; box-shadow: none; }
#offer-dialog .offer-field-copy input::placeholder { color: #aaa29b; opacity: 1; }
#offer-dialog .offer-field:focus-within { box-shadow: 0 0 0 2px #b89c7190; }
#offer-dialog .offer-field-icon { margin: 0 21px 0 10px; color: #c9ad78; }
#offer-dialog .offer-person-icon { flex: 0 0 auto; margin: 0 21px 0 20px; color: #aaa59e; }

#offer-dialog fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
#offer-dialog .offer-channels { margin-top: 12px; }
#offer-dialog .offer-channels legend { margin-bottom: 7px; color: #7c766f; font: 13px/1.25 Arial,sans-serif; }
#offer-dialog .offer-channel-list { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
#offer-dialog .offer-channel-list label { display: flex; align-items: center; gap: 5px; font: 11px/1 Arial,sans-serif; color: #807970; cursor: pointer; }
#offer-dialog input[type="checkbox"],#offer-dialog input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
#offer-dialog .offer-box { position: relative; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #beb8ae; background: transparent; }
#offer-dialog input:checked+.offer-box { border-color: #7b6549; }
#offer-dialog input:checked+.offer-box::after { content: ''; position: absolute; left: 3px; top: 2px; width: 10px; height: 6px; border-left: 2px solid #7b6549; border-bottom: 2px solid #7b6549; transform: rotate(-45deg); }
#offer-dialog input:focus-visible+.offer-box,#offer-dialog input:focus-visible+.offer-radio { outline: 2px solid #a98755; outline-offset: 3px; }
#offer-dialog .offer-purposes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; }
#offer-dialog .offer-purpose { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; border: 1px solid #dbd5cc; border-radius: 17px; cursor: pointer; }
#offer-dialog .offer-purpose:has(input:checked) { border-color: #bea174; background: #f7f2e9; }
#offer-dialog .offer-radio { position: relative; width: 19px; height: 19px; flex: 0 0 19px; border: 1px solid #aaa49b; border-radius: 50%; }
#offer-dialog input:checked+.offer-radio { border-color: #b59769; }
#offer-dialog input:checked+.offer-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #a48455; }
#offer-dialog .offer-purpose strong { display: block; white-space: nowrap; font: 10px/1.4 Georgia,serif; letter-spacing: .13em; font-weight: 400; }
#offer-dialog .offer-purpose small { display: block; white-space: nowrap; font: 9px/1.4 Arial,sans-serif; letter-spacing: .08em; color: #aaa39b; }
#offer-dialog .offer-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 54px; margin-top: 11px; padding: 0 35px 0 45px; border: 1px solid #c7a878; border-radius: 18px; background: linear-gradient(140deg,#fff9f0,#eee7da); color: #302923; box-shadow: 0 5px 14px #6f5e4940; font: 18px/1 var(--serif); letter-spacing: .055em; white-space: nowrap; transition: box-shadow .25s,transform .25s; }
#offer-dialog .offer-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #6f5e4960; }
#offer-dialog .offer-consent { display: flex; align-items: flex-start; gap: 14px; margin-top: 15px; font: 10px/1.15 Arial,sans-serif; color: #a19a92; cursor: pointer; }
#offer-dialog .offer-consent .offer-box { width: 20px; height: 20px; flex-basis: 20px; background: #7b6549; border-radius: 2px; }
#offer-dialog .offer-consent input:checked+.offer-box::after { border-color: #fff; }
#offer-dialog .offer-consent input:not(:checked)+.offer-box { background: transparent; }
#offer-dialog .offer-consent a { color: inherit; text-decoration: underline; }
#offer-dialog .offer-status { position: fixed; bottom: 22px; left: 50%; z-index: 2; width: min(500px, calc(100vw - 48px)); margin: 0; padding: 12px 16px; border: 1px solid #b89c71; border-radius: 10px; background: #fff9f0; color: #47372a; box-shadow: 0 4px 12px #0004; font: 12px/1.35 Arial,sans-serif; transform: translateX(-50%); }
#offer-dialog .offer-status a { text-decoration: underline; }

#offer-dialog .offer-aside { position: absolute; z-index: 0; top: 326px; right: 16px; bottom: 25px; width: 99px; pointer-events: none; }
#offer-dialog .offer-handwriting { font: italic 27px/.96 var(--script); color: #6d6259; transform: rotate(-9deg); }
#offer-dialog .offer-aside-rule { display: block; width: 27px; height: 1px; margin: 20px 0 0 11px; background: #8e8071; }
#offer-dialog .offer-leaves { position: absolute; right: -15px; bottom: 23px; filter: blur(.3px); }
#offer-dialog .offer-aside-words { position: absolute; bottom: 0; left: 0; font: 11px/1.75 Georgia,serif; letter-spacing: .22em; color: #6e665e; }
#offer-dialog .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) and (min-width: 701px) {
  #offer-dialog { width: min(800px,calc(100vw - 32px)); }
  #offer-dialog .offer-shell { grid-template-columns: 32% minmax(0,1fr); }
  #offer-dialog .offer-content { padding-left: 7%; }
  #offer-dialog h2 { font-size: clamp(48px,6vw,64px); max-width: none; }
  #offer-dialog .offer-aside { display: none; }
}

@media (max-width: 700px) {
  #offer-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: visible; }
  #offer-dialog .offer-sheet { display: none; }
  #offer-dialog .offer-shell { display: block; height: auto; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; }
  #offer-dialog .offer-visual { height: 150px; }
  #offer-dialog .offer-photo { object-position: 50% 55%; }
  #offer-dialog .offer-visual-copy { top: 20px; left: 22px; font-size: 7px; letter-spacing: .23em; }
  #offer-dialog .offer-visual-copy p:last-child,#offer-dialog .offer-small-rule { display: none; }
  #offer-dialog { top: 0; }
  #offer-dialog .offer-content { padding: 22px 22px 26px; }
  #offer-dialog .offer-close { top: 12px; right: 12px; width: 31px; height: 31px; }
  #offer-dialog .offer-close svg { width: 23px; height: 23px; }
  #offer-dialog .offer-main,#offer-dialog form { width: 100%; }
  #offer-dialog .offer-eyebrow { font-size: 9px; }
  #offer-dialog h2 { width: auto; max-width: none; margin-top: 12px; font-size: clamp(34px,8.6vw,53px); line-height: .91; transform: none; }
  #offer-dialog .offer-subtitle { margin: 9px 0 16px; font-size: clamp(23px,6vw,30px); }
  #offer-dialog .offer-channel-list { flex-wrap: wrap; row-gap: 9px; }
  #offer-dialog .offer-purposes { gap: 6px; }
  #offer-dialog .offer-purpose { padding: 0 9px; gap: 6px; }
  #offer-dialog .offer-purpose strong { font-size: 8px; }
  #offer-dialog .offer-purpose small { font-size: 7px; letter-spacing: 0; }
  #offer-dialog .offer-submit { padding: 0 20px; font-size: 17px; }
  #offer-dialog .offer-aside { display: none; }
  #offer-dialog .offer-status { position: static; transform: none; margin-top: 12px; }
}

@media (max-width: 370px) {
  #offer-dialog .offer-content { padding-left: 15px; padding-right: 15px; }
  #offer-dialog .offer-purpose strong { font-size: 7.5px; }
  #offer-dialog .offer-purpose small { font-size: 6.5px; }
  #offer-dialog .offer-submit { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) { #offer-dialog[open] { animation: none; } }
