/* ==========================================================
   RANGANO — STAGE 3.2C
   DETAIL, FORMS & RESPONSIVE FINISH
   ========================================================== */


/*
 * These variables repeat the final Rangano palette so pages
 * without SiteNav, such as login/error pages, still receive
 * the same visual language.
 */

:root {
  --rangano-background:
    #f7f5f1;

  --rangano-background-subtle:
    #fbfaf8;

  --rangano-surface:
    #ffffff;

  --rangano-surface-soft:
    #f3f0ec;

  --rangano-surface-warm:
    #fbf2ef;

  --rangano-text:
    #292522;

  --rangano-text-soft:
    #514b46;

  --rangano-muted:
    #7b736d;

  --rangano-muted-light:
    #9b938d;

  --rangano-border:
    #e5dfda;

  --rangano-border-strong:
    #d7cfc8;

  --rangano-accent:
    #bd6752;

  --rangano-accent-strong:
    #9f4f3c;

  --rangano-accent-soft:
    #f5e5df;

  --rangano-accent-softer:
    #fcf4f1;

  --rangano-success:
    #4c7556;

  --rangano-success-soft:
    #edf5ef;

  --rangano-warning:
    #9a7138;

  --rangano-warning-soft:
    #faf1df;

  --rangano-danger:
    #a74f4a;

  --rangano-danger-soft:
    #fae9e7;

  --rangano-radius-sm:
    10px;

  --rangano-radius-md:
    14px;

  --rangano-radius-lg:
    18px;

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

  --rangano-shadow-sm:
    0 5px 18px
    rgb(
      38 28 22 /
      5%
    );

  --rangano-shadow-md:
    0 16px 46px
    rgb(
      38 28 22 /
      8%
    );

  --rangano-font:
    Inter,
    "Aptos",
    "Segoe UI",
    ui-sans-serif,
    system-ui,
    sans-serif;
}


.rangano-final-restaurant-detail,
.rangano-final-form,
.rangano-final-visit-detail,
.rangano-final-profile,
.rangano-final-history,
.rangano-final-user-profile,
.rangano-final-notifications,
.rangano-final-admin,
.rangano-final-auth,
.rangano-final-error {
  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-background
    );

  font-family:
    var(
      --rangano-font
    );
}


/* ==========================================================
   SHARED DETAILS
   ========================================================== */

.rangano-final-restaurant-detail main,
.rangano-final-visit-detail main,
.rangano-final-profile main,
.rangano-final-history main,
.rangano-final-user-profile main,
.rangano-final-notifications main,
.rangano-final-admin main {
  padding-top:
    42px;

  padding-bottom:
    88px;
}


.rangano-final-form main {
  width:
    min(
      840px,
      calc(
        100% - 36px
      )
    );

  margin:
    0 auto;

  padding:
    38px 0
    88px;
}


.rangano-final-form h1,
.rangano-final-profile h1,
.rangano-final-history h1,
.rangano-final-notifications h1,
.rangano-final-admin h1,
.rangano-final-user-profile h1 {
  color:
    var(
      --rangano-text
    );

  font-weight:
    790;

  letter-spacing:
    -.045em;
}


.rangano-final-form main > h1 {
  margin:
    0 0
    7px;

  font-size:
    clamp(
      32px,
      5vw,
      42px
    );
}


.rangano-final-form .intro {
  max-width:
    650px;

  margin:
    0 0
    27px;

  color:
    var(
      --rangano-muted
    );

  font-size:
    12px;

  line-height:
    1.6;
}


