/* =========================================================
   CUEVA — NOTIFICATIONS
   Lightweight mobile notification center.
========================================================= */

.notifications-page,
.notifications-page *{box-sizing:border-box}

.notifications-page{
  display:grid;
  gap:13px;
  width:100%;
  min-width:0;
  padding-bottom:22px;
  color:#17181a;
}

.notifications-simple-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 0;
}

.notifications-eyebrow{
  display:block;
  color:#a77b00;
  font-size:8px;
  font-weight:850;
  letter-spacing:.14em;
}

.notifications-simple-head h2{
  margin:4px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
}

.notifications-simple-head p{
  margin:5px 0 0;
  color:#85888e;
  font-size:10.5px;
  line-height:1.35;
}

.notifications-mark-read{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  flex:0 0 auto;
  padding:0 10px;
  border:1px solid #e3e3e5;
  border-radius:10px;
  background:#fff;
  color:#4c4f55;
  font:inherit;
  font-size:8.5px;
  font-weight:780;
}

.notifications-mark-read[hidden]{display:none!important}
.notifications-mark-read:disabled{opacity:.5}
.notifications-mark-read i{color:#a77b00}

.notifications-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 1px 2px;
  scrollbar-width:none;
}
.notifications-tabs::-webkit-scrollbar{display:none}

.notification-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  flex:0 0 auto;
  padding:0 11px;
  border:1px solid #e5e5e7;
  border-radius:999px;
  background:#fff;
  color:#666970;
  font:inherit;
  font-size:8.5px;
  font-weight:780;
  white-space:nowrap;
}

.notification-tab span{
  display:grid;
  min-width:18px;
  height:18px;
  place-items:center;
  padding:0 4px;
  border-radius:999px;
  background:#f1f1f2;
  color:#74777d;
  font-size:7px;
  font-weight:850;
}

.notification-tab.active{
  border-color:#17181a;
  background:#17181a;
  color:#fff;
}
.notification-tab.active span{
  background:#e6bf4b;
  color:#1b1b1c;
}

.notifications-list-card{
  overflow:hidden;
  border:1px solid #e9e9eb;
  border-radius:19px;
  background:#fff;
  box-shadow:0 7px 22px rgba(17,19,23,.035);
}

.notifications-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 14px 11px;
  border-bottom:1px solid #efeff0;
}

.notifications-list-head h3{
  margin:0;
  color:#1a1b1e;
  font-size:14px;
  font-weight:820;
  letter-spacing:-.02em;
}
.notifications-list-head p{
  margin:3px 0 0;
  color:#999ba0;
  font-size:8px;
}

.notifications-limit-note{
  padding:5px 8px;
  border-radius:999px;
  background:#f6f6f7;
  color:#92949a;
  font-size:7px;
  font-weight:760;
  white-space:nowrap;
}

.notifications-list{display:grid}

.notification-row{
  position:relative;
  display:grid;
  grid-template-columns:39px minmax(0,1fr) 12px;
  gap:11px;
  align-items:center;
  width:100%;
  min-height:78px;
  padding:11px 13px;
  border:0;
  border-bottom:1px solid #f0f0f1;
  background:#fff;
  color:inherit;
  font:inherit;
  text-align:left;
}
.notification-row:last-child{border-bottom:0}
.notification-row.unread{background:#fffdf7}
.notification-row.unread::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:#d1a434;
}

.notification-icon{
  display:grid;
  width:39px;
  height:39px;
  place-items:center;
  border-radius:12px;
  font-size:14px;
}
.notification-icon.booking{background:#f7f0dd;color:#9a7417}
.notification-icon.wallet{background:#edf6ef;color:#2d7748}
.notification-icon.alert{background:#fff0e8;color:#b45d26}

.notification-copy{
  display:block;
  min-width:0;
}
.notification-title-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.notification-title-line strong{
  overflow:hidden;
  color:#202125;
  font-size:10.5px;
  font-weight:820;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.notification-unread-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#d1a434;
}
.notification-message{
  display:-webkit-box;
  margin-top:4px;
  overflow:hidden;
  color:#75787e;
  font-size:9px;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.notification-time{
  display:block;
  margin-top:5px;
  color:#aaaeb3;
  font-size:7.5px;
  font-weight:650;
}
.notification-chevron{
  color:#c2c4c8;
  font-size:8px;
}

.notifications-empty{
  display:grid;
  min-height:235px;
  place-items:center;
  align-content:center;
  padding:28px 20px;
  color:#8f9298;
  text-align:center;
}
.notifications-empty i{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:15px;
  background:#f5f5f6;
  color:#b2b4b9;
  font-size:18px;
}
.notifications-empty h3{
  margin:10px 0 0;
  color:#4c4f55;
  font-size:12px;
  font-weight:800;
}
.notifications-empty p{
  max-width:260px;
  margin:5px 0 0;
  color:#9a9ca1;
  font-size:9px;
  line-height:1.4;
}

@media(max-width:380px){
  .notifications-simple-head h2{font-size:26px}
  .notifications-simple-head p{max-width:220px}
  .notifications-mark-read span{display:none}
  .notifications-mark-read{width:34px;padding:0}
}


.notifications-more-wrap{
  display:flex;
  justify-content:center;
  padding:12px 12px 14px;
  border-top:1px solid #f0f0f1;
  background:#fff;
}
.notifications-show-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:126px;
  min-height:36px;
  padding:0 14px;
  border:1px solid #dedfe2;
  border-radius:11px;
  background:#fff;
  color:#34363a;
  font:inherit;
  font-size:9px;
  font-weight:800;
}
.notifications-show-more[hidden]{display:none!important}
.notifications-show-more:disabled{opacity:.55}
.notifications-show-more i{font-size:8px;color:#a77b00}