/* Bringiit: stable editable fields. Deliberate browser zoom stays enabled. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-gutter:stable; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"] {
  font-size:16px !important;
  font-size:max(16px, 1rem) !important;
  min-width:0;
  max-width:100%;
  transform:none !important;
  transition-property:color,background-color,border-color,box-shadow;
}
.search-box { position:relative; padding-right:44px; }
.search-box .clear-button { position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.search-box input { -webkit-appearance:none; appearance:none; }


/* ==========================================================
   BRINGIIT_DESKTOP_CUSTOMER_TRACKER_V1
   ========================================================== */

.customer-orders-intro{
  margin:0 0 14px;
  color:#76677c;
  font-size:13px;
  line-height:1.5;
}

.customer-orders-list{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.customer-order-card{
  width:100%;
  padding:14px;
  border:1px solid #eadff0;
  border-radius:16px;
  background:#fff;
  color:#2a1731;
  text-align:left;
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.customer-order-card:hover{
  transform:translateY(-1px);
  border-color:#d9b8e5;
  box-shadow:0 8px 24px rgba(120,50,147,.08);
}

.customer-order-card-top,
.customer-order-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.customer-order-card-top>div{
  min-width:0;
}

.customer-order-card-top small,
.customer-order-detail-head small{
  display:block;
  color:#9b62ad;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
}

.customer-order-card-top strong{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:#2b1732;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.customer-order-card-top>span{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  background:#f5ebf8;
  color:#8c279f;
  font-size:9px;
  font-weight:800;
  text-transform:capitalize;
}

.customer-order-card-bottom{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #f1eaf3;
}

.customer-order-card-bottom small{
  color:#8d7d92;
  font-size:10px;
}

.customer-order-card-bottom b{
  color:#5e1a70;
  font-size:12px;
}

.customer-orders-loading,
.customer-orders-empty{
  display:grid;
  justify-items:center;
  padding:26px 12px;
  text-align:center;
}

.customer-order-spinner{
  width:30px;
  height:30px;
  border:3px solid #eadcf0;
  border-top-color:#9d27b5;
  border-radius:50%;
  animation:bringiit-order-spin .8s linear infinite;
}

@keyframes bringiit-order-spin{
  to{transform:rotate(360deg)}
}

.customer-orders-loading p,
.customer-orders-empty p{
  margin:10px 0 0;
  color:#7a6a80;
  font-size:12px;
}

.customer-orders-empty>span{
  font-size:28px;
}

.customer-orders-empty strong{
  margin-top:8px;
  font-size:15px;
}

.customer-order-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.customer-order-detail-head>div{
  min-width:0;
}

.customer-order-detail-head strong{
  display:block;
  margin-top:2px;
  color:#28142f;
  font-size:14px;
}

.customer-order-detail-head span{
  display:block;
  margin-top:4px;
  color:#8b7b90;
  font-size:10px;
}

.customer-order-detail-head>b{
  color:#76288e;
  font-size:15px;
}

.customer-order-tracker{
  padding:18px;
  border-radius:20px;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(255,82,172,.18),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #2e1338 0%,
      #4b1c58 52%,
      #32143b 100%
    );
  box-shadow:0 16px 36px rgba(46,19,56,.16);
  color:#fff;
}

.customer-tracker-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.customer-tracker-head span{
  display:block;
  color:#f5b5ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
}

.customer-tracker-head strong{
  display:block;
  margin-top:4px;
  font-size:17px;
  line-height:1.15;
}

.customer-tracker-head>b{
  display:grid;
  place-items:center;
  min-width:48px;
  height:34px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  font-size:11px;
}

.customer-order-tracker>p{
  margin:10px 0 15px!important;
  color:#dbc9df!important;
  font-size:11px!important;
  line-height:1.45!important;
}

.customer-tracker-rail{
  display:flex;
  gap:4px;
  align-items:center;
}

.customer-tracker-segment{
  display:block;
  flex:1 1 0;
  height:3px;
  border-radius:999px;
  background:#725b79;
  transition:.25s ease;
}

.customer-tracker-segment.complete{
  background:#c15ce1;
}

.customer-tracker-segment.active{
  height:5px;
  background:#ff2d95;
  box-shadow:0 0 12px rgba(255,45,149,.48);
}

.customer-tracker-cards{
  display:grid;
  grid-template-columns:1fr 1.65fr 1fr;
  gap:8px;
  margin-top:14px;
}

.customer-tracker-cards.customer-tracker-final{
  grid-template-columns:1fr 1.65fr;
}

.customer-tracker-mini{
  display:grid;
  align-content:center;
  min-height:66px;
  padding:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(255,255,255,.07);
  text-align:center;
}

.customer-tracker-mini.active{
  border-color:#ff77b9;
  background:#ff2d95;
  box-shadow:0 10px 22px rgba(255,45,149,.18);
}

.customer-tracker-mini small{
  color:#c5aecb;
  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.customer-tracker-mini.active small{
  color:#fff;
}

.customer-tracker-mini strong{
  margin-top:5px;
  color:#eadcec;
  font-size:10.5px;
  line-height:1.15;
}

.customer-tracker-mini.active strong{
  color:#fff;
  font-size:11.5px;
}

.customer-order-summary{
  margin-top:14px;
  padding:14px;
  border:1px solid #eadff0;
  border-radius:17px;
  background:#fff;
}

.customer-order-summary-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.customer-order-summary-title strong{
  font-size:13px;
}

.customer-order-summary-title small{
  color:#89778e;
  font-size:9px;
}

.customer-order-items{
  display:grid;
  gap:8px;
}

.customer-order-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #f2ebf4;
}

.customer-order-item>div{
  min-width:0;
}

.customer-order-item strong{
  display:block;
  color:#34203a;
  font-size:11px;
}

.customer-order-item small{
  display:block;
  margin-top:2px;
  color:#948497;
  font-size:9px;
}

.customer-order-item>b{
  flex:0 0 auto;
  color:#76288e;
  font-size:10px;
}

.customer-order-no-items{
  margin:0!important;
  color:#89788d!important;
  font-size:10px!important;
}

.customer-order-total{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding-top:11px;
  border-top:1px solid #e9dfec;
}

.customer-order-total span{
  font-size:11px;
  font-weight:700;
}

.customer-order-total strong{
  color:#6f2084;
  font-size:13px;
}

.customer-order-confirm-preview{
  display:flex;
  gap:11px;
  margin:14px 0;
  padding:13px;
  border:1px solid #eadbf0;
  border-radius:16px;
  background:#fbf6fc;
}

.customer-order-confirm-preview>span{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:50%;
  background:#f0dff5;
  color:#902ba7;
  font-weight:900;
}

.customer-order-confirm-preview strong{
  display:block;
  color:#331d3a;
  font-size:11px;
}

.customer-order-confirm-preview p{
  margin:3px 0 0!important;
  color:#7e6d83!important;
  font-size:9.5px!important;
  line-height:1.45!important;
}

@media(max-width:640px){
  .customer-order-tracker{
    padding:15px;
    border-radius:18px;
  }

  .customer-tracker-head strong{
    font-size:15px;
  }

  .customer-tracker-cards{
    gap:6px;
  }

  .customer-tracker-mini{
    min-height:61px;
    padding:7px 6px;
  }

  .customer-tracker-mini strong{
    font-size:9.5px;
  }

  .customer-tracker-mini.active strong{
    font-size:10.5px;
  }
}


/* ==========================================================
   BRINGIIT_DESKTOP_ALL_GOOD_RATING_V1
   ========================================================== */

.customer-order-confirm-action,
.customer-order-all-good{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:14px 0 10px;
  padding:13px;
  border:1px solid #eadbf0;
  border-radius:16px;
  background:#fbf6fc;
}

.customer-order-confirm-action>span,
.customer-order-all-good>span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  background:#f0dff5;
  color:#902ba7;
  font-size:14px;
  font-weight:900;
}

