/* Static-site overrides.
   The app CTAs used to be <button onclick="downloadApk()"> elements; they are now
   plain <a> links to the Play Store, so they need the layout/colour rules a button
   got for free. */

/* Base look of the main CTA — carried over verbatim from the inline <style>
   block that used to live in header.php. */
.download-btn {
  position: relative;
  background: rgb(19, 168, 213);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 16px 42px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.download-btn,
.download-btn-hatchback,
.download-btn-hatchback-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.download-btn:hover,
.download-btn:focus,
.download-btn-hatchback:hover,
.download-btn-hatchback:focus,
.download-btn-hatchback-box:hover,
.download-btn-hatchback-box:focus {
  color: #fff;
  text-decoration: none;
}

/* footer a:hover would otherwise turn the CTA text yellow inside the footer */
footer .download-btn:hover,
footer .download-btn-hatchback:hover,
footer .download-btn-hatchback-box:hover {
  color: #fff;
}

/* Inline note shown after a mailto form is submitted */
.form-mailto-note {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #2e7d32;
  background-color: #e8f5e9;
  color: #1b5e20;
  border-radius: 5px;
  font-size: 14px;
}

.form-mailto-note.show {
  display: block;
}

.form-mailto-note a {
  color: #1b5e20;
  font-weight: 600;
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Plan selection (price.html) + checkout summary (checkout.html)
   --------------------------------------------------------------- */

.plan-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 40px;
}

.plan-tab {
  background: #fff;
  border: 2px solid #202C45;
  color: #202C45;
  border-radius: 50px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}

.plan-tab:hover { background: #eef3fa; }

.plan-tab[aria-selected="true"] {
  background: #202C45;
  color: #fff;
}

.plan-panel[hidden] { display: none; }

.plan-note {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-top: 10px;
}

.select-plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #b12c2a;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s ease;
}

.select-plan-btn:hover,
.select-plan-btn:focus {
  background: #8e211f;
  color: #fff;
  text-decoration: none;
}

.price-footer .app-alt-link {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: #202C45;
  text-decoration: underline;
}

/* checkout */
.checkout-card {
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  padding: 26px 28px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  margin-bottom: 24px;
}

.checkout-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #202C45;
  margin-bottom: 16px;
}

.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #e3e6ec;
  margin-top: 16px;
  padding-top: 16px;
  font-size: 20px;
  font-weight: 700;
  color: #202C45;
}

.checkout-list { list-style: none; padding: 0; margin: 0 0 8px; }
.checkout-list li { padding: 5px 0; font-size: 15px; color: #333; }
.checkout-list li i { color: #2e7d32; margin-right: 8px; }

.checkout-step-label {
  display: inline-block;
  background: #202C45;
  color: #fff;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.checkout-pay-note {
  border: 1px solid #f0c36d;
  background: #fdf6e3;
  color: #6b4e00;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  margin-bottom: 20px;
}

.checkout-done {
  display: none;
  border: 1px solid #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

.checkout-done.show { display: block; }