:root{
      --brand-blue:#073b4c;
      --brand-blue-2:#118ab2;
      --brand-green:#073b4c;
      --brand-gray:#eef3ff;
    }
    body{background:var(--brand-blue); color:#fff; font-weight:500;}
    .page-wrap{max-width:1280px; margin:24px auto;}
    .section-title{font-size:1.25rem; font-weight:500; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem}
    .section-title .fa{opacity:.95}
    .subtle{opacity:.85; font-weight:400}

    .card-step{background:#118ab2; border:0; border-radius:1rem; color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.15)}
    .card-step .card-header{background:transparent; border:0; padding:1.25rem 1.25rem .5rem}
    .card-step .card-body{padding:1rem 1.25rem 1.5rem}

    /* option tiles */
    .option-tile{background:#073b4c; border:2px solid transparent; border-radius:1rem; padding:1rem; text-align:center; transition:all .2s ease; cursor:pointer; position:relative;}
    .option-tile:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.2)}
    .option-tile.selected{border-color:var(--brand-green); box-shadow:0 0 0 4px rgba(25,185,111,.22)}
    .option-tile .title{font-size:1rem; font-weight:700}
    .option-tile .meta{font-size:.85rem; opacity:.85}
    .option-tile {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.option-tile.selected {
  border: 2px solid #1d2124 !important;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.option-tile .badge-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: #1d2124;
  color: #fff;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  display: none; /* Hidden by default */
}

.option-tile.selected .badge-check {
  display: block; /* Shown only when selected */
}
	
	.option-tile {
  
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  height: 100%;              /* 🔑 Make all equal height in flex/grid */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

    .btn-outline-light{border-width:2px}
    .btn-choice{background:#073b4c; border:2px solid transparent; color:#fff; border-radius:.75rem; padding:.6rem .9rem; font-weight:700}
    .btn-choice.active, .btn-choice:focus{border-color:var(--brand-green); box-shadow:0 0 0 .2rem rgba(25,185,111,.35)}

    /* time grid */
    .time-grid .btn{min-width:160px; margin:.35rem}

    /* address cards */
    .address-card{background:#073b4c; border-radius:1rem; padding:1rem; margin-bottom:.75rem}
    .address-card .input-group-text{background:#07327a; color:#fff; border:0}
    .form-control{background:#fff; border:0; color:#000}
    .form-control::placeholder{color:#ccc}

    .map{height:280px; border-radius:1rem; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.15)}

    /* utility */
    .hidden{display:none !important}
    .link-white{color:#fff; text-decoration:underline}
	
	
	/* Make modal appear near top (not vertically centered) */
.modal-dialog-top {
  margin-top: 40px !important;
}

/* Wider modal for desktop */
@media (min-width: 992px) {
  .modal-xl {
    max-width: 95%;
  }
}

/* Style refinements */
#sizeCalcModal .modal-content {
  border-radius: 10px;
  overflow: hidden;
}

#sizeCalcModal .modal-header {
  background-color: #004b9a;
}

#sizeCalcModal .btn-outline-primary {
  color: #004b9a;
  border-color: #004b9a;
}
#sizeCalcModal .btn-outline-primary.active,
#sizeCalcModal .btn-outline-primary:hover {
  background-color: #004b9a;
  color: #fff;
}

#sizeCalcModal .card {
  border-radius: 8px;
}
#sizeCalcModal .card-header {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
/* Force modal to stay near the top of viewport */
.modal-dialog {
  margin: 20px auto !important;
  transform: none !important;
  top: 0 !important;
}

/* Remove Bootstrap's centering behavior */
.modal.fade .modal-dialog {
  transform: none !important;
  top: 0 !important;
}

/* Optional: make it full width for large screens */
@media (min-width: 992px) {
  .modal-xl {
    max-width: 95%;
  }
}
/* Wider layout */
@media (min-width: 992px) {
  .modal-xl {
    max-width: 95%;
  }
}

/* Small visual enhancements */
#sizeCalcModal .card {
  border-radius: 6px;
}
#sizeCalcModal .btn-outline-primary.active,
#sizeCalcModal .btn-outline-primary:hover {
  background-color: #004b9a;
  color: #fff;
}

.modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}
label{color:#000 !important; font-size:16px !important;}

/* Remove blue border/glow when clicked */
.btn:focus, 
.btn.focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Make selected button stand out cleanly */
.btn-group-toggle .btn.active {
  background-color: #118ab2 !important; /* Green for selected */
  border-color: #118ab2 !important;
  color: #fff !important;
}