/* Styles for the public Carmelight signup form (templates/carmelight/register-carmelight.tmpl).
   Extracted from the page's inline <style> block. Loaded via <link> in that template. */

.registration-layout-header {
  height: 56px;
  width: 100%;
  background-color: #e8f0ff;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-bottom: 15px;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.carmelight {
  color: #5b5f6b;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  font-family: 'Poppins', sans-serif;
}


.carmelight .form-control {
  min-width: 242px;
  border: 1px solid #9ca9c3;
  border-radius: 6px;
}

/* Placeholders should read as faint hints, not entered values — e.g. the
   "Input transfer amount" hint in the Jumlah (Rp) field. Softer colour + lower opacity. */
.carmelight .form-control::placeholder {
  color: #9ca9c3;
  opacity: 0.5;
}

.carmelight .registration-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #091541;
  margin-bottom: 8px;
}

.carmelight .registration-subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #5b5f6b;
}

/* Make the searchable country dropdown match the other form controls and
   stay comfortable to tap on mobile. */
.carmelight .select2-container .select2-selection--single {
  height: 38px;
  border: 1px solid #9ca9c3;
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.carmelight .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

/* 16px keeps mobile Safari from auto-zooming when the search box focuses. */
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: 16px;
}

/* Jumlah Lilin: preset toggle buttons + a "Lainnya" box.
   This project ships Bootstrap 4, which has no `.btn-check` support, so we
   hide the native radios and drive the checked state ourselves. */
.lilin-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* One connected segmented block: buttons sit flush with shared borders,
   only the outer corners are rounded. */
.lilin-presets {
  display: inline-flex;
  flex-wrap: wrap;
}

.lilin-presets .btn-check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

.lilin-presets label.btn {
  position: relative;
  margin-bottom: 0;
  min-width: 46px;
  border-radius: 0;
  margin-left: -1px; /* collapse the shared 1px border with the neighbor */
}

.lilin-presets label.btn:first-of-type {
  margin-left: 0;
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem;
}

.lilin-presets label.btn:last-of-type {
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;
}

.lilin-presets .btn-check:checked + label.btn {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Bring the active / hovered / focused segment's border above its
   neighbors so it isn't clipped by the overlapping borders. */
.lilin-presets label.btn:hover,
.lilin-presets .btn-check:checked + label.btn,
.lilin-presets .btn-check:focus + label.btn {
  z-index: 1;
}

.lilin-presets .btn-check:focus + label.btn {
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.4);
}

.carmelight .lilin-custom {
  max-width: 120px;
  min-width: 96px;
  flex: 0 0 auto;
}

/* Group the whole "Jumlah Lilin" area into one bordered card. */
.lilin-section.row {
  margin-left: 0;
  margin-right: 0;
  padding: 18px 8px;
  border: 1px solid #d5dced;
  border-radius: 10px;
  background: #f8faff;
}

.lilin-section .col-form-label {
  padding-top: 0;
}

.lilin-total {
  font-weight: 600;
  color: #091541;
}

/* On small screens keep the submit button pinned to the bottom of the
   viewport so the user never has to scroll to find it. The white bar +
   top shadow hide any form fields scrolling underneath it. */
@media (max-width: 767.98px) {
  #submitButtonWrap {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #fff;
    /* Stretch the white bar edge-to-edge across the card's mobile padding
       (px-3 = 1rem) while keeping the button aligned with the form fields.
       The wrap is a Bootstrap `.col-12 p-0`: its max-width:100% would clamp
       the width below (leaving the bar shifted 1rem left / misaligned), and
       its `padding:0 !important` would kill the inset + safe-area padding.
       So: grow by 2rem, lift the max-width cap, and re-assert the padding
       with !important so the button lines up with the inputs above and
       clears the iOS home indicator. */
    width: calc(100% + 2rem);
    max-width: none;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 12px 1rem calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 12px rgba(9, 21, 65, 0.08);
  }

  #submitButtonWrap #submitButton {
    margin-top: 0 !important;
  }

  /* Shrink the hero and tighten field spacing so the form fits in roughly
     one screen and needs as little scrolling as possible. */
  .carmelight {
    padding-top: 0.5rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* The top header bar already shows the carmeLIGHT logo, so hide the big
     duplicate centred one on phones to reclaim vertical space. */
  .logo-container {
    display: none;
  }

  .carmelight .hero-lead {
    margin-bottom: 0.5rem !important;
  }

  .carmelight .registration-title {
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 0;
  }

  /* Drop the long intro paragraph on phones — it's the biggest single block
     of non-essential vertical space. The fields themselves are self-explanatory. */
  .carmelight .registration-subtitle {
    display: none;
  }

  /* Tighter vertical rhythm between fields. */
  .carmelight form .row.mb-3 {
    margin-bottom: 0.6rem !important;
  }

  .carmelight .col-form-label {
    padding-top: 0.2rem;
    padding-bottom: 0.15rem;
  }

  .lilin-section.row {
    padding: 12px 8px;
  }
}