/*
 * Price calculator (/book, /services estimator) + e-signature (/sign).
 * A dedicated stylesheet rather than more inline <style> blocks, since three
 * pages now share this vocabulary. Matches the site's existing look (see the
 * .bkx-* rules already inline in book/index.html): FormaDJRVariable display
 * type, black-on-white light mode, html[data-theme="dark"] inverts it.
 * Noto Sans Georgian is listed explicitly so Georgian labels do not fall
 * through to a tofu-rendering system default on a machine without it.
 */
.gc {
  font-family: FormaDJRVariable, "Noto Sans Georgian", sans-serif;
  color: #111;
}
html[data-theme="dark"] .gc {
  color: #f2f2f2;
}

.gc-h1 {
  font-variation-settings:
    "wght" 640,
    "opsz" 44;
  font-size: clamp(38px, 7vw, 88px);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.gc-lede {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.7;
  margin-bottom: 36px;
  max-width: 60ch;
}

/* ---- step layout ---------------------------------------------------- */
.gc-step {
  margin-bottom: 34px;
}
.gc-step-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 12px;
}

/* Package cards */
.gc-pkgs {
  display: grid;
  /* auto-fit (not auto-fill) collapses empty tracks when there are fewer
     packages than fit the row, so 2 cards stretch to the form's full width
     instead of leaving a phantom third column's worth of dead space. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.gc-pkg {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 18px 18px 16px;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    background-color 0.22s ease;
  position: relative;
}
.gc-pkg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gc-pkg:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.gc-pkg.on {
  border-color: #000;
  background: rgba(0, 0, 0, 0.03);
}
.gc-pkg-name {
  display: block;
  font-variation-settings:
    "wght" 620,
    "opsz" 30;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.gc-pkg-desc {
  display: block;
  font-size: 13px;
  opacity: 0.65;
  margin-top: 6px;
  line-height: 1.5;
}
.gc-pkg-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* Pins the hours/price row to the bottom of the card regardless of how
     many lines the description above it wraps to, so cards in the same row
     line up even when their copy differs in length. */
  margin-top: auto;
  padding-top: 14px;
  font-variation-settings:
    "wght" 620,
    "opsz" 30;
}
.gc-pkg-hours {
  font-size: 12px;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gc-pkg-price {
  font-size: 16px;
}
html[data-theme="dark"] .gc-pkg {
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .gc-pkg:hover {
  border-color: rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .gc-pkg.on {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Extra-hours stepper */
.gc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 18px;
}
html[data-theme="dark"] .gc-stepper {
  border-color: rgba(255, 255, 255, 0.25);
}
.gc-stepper button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}
html[data-theme="dark"] .gc-stepper button {
  border-color: rgba(255, 255, 255, 0.35);
}
.gc-stepper button:disabled {
  opacity: 0.3;
  cursor: default;
}
.gc-stepper-val {
  min-width: 5ch;
  text-align: center;
  font-variation-settings:
    "wght" 620,
    "opsz" 30;
  font-size: 15px;
}
.gc-stepper-price {
  font-size: 12.5px;
  opacity: 0.6;
  margin-left: 8px;
}

/* Add-ons */
.gc-addons {
  display: grid;
  gap: 10px;
}
label.gc-addon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding: 13px 16px;
  cursor: pointer;
}
.gc-addon input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #111;
}
html[data-theme="dark"] .gc-addon input {
  accent-color: #fff;
}
.gc-addon-name {
  font-variation-settings:
    "wght" 600,
    "opsz" 24;
  font-size: 14.5px;
}
.gc-addon-desc {
  font-size: 12.5px;
  opacity: 0.6;
  margin-top: 2px;
}
.gc-addon-price {
  margin-left: auto;
  white-space: nowrap;
  font-size: 13.5px;
  padding-left: 12px;
}
html[data-theme="dark"] label.gc-addon {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Live totals */
.gc-summary {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 20px 22px;
  display: grid;
  gap: 8px;
  max-width: 420px;
}
html[data-theme="dark"] .gc-summary {
  border-color: rgba(255, 255, 255, 0.25);
}
.gc-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.gc-row.gc-total {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin-top: 6px;
  padding-top: 10px;
  font-variation-settings:
    "wght" 640,
    "opsz" 30;
  font-size: 18px;
}
html[data-theme="dark"] .gc-row.gc-total {
  border-color: rgba(255, 255, 255, 0.2);
}
.gc-row-label {
  opacity: 0.65;
}
.gc-row.gc-total .gc-row-label {
  opacity: 1;
}

/* ---- calendar --------------------------------------------------------- */
.gc-cal {
  max-width: 340px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 16px;
}
html[data-theme="dark"] .gc-cal {
  border-color: rgba(255, 255, 255, 0.25);
}
.gc-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gc-cal-head button {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  padding: 4px 8px;
}
.gc-cal-title {
  font-variation-settings:
    "wght" 620,
    "opsz" 30;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}
.gc-cal-dow {
  font-size: 10.5px;
  opacity: 0.5;
  padding: 4px 0;
  text-transform: uppercase;
}
.gc-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.gc-cal-day:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  text-decoration: line-through;
}
.gc-cal-day.gc-empty {
  visibility: hidden;
}
.gc-cal-day:not(:disabled):hover {
  border-color: rgba(0, 0, 0, 0.35);
}
.gc-cal-day.selected {
  background: #111;
  color: #fff;
}
html[data-theme="dark"] .gc-cal-day:not(:disabled):hover {
  border-color: rgba(255, 255, 255, 0.4);
}
html[data-theme="dark"] .gc-cal-day.selected {
  background: #fff;
  color: #111;
}
/* Hidden by default: the custom calendar above is the primary picker.
   JS only reveals this (adds .show) when the calendar itself fails to
   render, so it works as a fallback rather than a second, redundant
   control sitting next to a working one. */