.customer-order-confirm-action strong,
.customer-order-all-good strong{
  display:block;
  color:#331d3a;
  font-size:11px;
}

.customer-order-confirm-action p,
.customer-order-all-good p{
  margin:3px 0 0!important;
  color:#7e6d83!important;
  font-size:9.5px!important;
  line-height:1.45!important;
}

.rating-button{
  margin-bottom:10px;
  border-color:#ef66b0!important;
  background:
    linear-gradient(
      135deg,
      #a52cc1,
      #ef2990
    )!important;
  color:#fff!important;
}

.customer-rating-hero{
  display:grid;
  justify-items:center;
  text-align:center;
  padding:6px 12px 12px;
}

.customer-rating-hero>span{
  font-size:28px;
}

.customer-rating-hero strong{
  margin-top:7px;
  color:#2f1936;
  font-size:17px;
}

.customer-rating-hero p{
  max-width:370px;
  margin:5px 0 0!important;
  color:#817087!important;
  font-size:10.5px!important;
  line-height:1.5!important;
}

.customer-rating-stars{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:7px 0 4px;
}

.customer-rating-stars button{
  border:0;
  background:transparent;
  padding:3px;
  color:#d9cbdc;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  transition:
    transform .15s ease,
    color .15s ease;
}

.customer-rating-stars button:hover{
  transform:translateY(-2px) scale(1.06);
}

.customer-rating-stars button.selected{
  color:#ef2990;
}

.customer-rating-caption{
  margin:0 0 14px!important;
  color:#8a3aa1!important;
  font-size:10px!important;
  font-weight:800;
  text-align:center;
}

.customer-rating-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin:4px 0 15px;
}

.customer-rating-tags button{
  border:1px solid #e6d8eb;
  border-radius:999px;
  background:#fff;
  padding:7px 10px;
  color:#6f5e75;
  font-size:9px;
  font-weight:700;
  cursor:pointer;
}

.customer-rating-tags button.selected{
  border-color:#d98be7;
  background:#f5e7f9;
  color:#8b279f;
}

.customer-rating-comment{
  min-height:90px!important;
  resize:vertical;
}

.customer-rating-complete-card,
.customer-rating-unavailable{
  display:grid;
  justify-items:center;
  padding:20px 14px;
  text-align:center;
}

.customer-rating-check,
.customer-rating-unavailable>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#f1e2f6;
  color:#9229a8;
  font-size:18px;
  font-weight:900;
}

.customer-rating-complete-card strong,
.customer-rating-unavailable strong{
  margin-top:10px;
  color:#321b39;
  font-size:15px;
}

.customer-rating-complete-card p,
.customer-rating-unavailable p{
  margin:5px 0 0!important;
  color:#827286!important;
  font-size:10px!important;
}

.customer-rating-existing-stars{
  margin-top:7px;
  color:#ef2990;
  font-size:24px;
  letter-spacing:2px;
}

@media(max-width:640px){
  .customer-rating-stars button{
    font-size:30px;
  }

  .customer-rating-tags{
    gap:6px;
  }
}


/* BRINGIIT_DESKTOP_LAYOUT_TUNE_V1
   Desktop-only visual tuning for:
   - smaller hero breathing space
   - wider location popup
   - popup action buttons aligned right
   Mobile/tablet stays unchanged
*/
@media (min-width: 1025px) {
  .bringiit-hero-compact-wrap {
    gap: 18px !important;
    align-items: stretch !important;
  }

  .bringiit-hero-compact-card {
    min-height: auto !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  .bringiit-hero-compact-card h1,
  .bringiit-hero-compact-card h2 {
    line-height: 1.03 !important;
    margin-bottom: 12px !important;
  }

  .bringiit-hero-compact-card p {
    margin-bottom: 10px !important;
  }

  .bringiit-location-modal-wide {
    width: min(980px, calc(100vw - 48px)) !important;
    max-width: 980px !important;
  }

  .bringiit-location-modal-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
  }

  .bringiit-location-modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
  }
}