.rangano-final-form .back {
  display:
    inline-flex;

  min-height:
    31px;

  align-items:
    center;

  margin-bottom:
    19px;

  color:
    var(
      --rangano-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  text-decoration:
    none;
}


.rangano-final-form .back:hover {
  color:
    var(
      --rangano-accent
    );
}


/* ==========================================================
   FORMS
   ========================================================== */

.rangano-final-form main > form {
  padding:
    26px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    17px;

  box-shadow:
    var(
      --rangano-shadow-sm
    );
}


.rangano-final-form .section {
  margin:
    0;

  padding:
    0 0
    26px;
}


.rangano-final-form .section + .section {
  padding-top:
    27px;

  border-top:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-form .section:last-of-type {
  padding-bottom:
    0;
}


.rangano-final-form .section h2 {
  margin:
    0 0
    5px;

  color:
    var(
      --rangano-text
    );

  font-size:
    17px;

  font-weight:
    770;

  letter-spacing:
    -.025em;
}


.rangano-final-form .section-description,
.rangano-final-form .hint,
.rangano-final-form small {
  color:
    var(
      --rangano-muted
    );

  font-size:
    10px;

  line-height:
    1.5;
}


.rangano-final-form .section-description {
  margin:
    0 0
    17px;
}


.rangano-final-form .grid {
  gap:
    15px;
}


.rangano-final-form label {
  color:
    var(
      --rangano-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;
}


.rangano-final-form input:not(
  [type="checkbox"]
):not(
  [type="radio"]
),
.rangano-final-form select,
.rangano-final-form textarea {
  width:
    100%;

  min-height:
    42px;

  padding:
    10px
    11px;

  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    9px;

  font:
    inherit;

  font-size:
    11px;
}


.rangano-final-form textarea {
  min-height:
    115px;

  line-height:
    1.55;

  resize:
    vertical;
}


.rangano-final-form input:focus,
.rangano-final-form select:focus,
.rangano-final-form textarea:focus {
  background:
    var(
      --rangano-surface
    );

  border-color:
    rgb(
      189 103 82 /
      62%
    );

  box-shadow:
    0 0 0 3px
    rgb(
      189 103 82 /
      9%
    );

  outline:
    0;
}


.rangano-final-form input[type="checkbox"],
.rangano-final-form input[type="radio"] {
  accent-color:
    var(
      --rangano-accent
    );
}


.rangano-final-form .checkbox-row,
.rangano-final-form .radio-row,
.rangano-final-form .active-box,
.rangano-final-form .weekday-option {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    9px;
}


.rangano-final-form .weekday-grid {
  gap:
    7px;
}


.rangano-final-form .actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    26px;

  padding-top:
    20px;

  border-top:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-form .button,
.rangano-final-form .submit-button,
.rangano-final-form main button {
  min-height:
    40px;

  padding:
    0 14px;

  border-radius:
    9px;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    780;

  cursor:
    pointer;
}


.rangano-final-form .button-primary,
.rangano-final-form .submit-button,
.rangano-final-form .actions button[type="submit"] {
  color:
    #fff;

  background:
    var(
      --rangano-accent
    );

  border:
    1px solid
    var(
      --rangano-accent
    );

  box-shadow:
    0 6px 18px
    rgb(
      189 103 82 /
      12%
    );
}


.rangano-final-form .button-primary:hover,
.rangano-final-form .submit-button:hover,
.rangano-final-form .actions button[type="submit"]:hover {
  background:
    var(
      --rangano-accent-strong
    );
}


.rangano-final-form .button-secondary {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-form .button-danger,
.rangano-final-form .danger-button {
  color:
    var(
      --rangano-danger
    );

  background:
    var(
      --rangano-danger-soft
    );

  border:
    1px solid
    rgb(
      167 79 74 /
      14%
    );
}


.rangano-final-form .privacy-box,
.rangano-final-form .info-box,
.rangano-final-form .helper-box {
  padding:
    11px 12px;

  color:
    var(
      --rangano-muted
    );

  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    10px;

  font-size:
    10px;

  line-height:
    1.55;
}


.rangano-final-form .privacy-box strong,
.rangano-final-form .info-box strong {
  color:
    var(
      --rangano-text-soft
    );
}


/* companion / recurrence / opening-hours components */

.rangano-final-form .companion-picker,
.rangano-final-form .promotion-recurrence,
.rangano-final-form .recurrence-fields,
.rangano-final-form .opening-hours,
.rangano-final-form .location-panel,
.rangano-final-form .location-resolver {
  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    12px;
}


.rangano-final-form .companion-chip,
.rangano-final-form .selected-companion,
.rangano-final-form .recurrence-preview {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-softer
    );

  border-color:
    rgb(
      189 103 82 /
      14%
    );
}


/* ==========================================================
   RESTAURANT DETAIL
   ========================================================== */

.rangano-final-restaurant-detail main {
  width:
    min(
      1120px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;
}


.rangano-final-restaurant-detail .back {
  color:
    var(
      --rangano-muted
    );

  font-size:
    10px;

  text-decoration:
    none;
}


.rangano-final-restaurant-detail .hero,
.rangano-final-restaurant-detail .restaurant-header,
.rangano-final-restaurant-detail .detail-header {
  margin-bottom:
    22px;
}


.rangano-final-restaurant-detail h1 {
  margin:
    0;

  color:
    var(
      --rangano-text
    );

  font-size:
    clamp(
      36px,
      5vw,
      52px
    );

  font-weight:
    790;

  line-height:
    1.02;

  letter-spacing:
    -.052em;
}


.rangano-final-restaurant-detail .subtitle,
.rangano-final-restaurant-detail .location,
.rangano-final-restaurant-detail .meta,
.rangano-final-restaurant-detail .hero p {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-restaurant-detail .card,
.rangano-final-restaurant-detail main > section,
.rangano-final-restaurant-detail .section-card {
  background:
    var(
      --rangano-surface
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    16px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-restaurant-detail .card {
  padding:
    20px;
}


.rangano-final-restaurant-detail .card h2,
.rangano-final-restaurant-detail .section-heading h2 {
  color:
    var(
      --rangano-text
    );

  font-size:
    18px;

  font-weight:
    770;

  letter-spacing:
    -.025em;
}


.rangano-final-restaurant-detail .summary-grid,
.rangano-final-restaurant-detail .details-grid,
.rangano-final-restaurant-detail .info-grid,
.rangano-final-restaurant-detail .stats-grid {
  gap:
    8px;
}


.rangano-final-restaurant-detail .summary-grid > *,
.rangano-final-restaurant-detail .details-grid > *,
.rangano-final-restaurant-detail .info-grid > *,
.rangano-final-restaurant-detail .stats-grid > * {
  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    10px;
}


.rangano-final-restaurant-detail .tag,
.rangano-final-restaurant-detail .chip,
.rangano-final-restaurant-detail .badge {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );

  border-color:
    var(
      --rangano-border
    );
}


.rangano-final-restaurant-detail .rating,
.rangano-final-restaurant-detail .highlight {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-softer
    );
}


.rangano-final-restaurant-detail .visit-card,
.rangano-final-restaurant-detail .recommendation-card,
.rangano-final-restaurant-detail .promotion-card,
.rangano-final-restaurant-detail .specialty-card {
  border-color:
    var(
      --rangano-border
    );

  border-radius:
    12px;

  box-shadow:
    none;
}


.rangano-final-restaurant-detail .page-actions,
.rangano-final-restaurant-detail .hero-actions,
.rangano-final-restaurant-detail .actions {
  gap:
    8px;
}


.rangano-final-restaurant-detail .page-button,
.rangano-final-restaurant-detail .button,
.rangano-final-restaurant-detail main button {
  min-height:
    39px;

  padding:
    0 13px;

  border-radius:
    9px;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    760;
}


.rangano-final-restaurant-detail .page-button-primary,
.rangano-final-restaurant-detail .button-primary {
  color:
    #fff;

  background:
    var(
      --rangano-accent
    );

  border-color:
    var(
      --rangano-accent
    );
}


.rangano-final-restaurant-detail .page-button-danger,
.rangano-final-restaurant-detail .button-danger {
  color:
    var(
      --rangano-danger
    );

  background:
    var(
      --rangano-danger-soft
    );

  border-color:
    rgb(
      167 79 74 /
      14%
    );
}


/* ==========================================================
   VISIT DETAIL
   ========================================================== */

.rangano-final-visit-detail main {
  width:
    min(
      920px,
      calc(
        100% - 38px
      )
    );

  margin:
    0 auto;
}


.rangano-final-visit-detail h1 {
  color:
    var(
      --rangano-text
    );

  font-size:
    clamp(
      34px,
      5vw,
      46px
    );

  font-weight:
    790;

  letter-spacing:
    -.048em;
}


.rangano-final-visit-detail .intro,
.rangano-final-visit-detail .meta {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-visit-detail .card {
  margin-bottom:
    10px;

  padding:
    20px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-visit-detail .card h2 {
  color:
    var(
      --rangano-text
    );

  font-size:
    17px;

  font-weight:
    770;

  letter-spacing:
    -.025em;
}


.rangano-final-visit-detail .summary-grid,
.rangano-final-visit-detail .details-grid,
.rangano-final-visit-detail .ratings-grid,
.rangano-final-visit-detail .money-grid {
  gap:
    8px;
}


.rangano-final-visit-detail .summary-grid > *,
.rangano-final-visit-detail .details-grid > *,
.rangano-final-visit-detail .ratings-grid > *,
.rangano-final-visit-detail .money-grid > * {
  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    10px;
}


.rangano-final-visit-detail .item-card,
.rangano-final-visit-detail .attachment-card,
.rangano-final-visit-detail .photo-card {
  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    11px;
}


.rangano-final-visit-detail .notes {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );

  border-radius:
    10px;
}


.rangano-final-visit-detail .page-actions {
  display:
    flex;

  gap:
    8px;

  margin-top:
    22px;

  padding-top:
    20px;

  border-top:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-visit-detail .page-button {
  display:
    inline-flex;

  min-height:
    40px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 14px;

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    780;

  text-decoration:
    none;
}


.rangano-final-visit-detail .page-button-primary {
  color:
    #fff;

  background:
    var(
      --rangano-accent
    );
}


.rangano-final-visit-detail .page-button-danger {
  color:
    var(
      --rangano-danger
    );

  background:
    var(
      --rangano-danger-soft
    );

  border:
    1px solid
    rgb(
      167 79 74 /
      14%
    );
}


/* ==========================================================
   PROFILE
   ========================================================== */

.rangano-final-profile main {
  width:
    min(
      760px,
      calc(
        100% - 36px
      )
    );

  margin:
    0 auto;
}


.rangano-final-profile main > h1 {
  margin-bottom:
    7px;

  font-size:
    39px;
}


.rangano-final-profile .intro,
.rangano-final-profile main > p {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-profile main > form {
  margin-top:
    25px;

  padding:
    25px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    17px;

  box-shadow:
    var(
      --rangano-shadow-sm
    );
}


.rangano-final-profile .section {
  margin:
    0;

  padding:
    0 0
    24px;
}


.rangano-final-profile .section + .section {
  padding-top:
    25px;

  border-top:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-profile .section h2 {
  margin:
    0 0
    5px;

  font-size:
    17px;

  font-weight:
    770;
}


.rangano-final-profile .section-description {
  color:
    var(
      --rangano-muted
    );

  font-size:
    10px;
}


.rangano-final-profile label {
  color:
    var(
      --rangano-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;
}


.rangano-final-profile input,
.rangano-final-profile select,
.rangano-final-profile textarea {
  min-height:
    42px;

  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-background-subtle
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    9px;

  font:
    inherit;
}


.rangano-final-profile .privacy-box {
  color:
    var(
      --rangano-muted
    );

  background:
    var(
      --rangano-warning-soft
    );

  border-color:
    rgb(
      154 113 56 /
      12%
    );

  border-radius:
    10px;
}


.rangano-final-profile .actions button {
  min-height:
    41px;

  color:
    #fff;

  background:
    var(
      --rangano-accent
    );

  border:
    0;

  border-radius:
    9px;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    800;
}


/* ==========================================================
   HISTORY
   ========================================================== */

.rangano-final-history main {
  width:
    min(
      1120px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;
}


.rangano-final-history .page-header h1,
.rangano-final-history main > h1 {
  font-size:
    clamp(
      34px,
      4.5vw,
      46px
    );
}


.rangano-final-history .period-control {
  padding:
    4px;

  background:
    var(
      --rangano-surface-soft
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    11px;
}


.rangano-final-history .period-link {
  border-radius:
    8px;
}


.rangano-final-history .period-link.active {
  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-surface
    );

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-history .stat-card,
.rangano-final-history .panel,
.rangano-final-history .visit-card {
  background:
    var(
      --rangano-surface
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    14px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-history .stat-card strong {
  color:
    var(
      --rangano-text
    );

  letter-spacing:
    -.035em;
}


.rangano-final-history .metric-row {
  background:
    var(
      --rangano-background-subtle
    );
}


/* ==========================================================
   USER PROFILE
   ========================================================== */

.rangano-final-user-profile .profile-shell {
  max-width:
    960px;
}


.rangano-final-user-profile .profile-hero {
  padding:
    22px;

  background:
    var(
      --rangano-surface
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    17px;

  box-shadow:
    var(
      --rangano-shadow-sm
    );
}


.rangano-final-user-profile .profile-avatar-large {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-soft
    );
}


.rangano-final-user-profile .visibility-badge {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );

  border-color:
    var(
      --rangano-border
    );
}


.rangano-final-user-profile .primary-button {
  color:
    #fff;

  background:
    var(
      --rangano-accent
    );

  border-color:
    var(
      --rangano-accent
    );
}


.rangano-final-user-profile .secondary-button {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface
    );

  border-color:
    var(
      --rangano-border
    );
}


.rangano-final-user-profile .stat-card,
.rangano-final-user-profile .feed-card,
.rangano-final-user-profile .network-card {
  border-color:
    var(
      --rangano-border
    );

  border-radius:
    13px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


/* ==========================================================
   NOTIFICATIONS
   ========================================================== */

.rangano-final-notifications main {
  width:
    min(
      860px,
      calc(
        100% - 36px
      )
    );

  margin:
    0 auto;
}


.rangano-final-notifications .page-heading {
  margin-bottom:
    20px;
}


.rangano-final-notifications .page-heading h1 {
  font-size:
    41px;
}


.rangano-final-notifications .notification-list {
  gap:
    7px;
}


.rangano-final-notifications .notification-card {
  grid-template-columns:
    8px
    1fr
    auto;

  padding:
    15px 16px;

  background:
    var(
      --rangano-surface
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    13px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-notifications .notification-card.unread {
  background:
    linear-gradient(
      90deg,
      var(
        --rangano-accent-softer
      ),
      #fff 40%
    );

  border-color:
    rgb(
      189 103 82 /
      24%
    );

  box-shadow:
    var(
      --rangano-shadow-sm
    );
}


.rangano-final-notifications .notification-card.unread
.state-dot {
  background:
    var(
      --rangano-accent
    );
}


.rangano-final-notifications .notification-message {
  color:
    var(
      --rangano-text-soft
    );
}


.rangano-final-notifications .notification-open button {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );

  border:
    1px solid
    var(
      --rangano-border
    );
}


.rangano-final-notifications .read-all button {
  border-color:
    var(
      --rangano-border
    );
}


/* ==========================================================
   ADMIN FEEDBACK
   ========================================================== */

.rangano-final-admin main {
  max-width:
    1120px;
}


.rangano-final-admin h1 {
  font-size:
    42px;
}


.rangano-final-admin .filters {
  padding:
    4px;

  background:
    var(
      --rangano-surface-soft
    );

  border-radius:
    11px;
}


.rangano-final-admin .filters a {
  border:
    0;

  background:
    transparent;
}


.rangano-final-admin .filters a.active {
  color:
    var(
      --rangano-text
    );

  background:
    var(
      --rangano-surface
    );

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-admin .feedback-card {
  padding:
    18px;

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    15px;

  box-shadow:
    var(
      --rangano-shadow-xs
    );
}


.rangano-final-admin .badge {
  color:
    var(
      --rangano-text-soft
    );

  background:
    var(
      --rangano-surface-soft
    );
}


.rangano-final-admin .badge.status-new {
  color:
    var(
      --rangano-accent-strong
    );

  background:
    var(
      --rangano-accent-soft
    );
}


.rangano-final-admin .admin-form select,
.rangano-final-admin .admin-form input,
.rangano-final-admin .admin-form textarea {
  background:
    var(
      --rangano-background-subtle
    );

  border-color:
    var(
      --rangano-border
    );

  border-radius:
    8px;
}


.rangano-final-admin .admin-form button {
  background:
    var(
      --rangano-accent
    );
}


/* ==========================================================
   LOGIN / ONBOARDING
   ========================================================== */

.rangano-final-auth {
  min-height:
    100vh;

  background:
    radial-gradient(
      circle at 65% 20%,
      rgb(
        189 103 82 /
        8%
      ),
      transparent 34%
    ),
    var(
      --rangano-background
    );
}


.rangano-final-auth main {
  width:
    min(
      500px,
      calc(
        100% - 30px
      )
    );

  padding:
    34px;

  background:
    rgb(
      255 255 255 /
      92%
    );

  border:
    1px solid
    var(
      --rangano-border
    );

  border-radius:
    20px;

  box-shadow:
    var(
      --rangano-shadow-md
    );

  backdrop-filter:
    blur(
      12px
    );
}


.rangano-final-auth .mark {
  background:
    var(
      --rangano-accent
    );

  box-shadow:
    0 7px 20px
    rgb(
      189 103 82 /
      17%
    );
}


.rangano-final-auth main h1 {
  color:
    var(
      --rangano-text
    );

  font-size:
    30px;

  letter-spacing:
    -.04em;
}


.rangano-final-auth main p {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-auth main > a {
  background:
    var(
      --rangano-accent
    );

  border-radius:
    9px;
}


/* ==========================================================
   ERROR PAGES
   ========================================================== */

.rangano-final-error {
  min-height:
    100vh;
}


.rangano-final-error main {
  width:
    min(
      620px,
      calc(
        100% - 30px
      )
    );

  margin:
    0 auto;

  padding:
    100px 0;

  text-align:
    center;
}


.rangano-final-error h1 {
  margin:
    0;

  color:
    var(
      --rangano-text
    );

  font-size:
    clamp(
      52px,
      12vw,
      92px
    );

  font-weight:
    790;

  letter-spacing:
    -.065em;
}


.rangano-final-error p {
  color:
    var(
      --rangano-muted
    );
}


.rangano-final-error a {
  display:
    inline-flex;

  min-height:
    41px;

  margin-top:
    15px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 14px;

  color:
    #fff;

  background:
    var(
      --rangano-accent
    );

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    800;

  text-decoration:
    none;
}


/* ==========================================================
   RESPONSIVE FINISH
   ========================================================== */

@media (
  max-width: 760px
) {
  .rangano-final-restaurant-detail main,
  .rangano-final-visit-detail main,
  .rangano-final-profile main,
  .rangano-final-history main,
  .rangano-final-user-profile main,
  .rangano-final-notifications main,
  .rangano-final-admin main {
    width:
      calc(
        100% - 28px
      );

    padding-top:
      31px;

    padding-bottom:
      74px;
  }


  .rangano-final-form main {
    width:
      calc(
        100% - 28px
      );

    padding-top:
      30px;

    padding-bottom:
      74px;
  }


  .rangano-final-form main > form,
  .rangano-final-profile main > form {
    padding:
      19px;
  }


  .rangano-final-form .grid {
    grid-template-columns:
      1fr;
  }


  .rangano-final-form .full {
    grid-column:
      auto;
  }


  .rangano-final-form .actions {
    align-items:
      stretch;

    flex-direction:
      column-reverse;
  }


  .rangano-final-form .actions .button,
  .rangano-final-form .actions button {
    width:
      100%;

    justify-content:
      center;

    text-align:
      center;
  }


  .rangano-final-restaurant-detail h1 {
    font-size:
      38px;
  }


  .rangano-final-restaurant-detail .page-actions,
  .rangano-final-visit-detail .page-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .rangano-final-restaurant-detail .page-actions > *,
  .rangano-final-visit-detail .page-actions > * {
    width:
      100%;
  }


  .rangano-final-restaurant-detail .page-actions button,
  .rangano-final-visit-detail .page-actions button,
  .rangano-final-restaurant-detail .page-button,
  .rangano-final-visit-detail .page-button {
    width:
      100%;
  }


  .rangano-final-admin .admin-form {
    grid-template-columns:
      1fr;
  }


  .rangano-final-admin .admin-form .full {
    grid-column:
      auto;
  }
}


@media (
  max-width: 520px
) {
  .rangano-final-form main > h1,
  .rangano-final-profile main > h1,
  .rangano-final-history h1,
  .rangano-final-notifications .page-heading h1,
  .rangano-final-admin h1 {
    font-size:
      34px;
  }


  .rangano-final-form main > form,
  .rangano-final-profile main > form,
  .rangano-final-restaurant-detail .card,
  .rangano-final-visit-detail .card {
    padding:
      16px;
  }


  .rangano-final-form .weekday-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .rangano-final-notifications .notification-card {
    grid-template-columns:
      8px
      1fr;
  }


  .rangano-final-notifications .notification-open {
    grid-column:
      2;
  }


  .rangano-final-notifications .notification-open button {
    width:
      100%;
  }


  .rangano-final-auth main {
    padding:
      25px;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  .rangano-final-restaurant-detail *,
  .rangano-final-form *,
  .rangano-final-visit-detail *,
  .rangano-final-profile *,
  .rangano-final-history *,
  .rangano-final-user-profile *,
  .rangano-final-notifications *,
  .rangano-final-admin *,
  .rangano-final-auth * {
    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;
  }
}