/* Cosmos Books — static port of design/claude-design-v1 (Kitob Sotuv + Rahmat). Values copied from the design. */

@font-face {
  font-family: Onest;
  src: url("../fonts/onest.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Unbounded;
  src: url("../fonts/unbounded.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: #fff; color: #0e1633; font-family: Onest, system-ui, sans-serif; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
a { color: #1c3d8f; }
@media (hover: hover) and (pointer: fine) { a:hover { color: #0e1633; } }
input, textarea { font-size: 16px; font-family: inherit; }
button, a { touch-action: manipulation; }
button { font-family: inherit; }
img { max-width: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@keyframes cb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
.press { transition: transform 140ms cubic-bezier(.23, 1, .32, 1); }
.press:active { transform: scale(.97); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #eceff5; padding-top: env(safe-area-inset-top, 0px); }
.site-header__bar { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header__logo { display: flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px; }
.site-header__logo img { height: 52px; width: auto; max-width: none; margin: -8px -14px; display: block; }
.site-header__actions { display: flex; align-items: center; gap: 20px; }
.site-header__phone { font-weight: 600; font-size: 15px; text-decoration: none; color: #0e1633; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.site-header__cta { background: #0e1633; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 999px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .site-header__cta:hover { color: #fff; } }
@media (max-width: 359px) {
  /* 320px phones: phone number and button must both fit next to the logo */
  .site-header__bar { gap: 8px; }
  .site-header__actions { gap: 10px; }
  .site-header__phone { font-size: 14px; }
  .site-header__cta { font-size: 14px; padding: 11px 14px; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(24px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 24px; order: 2; min-width: 0; }
.hero__heading { display: flex; flex-direction: column; gap: 14px; }
.hero__author { margin: 0; font-size: 17px; font-weight: 600; color: #1c3d8f; }
.hero__title { margin: 0; font-family: Unbounded, sans-serif; font-weight: 600; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; }
.hero__lead { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.hero__offer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; padding-top: 8px; }
.hero__price-block { display: flex; flex-direction: column; gap: 6px; }
.hero__price { font-family: Unbounded, sans-serif; font-weight: 700; font-size: clamp(34px, 4vw, 46px); letter-spacing: -.03em; line-height: 1; }
.hero__price-unit { font-size: .5em; font-weight: 600; }
.hero__delivery { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: #2a3352; }
.hero__delivery svg { flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-yellow { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: #f6e500; color: #0e1633; font-weight: 700; font-size: 17px; text-decoration: none; }
.btn-soft { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: 999px; background: #eef1f7; color: #0e1633; font-weight: 600; font-size: 16px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .btn-yellow:hover, .btn-soft:hover { color: #0e1633; } }
.hero__facts { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding-top: 20px; border-top: 1px solid #e6e9f0; }
.hero__facts dt { font-size: 13px; color: #5a6280; margin-bottom: 4px; }
.hero__facts dd { margin: 0; font-weight: 600; font-size: 15px; }

/* ---------- hero stage + 3D book ---------- */
.stage { order: 1; position: relative; border-radius: 28px; background: #0e1633; overflow: hidden; min-height: clamp(470px, 52vw, 600px); display: flex; align-items: center; justify-content: center; }
.stage__net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; }
.stage__drag { position: relative; width: 100%; height: 100%; min-height: inherit; padding-bottom: 34px; display: flex; align-items: center; justify-content: center; perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage__shadow { position: absolute; left: 50%; bottom: 9%; width: 240px; height: 34px; margin-left: -120px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(18px); }
.stage__hint { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font-size: 13px; color: #aab3cf; pointer-events: none; }

.book { position: relative; width: 270px; height: 415px; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(28deg); }
.book > * { position: absolute; }
.book__back { inset: 0; background: #142d6b; border-radius: 4px 0 0 4px; transform: rotateY(180deg) translateZ(22px); }
.book__board-edge { top: 0; left: 133.5px; width: 3px; height: 415px; background: #1d3a85; }
.book__board-edge--front { transform: translateZ(20.5px) rotateY(90deg) translateZ(135px); }
.book__board-edge--back { transform: translateZ(-20.5px) rotateY(90deg) translateZ(135px); }
.book__board-top { top: 206px; left: 0; width: 270px; height: 3px; background: #24438f; }
.book__board-top--front { transform: translateZ(20.5px) rotateX(90deg) translateZ(207.5px); }
.book__board-top--back { transform: translateZ(-20.5px) rotateX(90deg) translateZ(207.5px); }
.book__board-bottom { top: 206px; left: 0; width: 270px; height: 3px; background: #122a63; }
.book__board-bottom--front { transform: translateZ(20.5px) rotateX(-90deg) translateZ(207.5px); }
.book__board-bottom--back { transform: translateZ(-20.5px) rotateX(-90deg) translateZ(207.5px); }
.book__pages-side { top: 4px; left: 115.5px; width: 39px; height: 407px; background: linear-gradient(90deg, rgba(60, 40, 10, .18), transparent 22%, transparent 78%, rgba(60, 40, 10, .18)), repeating-linear-gradient(90deg, #f7f2e6 0 1px, #e3dac4 1px 2px); transform: rotateY(90deg) translateZ(131px); }
.book__pages-top { top: 188px; left: 6px; width: 260px; height: 39px; background: linear-gradient(0deg, rgba(60, 40, 10, .16), transparent 25%, transparent 75%, rgba(60, 40, 10, .16)), repeating-linear-gradient(0deg, #f7f2e6 0 1px, #e3dac4 1px 2px); transform: rotateX(90deg) translateZ(203.5px); }
.book__pages-bottom { top: 188px; left: 6px; width: 260px; height: 39px; background: #ddd3bb; transform: rotateX(-90deg) translateZ(203.5px); }
.book__bookmark { top: 185.5px; left: -9px; width: 16px; height: 44px; border-radius: 50% 0 0 50%; }
.book__bookmark--top { background: #d8c21a; transform: rotateX(90deg) translateZ(205px); }
.book__bookmark--bottom { background: #b8a412; transform: rotateX(-90deg) translateZ(205px); }
.book__spine { inset: 0; transform-style: preserve-3d; pointer-events: none; }
.book__spine-slice { position: absolute; top: 0; left: 132.80px; width: 4.4px; height: 415px; backface-visibility: hidden; }
.book__spine-slice:nth-of-type(1)  { background: hsl(222 64% 15.0%); transform: translateX(-108.75px) rotateY(-127.14deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(2)  { background: hsl(222 64% 15.9%); transform: translateX(-108.75px) rotateY(-121.43deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(3)  { background: hsl(222 64% 18.3%); transform: translateX(-108.75px) rotateY(-115.71deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(4)  { background: hsl(222 64% 20.6%); transform: translateX(-108.75px) rotateY(-110.00deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(5)  { background: hsl(222 64% 22.7%); transform: translateX(-108.75px) rotateY(-104.29deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(6)  { background: hsl(222 64% 24.5%); transform: translateX(-108.75px) rotateY(-98.57deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(7)  { background: hsl(222 64% 26.0%); transform: translateX(-108.75px) rotateY(-92.86deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(8)  { background: hsl(222 64% 27.1%); transform: translateX(-108.75px) rotateY(-87.14deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(9)  { background: hsl(222 64% 27.8%); transform: translateX(-108.75px) rotateY(-81.43deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(10) { background: hsl(222 64% 28.0%); transform: translateX(-108.75px) rotateY(-75.71deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(11) { background: hsl(222 64% 27.7%); transform: translateX(-108.75px) rotateY(-70.00deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(12) { background: hsl(222 64% 27.0%); transform: translateX(-108.75px) rotateY(-64.29deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(13) { background: hsl(222 64% 25.9%); transform: translateX(-108.75px) rotateY(-58.57deg) translateZ(34.25px); }
.book__spine-slice:nth-of-type(14) { background: hsl(222 64% 24.4%); transform: translateX(-108.75px) rotateY(-52.86deg) translateZ(34.25px); }
.book__spine-text { top: 0; left: 125px; width: 20px; height: 415px; display: flex; align-items: center; justify-content: center; transform: translateX(-108.75px) rotateY(-90deg) translateZ(34.65px); backface-visibility: hidden; }
.book__spine-text span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 10px/1 Arial, sans-serif; letter-spacing: .1em; color: #fff; white-space: nowrap; }
.book__spine-text b { color: #f6e500; font-weight: 700; }
.book__cover { inset: 0; width: 100%; height: 100%; transform: translateZ(22px); border-radius: 0 4px 4px 0; backface-visibility: hidden; overflow: hidden; }
.book__cover img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.book__hinge { inset: 0; border-radius: 0 4px 4px 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(255, 255, 255, .10) 4px, rgba(0, 0, 0, .30) 9px, rgba(255, 255, 255, .10) 13px, rgba(0, 0, 0, 0) 22px); transform: translateZ(22.2px); backface-visibility: hidden; }
.book__sheen { inset: 0; border-radius: 0 4px 4px 0; pointer-events: none; transform: translateZ(22.3px); backface-visibility: hidden; }
@media (max-width: 807px), (max-height: 500px) {
  /* phones (incl. landscape): the 470px stage is at its minimum; a slightly smaller book keeps clear of the hint */
  .book { scale: .9; }
}
@media (max-width: 339px) {
  .stage { min-height: 440px; }
  .book { scale: .84; }
}

/* ---------- order ---------- */
.order { background: #f2f4f8; scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
.order__inner { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); }
.order__title { margin: 0 0 clamp(24px, 4vw, 40px); font-family: Unbounded, sans-serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.025em; }
.order__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; align-items: stretch; }

.card-fields { background: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-weight: 600; font-size: 15px; }
.field__input { height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #dfe3ec; background: #fff; color: #0e1633; outline: none; width: 100%; }
.field__textarea { padding: 14px 16px; border-radius: 14px; border: 1.5px solid #dfe3ec; background: #fff; color: #0e1633; outline: none; resize: vertical; line-height: 1.45; width: 100%; }
.field__phone { display: flex; align-items: center; height: 54px; border-radius: 14px; border: 1.5px solid #dfe3ec; background: #fff; overflow: hidden; }
.field__prefix { padding: 0 4px 0 16px; font-weight: 600; color: #0e1633; }
.field__phone input { flex: 1; min-width: 0; height: 100%; padding: 0 16px 0 6px; border: 0; outline: none; background: transparent; color: #0e1633; }
.field__input:focus, .field__textarea:focus, .field__phone:focus-within { border-color: #1c3d8f; }
.field.is-invalid .field__input, .field.is-invalid .field__textarea, .field.is-invalid .field__phone { border-color: #d92d20; }
.field__error { color: #d92d20; font-size: 14px; }
.field__input::placeholder, .field__textarea::placeholder, .field__phone input::placeholder { color: #8a91a8; }

.pay { display: flex; flex-direction: column; gap: 10px; }
.pay__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay__option { height: 64px; border-radius: 14px; border: 2px solid #dfe3ec; background: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: border-color 150ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1); padding: 0 8px; min-width: 0; }
.pay__option:active { transform: scale(.97); }
.pay__option[aria-pressed="true"] { border-color: #0e1633; }
.pay__radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0e1633; display: flex; align-items: center; justify-content: center; }
.pay__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.pay__option[aria-pressed="true"] .pay__radio::after { background: #0e1633; }
.pay__logo--payme { height: 22px; width: auto; min-width: 0; }
.pay__logo--click { height: 24px; width: auto; min-width: 0; }
.pay.is-invalid .pay__option { border-color: #d92d20; }

.card-summary { background: #0e1633; color: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; justify-content: space-between; min-width: 0; }
.summary__book { display: flex; gap: 16px; align-items: center; }
.summary__cover { width: 64px; height: 98px; object-fit: cover; border-radius: 3px; flex-shrink: 0; display: block; }
.summary__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.summary__name { font-weight: 600; font-size: 16px; line-height: 1.3; }
.summary__sub { color: #aab3cf; font-size: 14px; }
.qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty__label { font-weight: 600; font-size: 15px; }
.qty__stepper { display: flex; align-items: center; gap: 4px; background: #1b2550; border-radius: 999px; padding: 4px; }
.qty__btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2a3566; color: #fff; font-size: 22px; cursor: pointer; transition: transform 140ms cubic-bezier(.23, 1, .32, 1), opacity 150ms ease; line-height: 1; padding: 0; }
.qty__btn:active { transform: scale(.92); }
.qty__btn[aria-disabled="true"] { opacity: .35; }
.qty__value { min-width: 44px; text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.lines { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid #26305a; font-size: 15px; }
.lines__row { display: flex; justify-content: space-between; gap: 12px; }
.lines__key { color: #c4cbe0; }
.lines__val { font-variant-numeric: tabular-nums; }
.lines__free { color: #f6e500; font-weight: 600; }
.grand { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.grand__label { font-weight: 600; font-size: 17px; }
.grand__value { margin-left: auto; font-family: Unbounded, sans-serif; font-weight: 700; font-size: min(clamp(26px, 3vw, 34px), 6.6vw); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 6.6vw cap: 8-digit totals (qty up to 99) on 320px phones */
.general-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: #3a1a24; color: #ffd5d5; font-size: 14px; line-height: 1.4; }
.submit { min-height: 60px; border-radius: 999px; border: 0; background: #f6e500; color: #0e1633; font-family: inherit; font-weight: 700; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 140ms cubic-bezier(.23, 1, .32, 1); }
.submit:active { transform: scale(.97); }
.submit[aria-busy="true"] { cursor: progress; }
.submit__spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #0e1633; border-right-color: transparent; animation: cb-spin .7s linear infinite; }
.summary__note { margin: 0; color: #aab3cf; font-size: 13px; line-height: 1.5; }
.card-summary :focus-visible { outline: 2px solid #f6e500; outline-offset: 2px; }

/* ---------- footer ---------- */
.site-footer { background: #0e1633; color: #fff; }
.site-footer__inner { padding-top: clamp(48px, 7vw, 80px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.site-footer__name { font-family: Unbounded, sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; line-height: 1; }
.site-footer__domain { color: #aab3cf; font-size: 15px; }
.site-footer__contacts { display: flex; flex-direction: column; gap: 12px; }
.site-footer__hint { color: #aab3cf; font-size: 14px; }
.site-footer__link { color: #fff; font-weight: 600; font-size: 18px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .site-footer__link:hover { color: #f6e500; } }
.site-footer :focus-visible { outline: 2px solid #f6e500; outline-offset: 2px; }

/* ---------- thank-you page (rahmat.php) ---------- */
.page-status { background: #f2f4f8; }
.status-layout { min-height: 100svh; display: flex; flex-direction: column; }
.status-header { background: #fff; border-bottom: 1px solid #eceff5; padding-top: env(safe-area-inset-top, 0px); }
.status-header__bar { padding-top: 10px; padding-bottom: 10px; }
.status-header__logo { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px; }
.status-header__logo img { height: 52px; width: auto; max-width: none; margin: -8px -14px; display: block; }
.status-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 6vw, 64px) 16px calc(clamp(24px, 6vw, 64px) + env(safe-area-inset-bottom, 0px)); }
.status-card { width: 100%; max-width: 520px; background: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.status-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.status-icon--paid { background: #f6e500; }
.status-icon--pending { background: #eef1f7; }
.status-icon--failed { background: #fde8e7; }
.status-icon__spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #1c3d8f; border-right-color: transparent; animation: cb-spin .8s linear infinite; }
.status-title { margin: 0; font-family: Unbounded, sans-serif; font-weight: 600; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
.status-text { margin: 0; font-size: 17px; line-height: 1.55; }
.status-summary { margin: 0; padding: 12px 18px; border-radius: 14px; background: #f2f4f8; font-weight: 600; font-size: 15px; }
.status-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding-top: 18px; margin-top: 6px; border-top: 1px solid #eceff5; width: 100%; font-size: 15px; }
.status-contacts a { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .status-icon__spinner, .submit__spinner { animation-duration: 2.4s; }
}