/* ============================================================
   BRINGIIT_RESPONSIVE_HERO_LOCATION_FIX_V1
   Mobile:
   - compact hero
   - stop USP card stretching vertically
   - preserve readable spacing

   Desktop:
   - wider location flow modal
   - larger map
   - actions visible without unnecessary scrolling
   ============================================================ */


/* -------------------------------
   MOBILE / SMALL TABLET
   ------------------------------- */

@media (max-width: 767px) {

  /*
   * The mobile hero must size itself from its content.
   * No stretched grid rows / equal-height behaviour.
   */
  .hero-grid {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
  }


  .hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 22px 24px !important;
    border-radius: 0 !important;
  }


  .hero-copy {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }


  .hero-copy .eyebrow {
    margin: 0 0 14px !important;
  }


  .hero-copy h1 {
    font-size: clamp(2.7rem, 12vw, 4rem) !important;
    line-height: 0.98 !important;
    margin: 0 0 24px !important;
    letter-spacing: -0.045em !important;
  }


  .hero-copy > p:not(.eyebrow) {
    margin: 0 0 22px !important;
    line-height: 1.45 !important;
  }


  .hero-copy .button {
    margin-top: 0 !important;
  }


  .hero-foot {
    margin-top: 18px !important;
  }


  /*
   * This is the large empty section visible in the screenshot.
   * Force the USP card to content height.
   */
  .hero-usp-card,
  .hero-usp-compact {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 22px 0 0 !important;
    padding: 26px 22px !important;
    align-self: auto !important;
    justify-self: auto !important;
    border-radius: 28px !important;
  }


  .hero-usp-card .usp-badge {
    margin: 0 0 16px !important;
  }


  .usp-commission {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    margin: 0 0 16px !important;
  }


  .usp-commission > strong {
    font-size: clamp(4.5rem, 21vw, 6.4rem) !important;
    line-height: 0.82 !important;
  }


  .usp-commission b {
    line-height: 1.1 !important;
  }


  .hero-usp-card > p {
    margin: 14px 0 !important;
    line-height: 1.45 !important;
  }


  .usp-mini-points {
    margin-top: 16px !important;
    gap: 8px !important;
  }


  /*
   * The two supporting cards should follow immediately,
   * not inherit a stretched desktop height.
   */
  .hero-asides {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }


  .hero-asides .aside-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 16px !important;
  }


  .hero-asides .aside-card h2 {
    font-size: 1.45rem !important;
    line-height: 1.03 !important;
  }


  /*
   * Keep the search/header compact on mobile.
   */
  .main-header {
    margin-bottom: 0 !important;
  }


  .search-box {
    min-height: 58px !important;
  }

}


/* -------------------------------
   TABLET
   ------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

  .hero,
  .hero-usp-card,
  .hero-usp-compact {
    min-height: 0 !important;
    height: auto !important;
  }

}


/* -------------------------------
   DESKTOP LOCATION FLOW
   ------------------------------- */

@media (min-width: 1025px) {

  /*
   * Real location-flow modal class used by Bringiit.
   */
  .modal.first-visit-location-modal {
    width: min(1080px, calc(100vw - 80px)) !important;
    max-width: 1080px !important;
    max-height: calc(100vh - 50px) !important;
  }


  .first-visit-location-modal .modal-body {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }


  /*
   * Give the map more usable desktop width/height.
   */
  .first-visit-location-modal [id*="map"],
  .first-visit-location-modal .map,
  .first-visit-location-modal .delivery-map,
  .first-visit-location-modal .location-map {
    min-height: 390px !important;
  }


  /*
   * Keep action buttons visible and right aligned where
   * the modal exposes a normal action/button row.
   */
  .first-visit-location-modal .modal-actions,
  .first-visit-location-modal .form-actions,
  .first-visit-location-modal .button-row,
  .first-visit-location-modal .actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

}


/* ============================================================
   BRINGIIT_RESPONSIVE_POLISH_V2
   - Fix mobile hero overflow
   - Keep mobile location UX unchanged
   - Make desktop location flow wider
   - Compact/right-align desktop location buttons
   ============================================================ */


/* ------------------------------------------------------------
   MOBILE HERO — FIT THE SCREEN CLEANLY
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  .hero {
    overflow: hidden !important;
    padding: 24px 20px 22px !important;
  }


  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }


  .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(
      2.55rem,
      10.8vw,
      3.45rem
    ) !important;

    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    margin: 0 0 22px !important;
  }


  .hero-copy h1 span {
    display: inline !important;
  }


  .hero-copy > p:not(.eyebrow) {
    font-size: 1.05rem !important;
    line-height: 1.42 !important;
    margin-bottom: 20px !important;
  }


  .hero-copy .button.primary {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }


  .hero-foot {
    font-size: 0.94rem !important;
    line-height: 1.35 !important;
  }


  .hero-usp-card,
  .hero-usp-compact {
    padding: 24px 20px !important;
    margin-top: 18px !important;
  }


  .usp-commission {
    gap: 14px !important;
  }


  .usp-commission > strong {
    font-size: clamp(
      4rem,
      18vw,
      5.25rem
    ) !important;
  }


  .usp-commission b {
    font-size: 1.35rem !important;
  }


  /*
   * IMPORTANT:
   * Do NOT alter first-visit location modal on mobile.
   * The current iPhone screenshots are already good.
   */

}


/* ------------------------------------------------------------
   DESKTOP LOCATION FLOW — WIDE + LESS SCROLLING
   ------------------------------------------------------------ */

