/* WEB-P0.1 — palette/alignment cleanup based on the Hizmet Al page. */

/* Redundant label above the service-selection heading and numbered form markers are removed. */
.service-intro .eyebrow,
.section-index {
  display: none !important;
}

/* Replace font glyphs with a consistent professional SVG icon system. */
.booking-ui-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (min-width: 769px) {
  :root {
    --booking-page-bg: #ffffff;
    --booking-surface: #ffffff;
    --booking-field: #f3f3f3;
    --booking-field-hover: #e9e9e9;
    --booking-line: #e5e5e5;
    --booking-ink: #111111;
    --booking-muted: #6b6b6b;
    --booking-green: #2a9d59;
    --booking-green-soft: #f1faf4;
  }

  html,
  body,
  .booking-shell,
  body:has(#bookingApp > .service-intro),
  body:has(#bookingApp > .service-intro) .booking-shell {
    background: var(--booking-page-bg) !important;
    color: var(--booking-ink);
  }

  .booking-header,
  body:has(#bookingApp > .service-intro) .booking-header {
    background: var(--booking-surface) !important;
    border-bottom-color: var(--booking-line) !important;
  }

  .section-card,
  .summary-panel,
  .payment-panel {
    background: var(--booking-surface) !important;
    border-color: var(--booking-line) !important;
  }

  .option {
    background: var(--booking-field) !important;
    border-color: var(--booking-line) !important;
    color: var(--booking-ink) !important;
  }

  .option:hover {
    background: var(--booking-field-hover) !important;
    border-color: #d6d6d6 !important;
  }

  /* Restore the green selected state from the previous desktop pass. */
  .option.selected {
    background: var(--booking-green-soft) !important;
    border-color: var(--booking-green) !important;
    color: #172019 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px rgba(42, 157, 89, .14) !important;
  }

  .option.selected small {
    color: #5d7062 !important;
  }

  .metric {
    background: var(--booking-field) !important;
    border-color: var(--booking-line) !important;
  }

  body:has(#bookingApp > .service-intro) .service-intro .hero-panel {
    background: transparent !important;
  }

  body:has(#bookingApp > .service-intro) .service-intro .hero-panel h1 {
    margin-top: 0 !important;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-panel,
  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card {
    background: var(--booking-field) !important;
    border-color: var(--booking-line) !important;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card:hover {
    background: var(--booking-field-hover) !important;
    border-color: #d6d6d6 !important;
  }

  /* Location, home and workplace icons share the exact same visual box and SVG size. */
  body:has(#bookingApp > .service-intro) .service-intro .address-pin,
  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ddddda !important;
    border-radius: 9px !important;
    background: var(--booking-surface) !important;
    color: #222222 !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-pin .booking-ui-icon,
  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-icon .booking-ui-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-panel > div:first-child {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card {
    grid-template-columns: 34px minmax(0, 1fr) 18px !important;
  }
}