.gc-cal-native {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.55;
}
.gc-cal-native.show {
  display: block;
}
.gc-cal-native input {
  margin-left: 8px;
  font: inherit;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  background: transparent;
  color: inherit;
}

/* ---- fields shared with the contact step ------------------------------ */
.gc-fields {
  display: grid;
  gap: 0 18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) {
  .gc-fields {
    grid-template-columns: 1fr;
  }
}
.gc label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 18px 0 6px;
}
.gc input[type="text"],
.gc input[type="email"],
.gc input[type="tel"],
.gc input[type="time"],
.gc textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: transparent;
  color: inherit;
}
html[data-theme="dark"] .gc input,
html[data-theme="dark"] .gc textarea {
  border-color: rgba(255, 255, 255, 0.3);
}
.gc textarea {
  min-height: 100px;
  resize: vertical;
}
.gc-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.gc-submit {
  margin-top: 26px;
  background: #111;
  color: #fff;
  border: none;
  padding: 15px 34px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
html[data-theme="dark"] .gc-submit {
  background: #fff;
  color: #111;
}
.gc-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.gc-note {
  font-size: 12.5px;
  opacity: 0.55;
  margin-top: 14px;
  line-height: 1.55;
}
.gc-err {
  color: #a4262c;
  font-size: 14px;
  margin-top: 12px;
}
html[data-theme="dark"] .gc-err {
  color: #ff8a80;
}
.gc-done {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 26px;
  font-size: 16px;
  line-height: 1.6;
}
html[data-theme="dark"] .gc-done {
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---- estimator card on /services -------------------------------------- */
.gc-estimate {
  border: 1px solid rgba(128, 128, 128, 0.35);
  padding: 26px;
  margin: 40px 0;
}
.gc-estimate .gc-cta {
  display: inline-block;
  margin-top: 20px;
  background: #111;
  color: #fff;
  border: none;
  padding: 14px 30px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
html[data-theme="dark"] .gc-estimate .gc-cta {
  background: #fff;
  color: #111;
}

/* ---- signature page ---------------------------------------------------- */
.gc-sign-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.gc-sign-tab {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: inherit;
  padding: 8px 18px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.gc-sign-tab.on {
  background: #111;
  color: #fff;
  border-color: #111;
}
html[data-theme="dark"] .gc-sign-tab {
  border-color: rgba(255, 255, 255, 0.3);
}
html[data-theme="dark"] .gc-sign-tab.on {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.gc-sign-body {
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 28px;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 28px;
}
html[data-theme="dark"] .gc-sign-body {
  border-color: rgba(255, 255, 255, 0.22);
}
.gc-sign-pad-wrap {
  border: 1px solid rgba(0, 0, 0, 0.25);
  touch-action: none;
}
html[data-theme="dark"] .gc-sign-pad-wrap {
  border-color: rgba(255, 255, 255, 0.3);
}
.gc-sign-pad-wrap canvas {
  display: block;
  width: 100%;
  height: 180px;
  cursor: crosshair;
  background: #fff;
}
.gc-sign-pad-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.gc-sign-clear {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}
.gc-sign-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.gc-sign-agree input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #111;
}
html[data-theme="dark"] .gc-sign-agree input {
  accent-color: #fff;
}
.gc-sign-img {
  max-width: 320px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  padding: 8px;
}
.gc-print {
  margin-top: 18px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  color: inherit;
  padding: 12px 26px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
html[data-theme="dark"] .gc-print {
  border-color: rgba(255, 255, 255, 0.35);
}
@media print {
  .gc-sign-tabs,
  .gc-print,
  #gc-sign-pad-block,
  nav,
  footer,
  .menu,
  .fix-btn {
    display: none !important;
  }
  .gc-sign-body {
    max-height: none;
    overflow: visible;
    border: none;
    padding: 0;
  }
}