@media (min-width: 1025px) {

  .modal.first-visit-location-modal {
    width: min(
      1180px,
      calc(100vw - 70px)
    ) !important;

    max-width: 1180px !important;
    max-height: calc(100vh - 34px) !important;
  }


  .first-visit-location-modal .modal-top {
    padding-left: 38px !important;
    padding-right: 38px !important;
  }


  .first-visit-location-modal .modal-body {
    padding-left: 38px !important;
    padding-right: 38px !important;
    padding-bottom: 28px !important;
  }


  /*
   * Make address/search fields use the available desktop width.
   */
  .first-visit-location-modal input,
  .first-visit-location-modal textarea,
  .first-visit-location-modal select {
    max-width: none !important;
  }


  /*
   * Confirm-location map gets more desktop width
   * without affecting the mobile dimensions.
   */
  .first-visit-location-modal [id*="map"],
  .first-visit-location-modal [class*="map"] {
    width: 100% !important;
    min-height: 350px !important;
    max-height: 420px !important;
  }


  /*
   * Bringiit full-width action buttons are useful on mobile,
   * but unnecessarily large on desktop.
   */
  .first-visit-location-modal .button.full {
    display: inline-flex !important;

    width: auto !important;
    min-width: 250px !important;
    max-width: 360px !important;

    justify-content: center !important;
    align-items: center !important;

    margin-top: 12px !important;
    margin-left: 12px !important;
  }


  /*
   * Align action buttons to the right when they are direct
   * children of the modal body.
   */
  .first-visit-location-modal .modal-body > .button.full {
    float: right !important;
  }


  /*
   * Clear the float so content below is not affected.
   */
  .first-visit-location-modal .modal-body::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
  }


  /*
   * Save-as buttons remain sensible and compact.
   */
  .first-visit-location-modal [data-action*="label"],
  .first-visit-location-modal [data-action*="save-as"] {
    width: auto !important;
  }

}


/* ============================================================
   BRINGIIT_LOCATION_FLOW_DESKTOP_V1

   All location states:
   - Where should we bring it?
   - Confirm your delivery location
   - Add delivery details

   Desktop only.
   Current mobile layout remains unchanged.
   ============================================================ */

@media (min-width: 1025px) {

  .modal.location-flow-modal {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;

    max-height: calc(100vh - 42px) !important;

    border-radius: 24px !important;
  }


  .location-flow-modal .modal-top {
    padding:
      28px
      38px
      24px !important;
  }


  .location-flow-modal .modal-body {
    padding:
      26px
      38px
      30px !important;
  }


  /*
   * Stage 1 — address/location entry
   */
  .location-flow-modal #delivery-code {
    width: 100% !important;
  }


  /*
   * Stage 2 — confirmation map
   */
  .location-flow-modal [id*="map"],
  .location-flow-modal [class*="delivery-map"],
  .location-flow-modal [class*="location-map"] {
    width: 100% !important;

    min-height: 340px !important;
    max-height: 390px !important;
  }


  /*
   * Full-width buttons are useful on phones,
   * but on desktop these should be compact actions.
   */
  .location-flow-modal .button.full {
    width: auto !important;

    min-width: 240px !important;
    max-width: 340px !important;

    padding-left: 28px !important;
    padding-right: 28px !important;
  }


  /*
   * Put final stage actions on the right.
   */
  .location-flow-modal .modal-body > .button.full {
    float: right !important;
    clear: right !important;
  }


  .location-flow-modal .modal-body > .button.full + .button.full {
    margin-right: 10px !important;
  }


  .location-flow-modal .modal-body::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }


  /*
   * Keep the Home / Work / Other selector full row.
   */
  .location-flow-modal .delivery-label-options,
  .location-flow-modal [class*="label-options"] {
    width: 100% !important;
    clear: both !important;
  }

}


/* ------------------------------------------------------------
   MOBILE PROTECTION
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  .modal.location-flow-modal {
    width: initial !important;
    max-width: initial !important;
  }


  .location-flow-modal .button.full {
    width: 100% !important;
    max-width: none !important;
  }

}


/* ============================================================
   BRINGIIT_LOCATION_CONFIRM_INLINE_ACTIONS_CSS_V2
   DESKTOP:
   address information left
   Confirm / Edit actions right

   MOBILE:
   unchanged
   ============================================================ */

@media (min-width: 1025px) {

  .location-flow-modal
  .br-location-suggested-inline {

    display: grid !important;

    grid-template-columns:
      minmax(0,1fr)
      320px !important;

    grid-template-rows:
      auto !important;

    align-items: center !important;

    gap: 28px !important;

    width: 100% !important;

    padding:
      18px
      20px !important;

    min-height: 118px !important;

    box-sizing: border-box !important;
  }


  .location-flow-modal
  .br-location-confirm-actions {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;
    align-items: stretch !important;

    gap: 9px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .location-flow-modal
  .br-location-confirm-actions
  .button {

    float: none !important;
    clear: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      13px
      18px !important;

    justify-content: center !important;
  }


  /*
   * Completely neutralise previous floating rules.
   */
  .location-flow-modal
  .modal-body > .button.full {

    float: none !important;
    clear: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  /*
   * Confirmation screen should collapse naturally
   * once the actions move into the address box.
   */
  .location-flow-modal .modal-body {

    min-height: 0 !important;
    height: auto !important;
  }


  .location-flow-modal {

    height: auto !important;
  }

}


/* ------------------------------------------------------------
   MOBILE PROTECTION
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  .location-flow-modal
  .br-location-suggested-inline {

    display: block !important;
  }


  .location-flow-modal
  .br-location-confirm-actions {

    display: contents !important;
  }

}

/* BRINGIIT_DESKTOP_LOCATION_LAYOUT_V3_CSS_START */
@media (min-width: 1025px) {

  .location-flow-modal #br-location-desktop-entry-row{
    display:grid !important;
    grid-template-columns: minmax(280px,320px) 64px minmax(320px,360px) !important;
    align-items:center !important;
    column-gap:24px !important;
    width:100% !important;
    max-width:760px !important;
    margin:18px 0 8px 0 !important;
  }

  .location-flow-modal #br-location-desktop-entry-row .br-location-desktop-or{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:16px !important;
    line-height:1 !important;
    color:#7b728d !important;
    font-weight:600 !important;
    text-transform:lowercase !important;
    white-space:nowrap !important;
  }

  .location-flow-modal #br-location-desktop-entry-row .button,
  .location-flow-modal #br-location-desktop-entry-row button{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    justify-content:center !important;
  }

  .location-flow-modal .br-suggested-address-card-ready{
    padding:16px 20px !important;
  }

  .location-flow-modal .br-suggested-address-layout{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) 320px !important;
    column-gap:24px !important;
    row-gap:12px !important;
    align-items:center !important;
    width:100% !important;
  }

  .location-flow-modal .br-suggested-address-info{
    min-width:0 !important;
  }

  .location-flow-modal .br-suggested-address-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
    align-items:stretch !important;
    justify-content:center !important;
  }

  .location-flow-modal .br-suggested-address-actions .button,
  .location-flow-modal .br-suggested-address-actions button{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    justify-content:center !important;
    float:none !important;
    clear:none !important;
  }

  .location-flow-modal .modal-body{
    height:auto !important;
    min-height:0 !important;
  }
}

