/* ==========================================================
   RANGANO — FINAL PRODUCT REFINEMENTS
   ========================================================== */


/* ----------------------------------------------------------
   Public landing-page identity.

   The public product page intentionally keeps the fuller
   identity. Inside the authenticated app the simpler text-only
   Rangano wordmark remains.
   ---------------------------------------------------------- */

.rangano-final-public .brand {
  display:
    inline-flex;

  min-height:
    44px;

  align-items:
    center;

  gap:
    10px;

  color:
    var(
      --rangano-text,
      #292522
    );

  text-decoration:
    none;
}


.rangano-final-public .brand-mark {
  display:
    grid !important;

  width:
    38px;

  height:
    38px;

  flex:
    0 0
    38px;

  place-items:
    center;

  color:
    #fff;

  background:
    var(
      --rangano-accent,
      #bd6752
    );

  border-radius:
    11px;

  box-shadow:
    0 5px 14px
    rgb(
      189 103 82 /
      18%
    );

  font-size:
    15px;

  font-weight:
    850;
}


.rangano-final-public .brand-copy {
  display:
    block !important;
}


.rangano-final-public .brand-copy strong,
.rangano-final-public .brand-copy span {
  display:
    block;
}


.rangano-final-public .brand-copy strong {
  color:
    var(
      --rangano-text,
      #292522
    );

  font-size:
    16px;

  font-weight:
    790;

  letter-spacing:
    -.025em;

  line-height:
    1.05;
}


.rangano-final-public .brand-copy span {
  margin-top:
    3px;

  color:
    var(
      --rangano-muted,
      #7b736d
    );

  font-size:
    8.5px;

  line-height:
    1;
}


/* ----------------------------------------------------------
   0-5 star selector
   ---------------------------------------------------------- */

.rangano-star-widget {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    4px;

  align-items:
    center;

  min-height:
    42px;
}


.rangano-star-zero,
.rangano-star-button,
.rangano-star-clear {
  display:
    inline-grid;

  height:
    36px;

  padding:
    0;

  place-items:
    center;

  background:
    transparent;

  border:
    0;

  font:
    inherit;

  cursor:
    pointer;
}


.rangano-star-zero {
  width:
    32px;

  margin-right:
    3px;

  color:
    var(
      --rangano-muted,
      #7b736d
    );

  background:
    var(
      --rangano-surface-soft,
      #f3f0ec
    );

  border:
    1px solid
    var(
      --rangano-border,
      #e5dfda
    );

  border-radius:
    8px;

  font-size:
    10px;

  font-weight:
    800;
}


.rangano-star-zero.active {
  color:
    #fff;

  background:
    var(
      --rangano-accent,
      #bd6752
    );

  border-color:
    var(
      --rangano-accent,
      #bd6752
    );
}


.rangano-star-button {
  width:
    31px;

  color:
    #d9d1cb;

  font-size:
    25px;

  line-height:
    1;

  transition:
    color
      130ms
      ease,
    transform
      130ms
      ease;
}


.rangano-star-button:hover {
  transform:
    translateY(
      -1px
    );
}


.rangano-star-button.active {
  color:
    var(
      --rangano-accent,
      #bd6752
    );
}


.rangano-star-clear {
  width:
    auto;

  margin-left:
    5px;

  padding:
    0
    7px;

  color:
    var(
      --rangano-muted,
      #7b736d
    );

  font-size:
    9px;

  font-weight:
    700;
}


.rangano-star-caption {
  width:
    100%;

  margin-top:
    -2px;

  color:
    var(
      --rangano-muted,
      #7b736d
    );

  font-size:
    9px;
}


/* ----------------------------------------------------------
   Bill calculations
   ---------------------------------------------------------- */

[data-paid-per-person] {
  color:
    var(
      --rangano-text-soft,
      #514b46
    ) !important;

  background:
    var(
      --rangano-surface-soft,
      #f3f0ec
    ) !important;
}


[data-service-charge-display] {
  color:
    var(
      --rangano-accent-strong,
      #9f4f3c
    ) !important;

  font-weight:
    700;
}


/* ----------------------------------------------------------
   Corkage
   ---------------------------------------------------------- */

.rangano-corkage-field {
  margin:
    8px 0
    12px;

  padding:
    12px;

  background:
    var(
      --rangano-background-subtle,
      #fbfaf8
    );

  border:
    1px solid
    var(
      --rangano-border,
      #e5dfda
    );

  border-radius:
    10px;
}


.rangano-corkage-field[hidden] {
  display:
    none;
}


/* ----------------------------------------------------------
   Shared dining amenities on restaurant detail
   ---------------------------------------------------------- */

.rangano-dining-amenities {
  margin-top:
    14px;

  padding:
    20px;

  background:
    var(
      --rangano-surface,
      #fff
    );

  border:
    1px solid
    var(
      --rangano-border,
      #e5dfda
    );

  border-radius:
    16px;

  box-shadow:
    var(
      --rangano-shadow-xs,
      0 1px 2px
      rgb(
        38 28 22 /
        4%
      )
    );
}


.rangano-dining-amenities h2 {
  margin:
    0 0
    14px;

  color:
    var(
      --rangano-text,
      #292522
    );

  font-size:
    18px;

  font-weight:
    770;

  letter-spacing:
    -.025em;
}


.rangano-dining-amenities-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.rangano-dining-amenity {
  padding:
    13px;

  background:
    var(
      --rangano-background-subtle,
      #fbfaf8
    );

  border:
    1px solid
    var(
      --rangano-border,
      #e5dfda
    );

  border-radius:
    10px;
}


.rangano-dining-amenity span,
.rangano-dining-amenity strong {
  display:
    block;
}


.rangano-dining-amenity span {
  color:
    var(
      --rangano-muted,
      #7b736d
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;
}


.rangano-dining-amenity strong {
  margin-top:
    5px;

  color:
    var(
      --rangano-text,
      #292522
    );

  font-size:
    13px;
}


@media (
  max-width: 560px
) {
  .rangano-dining-amenities-grid {
    grid-template-columns:
      1fr;
  }


  .rangano-final-public .brand-copy span {
    display:
      block !important;
  }
}