@media (max-width: 1024px) {
  .location-flow-modal #br-location-desktop-entry-row{
    display:none !important;
  }
}
/* BRINGIIT_DESKTOP_LOCATION_LAYOUT_V3_CSS_END */


/* ============================================================
   BRINGIIT_SUGGESTED_ADDRESS_ALIGNMENT_V4

   DESKTOP ONLY

   LEFT:
   SUGGESTED ADDRESS
   Full address
   Device accuracy

   RIGHT:
   Confirm delivery location
   Edit Address

   Mobile location flow remains unchanged.
   ============================================================ */

@media (min-width: 1025px) {

  /*
   * Keep the whole suggested-address card compact.
   */
  .location-flow-modal
  .br-suggested-address-card-ready {

    padding:
      18px
      22px !important;

    min-height: 0 !important;
    height: auto !important;

    overflow: visible !important;
  }


  /*
   * True two-column desktop layout.
   */
  .location-flow-modal
  .br-suggested-address-layout {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      330px !important;

    align-items: center !important;

    gap: 28px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * LEFT COLUMN:
   * override any old card/grid/right-alignment styling.
   */
  .location-flow-modal
  .br-suggested-address-info {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    float: none !important;
  }


  /*
   * Prevent original Suggested Address CSS from pushing
   * the real address to the right-hand side.
   */
  .location-flow-modal
  .br-suggested-address-info > * {

    position: static !important;

    width: auto !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;

    justify-self: start !important;
    align-self: flex-start !important;

    float: none !important;
  }


  /*
   * Label.
   */
  .location-flow-modal
  .br-suggested-address-info
  :is(
    small,
    .eyebrow,
    [class*="label"]
  ) {

    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }


  /*
   * Main address should be directly under the label,
   * never over beside the action buttons.
   */
  .location-flow-modal
  .br-suggested-address-info
  :is(
    strong,
    b
  ) {

    display: block !important;

    font-size: 1rem !important;
    line-height: 1.35 !important;

    margin:
      0
      0
      2px !important;

    text-align: left !important;
  }


  /*
   * Accuracy line under address.
   */
  .location-flow-modal
  .br-suggested-address-info p {

    margin:
      2px
      0
      0 !important;

    line-height: 1.35 !important;

    text-align: left !important;
  }


  /*
   * RIGHT COLUMN.
   */
  .location-flow-modal
  .br-suggested-address-actions {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;
    align-items: stretch !important;

    gap: 10px !important;

    width: 330px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: end !important;
    align-self: center !important;
  }


  .location-flow-modal
  .br-suggested-address-actions
  .button,

  .location-flow-modal
  .br-suggested-address-actions
  button {

    display: inline-flex !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 52px !important;

    margin: 0 !important;

    padding:
      13px
      18px !important;

    align-items: center !important;
    justify-content: center !important;

    float: none !important;
    clear: none !important;
  }


  /*
   * Remove inherited large modal-body height.
   */
  .location-flow-modal .modal-body {

    min-height: 0 !important;
    height: auto !important;
  }


  .location-flow-modal {

    height: auto !important;
  }

}


/* ============================================================
   MOBILE PROTECTION
   ============================================================ */

@media (max-width: 1024px) {

  /*
   * Do not use the desktop two-column treatment on mobile.
   */
  .location-flow-modal
  .br-suggested-address-layout {

    display: block !important;
  }


  .location-flow-modal
  .br-suggested-address-actions {

    width: 100% !important;
  }

}



/* BRINGIIT_CONFIRM_ROW_V8_START */

@media (min-width:1025px){

  .location-flow-modal
  .br-confirm-card-v8{

    min-height:0 !important;
    height:auto !important;

    padding:
      18px
      22px !important;

    overflow:visible !important;
  }


  .location-flow-modal
  .br-confirm-original-v8{

    display:none !important;
  }


  .location-flow-modal
  .br-confirm-row-v8{

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      520px !important;

    align-items:center !important;

    gap:28px !important;

    width:100% !important;

    min-height:64px !important;

    margin:0 !important;
    padding:0 !important;
  }


  .location-flow-modal
  .br-confirm-left-v8{

    display:flex !important;

    flex-direction:column !important;

    gap:7px !important;

    min-width:0 !important;
  }


  /*
   * SUGGESTED ADDRESS + ADDRESS on the same line.
   */
  .location-flow-modal
  .br-confirm-mainline-v8{

    display:flex !important;

    align-items:center !important;

    gap:18px !important;

    min-width:0 !important;

    white-space:nowrap !important;
  }


  .location-flow-modal
  .br-confirm-label-v8{

    flex:0 0 auto !important;

    color:#756c81 !important;

    font-size:.78rem !important;

    font-weight:600 !important;

    letter-spacing:.08em !important;

    text-transform:uppercase !important;
  }


  .location-flow-modal
  .br-confirm-address-v8{

    min-width:0 !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;

    color:#241331 !important;

    font-size:1rem !important;

    line-height:1.35 !important;

    font-weight:700 !important;
  }


  .location-flow-modal
  .br-confirm-accuracy-v8{

    color:#746b80 !important;

    font-size:.82rem !important;

    line-height:1.3 !important;
  }


  /*
   * Confirm + Edit side by side at far right.
   */
  .location-flow-modal
  .br-confirm-actions-v8{

    display:grid !important;

    grid-template-columns:
      1fr
      1fr !important;

    gap:12px !important;

    width:520px !important;

    justify-self:end !important;

    align-items:center !important;
  }


  .location-flow-modal
  .br-confirm-actions-v8
  button,

  .location-flow-modal
  .br-confirm-actions-v8
  .button{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    min-height:52px !important;

    margin:0 !important;

    float:none !important;

    clear:none !important;
  }


  .location-flow-modal,
  .location-flow-modal
  .modal-body{

    height:auto !important;

    min-height:0 !important;
  }

}


/* MOBILE/TABLET: preserve existing layout */

@media (max-width:1024px){

  .br-confirm-row-v8{

    display:none !important;
  }


  .br-confirm-original-v8{

    display:initial !important;
  }

}

/* BRINGIIT_CONFIRM_ROW_V8_END */

/* BRINGIIT_DELIVERY_DETAILS_COMPACT_V1_CSS_START */
.delivery-details-compact{
 display:flex;
 flex-direction:column;
 gap:16px;
}
.delivery-details-compact > p{
 margin:0;
}
.delivery-details-grid{
 display:grid;
 grid-template-columns:1fr;
 gap:14px;
}
.delivery-field-group{
 min-width:0;
}
.delivery-field-group .field-label{
 display:block;
 margin-bottom:8px;
}
.delivery-base-address{
 margin-bottom:0;
}
.delivery-textarea{
 min-height:96px;
 resize:vertical;
}
.delivery-details-footer{
 display:flex;
 flex-direction:column;
 gap:16px;
}
.delivery-label-row{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
}
.delivery-details-actions{
 display:flex;
 flex-direction:column;
 gap:12px;
}
.delivery-details-actions .button.full{
 width:100%;
}

@media (min-width:1025px){
 .delivery-details-compact{
  gap:14px;
 }

 .delivery-details-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px 18px;
 }

 .delivery-field-unit{
  grid-column:1 / 2;
 }

 .delivery-field-building{
  grid-column:2 / 3;
 }

 .delivery-field-instructions{
  grid-column:1 / -1;
 }

 .delivery-textarea{
  min-height:84px;
 }

 .delivery-details-footer{
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
 }

 .delivery-details-footer .address-labels{
  margin:0;
  flex:1 1 auto;
 }

 .delivery-details-footer .address-labels legend{
  margin-bottom:10px;
 }

 .delivery-details-actions{
  flex:0 0 auto;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
 }

 .delivery-details-actions .button,
 .delivery-details-actions .button.full{
  width:auto;
  min-width:230px;
  margin:0;
 }

 .delivery-details-actions .button.outlined{
  order:2;
 }

 .delivery-details-actions .button.primary{
  order:1;
 }
}
/* BRINGIIT_DELIVERY_DETAILS_COMPACT_V1_CSS_END */

/* BRINGIIT_SAVE_AS_SINGLE_ROW_V1
   Keep Home / Work / Other on one row on desktop and mobile. */
.delivery-details-compact .delivery-label-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.delivery-details-compact .delivery-label-row .address-label-option {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (min-width: 1025px) {
  .delivery-details-compact .address-labels {
    min-width: 300px !important;
  }

  .delivery-details-compact .delivery-label-row {
    width: 300px !important;
  }
}

/* BRINGIIT_MOBILE_DELIVERY_DETAILS_V3_START */

@media (max-width: 767px) {

  /*
   * Natural mobile modal behaviour.
   */
  .location-flow-modal {
    max-height:
      calc(100dvh - 28px) !important;

    overflow-y: auto !important;

    overscroll-behavior: contain !important;
  }


  .location-flow-modal .delivery-details-compact {
    gap: 14px !important;
  }


  .location-flow-modal .delivery-details-compact > p {
    margin:
      0
      0
      6px !important;

    line-height: 1.42 !important;
  }


  .location-flow-modal .delivery-base-address {
    margin: 0 !important;

    padding:
      14px
      16px !important;
  }


  /*
   * Keep fields stacked exactly as expected on phone.
   */
  .location-flow-modal .delivery-details-grid {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 14px !important;
  }


  .location-flow-modal .delivery-field-group {
    margin: 0 !important;
  }


  .location-flow-modal .delivery-field-group .field-label {
    margin-bottom: 7px !important;
  }


  .location-flow-modal
  .delivery-details-compact
  .form-input {

    min-height: 54px !important;

    padding:
      12px
      14px !important;
  }


  .location-flow-modal
  .delivery-details-compact
  .delivery-textarea {

    min-height: 94px !important;

    height: 94px !important;

    resize: none !important;
  }


  /*
   * Home / Work / Other stay side-by-side.
   */
  .location-flow-modal .delivery-label-row {
    display: grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    gap: 9px !important;

    width: 100% !important;
  }


  .location-flow-modal
  .delivery-label-row
  .address-label-option {

    width: 100% !important;

    min-width: 0 !important;

    min-height: 48px !important;

    margin: 0 !important;

    padding:
      10px
      6px !important;

    justify-content: center !important;
  }


  /*
   * Footer is normal flow again — NOT sticky.
   */
  .location-flow-modal
  .delivery-details-footer {

    display: flex !important;

    flex-direction: column !important;

    gap: 14px !important;

    margin-top: 4px !important;
  }


  .location-flow-modal
  .delivery-details-footer
  .address-labels {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
  }


  /*
   * Restore the clean original mobile action style:
   * Save first, Back underneath.
   */
  .location-flow-modal
  .delivery-details-actions {

    position: static !important;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    gap: 10px !important;

    margin: 0 !important;

    padding:
      0
      0
      calc(
        8px + env(safe-area-inset-bottom)
      ) !important;

    background: transparent !important;
  }


  .location-flow-modal
  .delivery-details-actions
  .button,

  .location-flow-modal
  .delivery-details-actions
  .button.full {

    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    min-height: 52px !important;

    margin: 0 !important;

    padding:
      12px
      16px !important;

    font-size: 1rem !important;

    justify-content: center !important;
  }


  .location-flow-modal
  .delivery-details-actions
  .button.primary {

    order: 1 !important;
  }


  .location-flow-modal
  .delivery-details-actions
  .button.outlined {

    order: 2 !important;
  }

}

/* BRINGIIT_MOBILE_DELIVERY_DETAILS_V3_END */

/* ==========================================================
   BRINGIIT_CUSTOMER_SHOP_HOME_UI_V2
   ========================================================== */

.customer-unified-search{
 display:grid !important;
 grid-template-columns:auto minmax(0,1fr) auto auto;
 align-items:center;
 gap:7px;
 padding:6px 8px !important;
 overflow:hidden;
}

.customer-search-mode{
 appearance:none;
 -webkit-appearance:none;
 border:0;
 outline:0;
 min-height:43px;
 max-width:140px;
 border-radius:13px;
 padding:0 12px;
 background:#f6eefa;
 color:#34153f;
 font:inherit;
 font-weight:800;
 cursor:pointer;
}

.customer-search-field{
 min-width:0;
 display:flex;
 align-items:center;
 gap:9px;
 cursor:text;
}

.customer-search-field svg{
 flex:0 0 auto;
}

.customer-search-field input{
 width:100%;
 min-width:0;
 border:0 !important;
 outline:0 !important;
 background:transparent !important;
 box-shadow:none !important;
 font:inherit;
}

.customer-search-mic-only{
 width:46px !important;
 min-width:46px !important;
 height:46px !important;
 padding:0 !important;
 margin-left:auto;
 display:flex !important;
 align-items:center;
 justify-content:center;
 border-radius:14px !important;
}

.customer-search-mic-only .voice-search-mic{
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 line-height:1;
}

.customer-unified-search .voice-search-label{
 display:none !important;
}


/* Nearby shop screen */

.customer-nearby-shops-page{
 padding-top:28px;
 padding-bottom:54px;
}

.customer-nearby-intro{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:28px;
 margin-bottom:25px;
}

.customer-nearby-intro h1{
 margin:5px 0 8px;
 font-size:clamp(32px,3vw,48px);
 line-height:1.03;
}

.customer-nearby-intro>div:first-child>p:last-child{
 margin:0;
 max-width:720px;
 color:#796d80;
}

.customer-radius-control{
 flex:0 0 auto;
 display:flex;
 flex-direction:column;
 align-items:flex-end;
 gap:8px;
}

.customer-radius-control>span{
 color:#796d80;
 font-size:12px;
 font-weight:800;
}

.customer-radius-buttons{
 display:flex;
 gap:8px;
}

.customer-radius-chip{
 border:1px solid #dfd0e5;
 background:#fff;
 color:#492c54;
 border-radius:999px;
 padding:9px 15px;
 font-weight:800;
 cursor:pointer;
}

.customer-radius-chip.selected{
 background:#9821b5;
 border-color:#9821b5;
 color:#fff;
}


.customer-nearby-results-title{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:20px;
 margin:10px 0 18px;
}

.customer-nearby-results-title h2{
 margin:0 0 3px;
}

.customer-nearby-results-title p{
 margin:0;
 color:#817588;
}

.customer-nearby-results-title>span{
 background:#f7eef9;
 color:#694276;
 border-radius:999px;
 padding:8px 12px;
 font-size:12px;
 font-weight:800;
}


.customer-nearby-shop-grid{
 display:grid;
 grid-template-columns:
  repeat(3,minmax(0,1fr));
 gap:18px;
}

.customer-nearby-shop-card{
 display:flex;
 flex-direction:column;
 min-width:0;
 overflow:hidden;
 background:#fff;
 border:1px solid #eadfed;
 border-radius:22px;
 box-shadow:
  0 10px 28px rgba(42,17,52,.06);
}

.customer-nearby-shop-image{
 position:relative;
 height:190px;
 overflow:hidden;
 background:#f6f0f8;
}

.customer-shop-photo{
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
}

.customer-shop-photo-fallback{
 width:100%;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:
  linear-gradient(135deg,#f9f2fb,#f2e8f5);
 color:#9821b5;
}

.customer-shop-photo-fallback svg{
 width:42px;
 height:42px;
}

.customer-shop-distance{
 position:absolute;
 right:12px;
 bottom:12px;
 background:rgba(255,255,255,.95);
 color:#33163e;
 padding:7px 10px;
 border-radius:999px;
 font-size:12px;
 font-weight:900;
 box-shadow:
  0 4px 12px rgba(0,0,0,.08);
}

.customer-nearby-shop-body{
 flex:1;
 display:flex;
 flex-direction:column;
 padding:18px;
}

.customer-nearby-shop-category{
 color:#9821b5;
 text-transform:uppercase;
 letter-spacing:.045em;
 font-size:11px;
 font-weight:900;
}

.customer-nearby-shop-body h3{
 margin:7px 0 6px;
 color:#281331;
 font-size:21px;
 line-height:1.15;
}

.customer-nearby-shop-address{
 margin:0;
 color:#786d80;
 font-size:13px;
 line-height:1.45;
 min-height:39px;
}

.customer-nearby-shop-status{
 display:flex;
 align-items:center;
 gap:7px;
 margin-top:13px;
 color:#4a3153;
 font-size:13px;
 font-weight:850;
}

.customer-nearby-shop-status i{
 width:8px;
 height:8px;
 flex:0 0 auto;
 border-radius:50%;
 background:#9821b5;
}

.customer-nearby-shop-note{
 margin:8px 0 16px;
 color:#817588;
 font-size:12px;
 line-height:1.45;
}

.customer-shop-here{
 width:100%;
 margin-top:auto;
}

.customer-shop-photo-credit{
 margin-top:8px;
 color:#9c929f;
 font-size:9px;
}


/* Selected shop */

.selected-customer-shop{
 display:grid;
 grid-template-columns:
  86px minmax(0,1fr) auto;
 align-items:center;
 gap:15px;
 margin:16px 0 23px;
 padding:11px;
 border:1px solid #e2d4e7;
 border-radius:19px;
 background:
  linear-gradient(135deg,#fbf6fc,#fff);
}

.selected-customer-shop-image{
 width:86px;
 height:70px;
 overflow:hidden;
 border-radius:13px;
 background:#f6eef8;
}

.selected-customer-shop-image img{
 width:100%;
 height:100%;
 object-fit:cover;
}

.selected-customer-shop-copy{
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:2px;
}

.selected-customer-shop-copy>span{
 color:#9821b5;
 font-size:10px;
 font-weight:900;
 letter-spacing:.06em;
}

.selected-customer-shop-copy strong{
 color:#291532;
 font-size:18px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

.selected-customer-shop-copy small{
 color:#75677b;
}

.selected-customer-shop-copy p{
 margin:3px 0 0;
 color:#817588;
 font-size:11px;
}

.selected-shop-change{
 white-space:nowrap;
}


/* Loading / no location */

.customer-nearby-loading,
.customer-nearby-location-empty{
 min-height:260px;
 border:1px solid #eadfed;
 border-radius:22px;
 background:#faf7fb;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
 gap:9px;
 padding:30px;
}

.customer-nearby-spinner{
 width:34px;
 height:34px;
 border-radius:50%;
 border:3px solid #ead9ee;
 border-top-color:#9821b5;
 animation:
  bringiitNearbySpin
  .75s
  linear
  infinite;
}

@keyframes bringiitNearbySpin{
 to{
  transform:rotate(360deg);
 }
}


/* Mobile */

@media(max-width:767px){

 .customer-unified-search{
  grid-template-columns:
   auto minmax(0,1fr) auto auto;
  gap:4px !important;
  padding:5px !important;
 }

 .customer-search-mode{
  max-width:105px;
  min-height:44px;
  padding:0 8px;
  font-size:12px;
 }

 .customer-search-field{
  gap:6px;
 }

 .customer-search-field svg{
  width:22px;
  height:22px;
 }

 .customer-search-field input{
  font-size:16px !important;
 }

 .customer-search-mic-only{
  width:43px !important;
  min-width:43px !important;
  height:43px !important;
  border-radius:13px !important;
 }

 .customer-nearby-intro{
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
 }

 .customer-nearby-intro h1{
  font-size:34px;
 }

 .customer-radius-control{
  width:100%;
  align-items:flex-start;
 }

 .customer-radius-buttons{
  width:100%;
 }

 .customer-radius-chip{
  flex:1 1 0;
  padding:10px 7px;
 }

 .customer-nearby-results-title{
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
 }

 .customer-nearby-shop-grid{
  grid-template-columns:1fr;
  gap:13px;
 }

 .customer-nearby-shop-card{
  display:grid;
  grid-template-columns:
   128px minmax(0,1fr);
 }

 .customer-nearby-shop-image{
  height:100%;
  min-height:178px;
 }

 .customer-nearby-shop-body{
  padding:13px;
 }

 .customer-nearby-shop-body h3{
  font-size:17px;
 }

 .customer-nearby-shop-address{
  min-height:0;
  font-size:11px;
 }

 .customer-nearby-shop-note{
  display:none;
 }

 .customer-shop-here{
  min-height:43px;
  padding:8px 10px;
  margin-top:11px;
 }

 .selected-customer-shop{
  grid-template-columns:
   68px minmax(0,1fr);
  padding:9px;
 }

 .selected-customer-shop-image{
  width:68px;
  height:60px;
 }

 .selected-shop-change{
  grid-column:1/-1;
  width:100%;
 }

}


@media(max-width:390px){

 .customer-search-mode{
  max-width:88px;
  font-size:11px;
 }

 .customer-search-mic-only{
  width:41px !important;
  min-width:41px !important;
 }

}


/* ==========================================================
   BRINGIIT_CUSTOMER_SHOP_HOURS_UI_V1
   ========================================================== */

.customer-shop-hours{
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:6px;
 margin-top:12px;
 color:#65566d;
 font-size:12px;
 line-height:1.35;
}

.customer-shop-hours strong{
 color:#34213d;
}

.customer-shop-hours-dot{
 width:8px;
 height:8px;
 flex:0 0 auto;
 border-radius:50%;
 background:#94899a;
}

.customer-shop-hours.is-open
 .customer-shop-hours-dot{
 background:#2f9c5c;
}

.customer-shop-hours.is-open strong{
 color:#25794a;
}

.customer-shop-hours.is-closed
 .customer-shop-hours-dot{
 background:#c44343;
}

.customer-shop-hours.is-closed strong{
 color:#a33232;
}

.customer-shop-hours.is-loading{
 opacity:.72;
}

.customer-shop-hours.is-loading
 .customer-shop-hours-dot{
 animation:
  bringiitShopHoursPulse
  1s
  ease-in-out
  infinite alternate;
}

@keyframes bringiitShopHoursPulse{
 from{
  opacity:.35;
 }
 to{
  opacity:1;
 }
}

@media(max-width:767px){

 .customer-shop-hours{
  margin-top:9px;
  font-size:11px;
 }

 .customer-shop-hours>span:last-child{
  width:100%;
 }

}


/* ==========================================================
   BRINGIIT_GOOGLE_SHOP_TYPE_UI_V1
   ========================================================== */

.customer-google-shop-type{
 margin:0 0 7px;
 color:#6e6076;
 font-size:13px;
 line-height:1.35;
 font-weight:700;
}

.customer-nearby-shop-body h3
 + .customer-google-shop-type{
 margin-top:-1px;
}

@media(max-width:767px){

 .customer-google-shop-type{
  margin-bottom:5px;
  font-size:11px;
 }

}