:root {
  --admin-ink: #18342f;
  --admin-muted: #71817d;
  --admin-bg: #f4f7f5;
  --admin-paper: #ffffff;
  --admin-teal: #087f70;
  --admin-teal-dark: #075c55;
  --admin-sidebar: #123b35;
  --admin-coral: #ef795e;
  --admin-sun: #f4ca62;
  --admin-line: #e4ebe8;
  --admin-shadow: 0 14px 38px rgba(24, 52, 47, 0.08);
}

* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
}
body {
  margin: 0;
  color: var(--admin-ink);
  background: var(--admin-bg);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}

.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.admin-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 42% 58%;
  color: white;
  background: var(--admin-teal);
  font-size: 12px;
  font-weight: 800;
  transform: rotate(-5deg);
}
.admin-brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.admin-brand strong {
  font-family: Georgia, serif;
  font-size: 21px;
}
.admin-brand small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.admin-brand-light strong {
  color: white;
}
.admin-brand-light small {
  color: rgba(255, 255, 255, 0.56);
}

.overline {
  margin: 0 0 7px;
  color: var(--admin-teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.overline-light {
  color: #9ce0d0;
}
.admin-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 19px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: var(--admin-teal);
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 9px 22px rgba(8, 127, 112, 0.18);
}
.admin-button:hover {
  background: var(--admin-teal-dark);
}
.admin-button-wide {
  width: 100%;
}
.admin-button-sun {
  color: var(--admin-ink);
  background: var(--admin-sun);
  box-shadow: none;
}
.admin-button-sun:hover {
  background: #e7b948;
}

.alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.5;
}
.alert-error {
  color: #8d3829;
  border: 1px solid #f1c7bd;
  background: #fff0ec;
}
.alert-success {
  color: #176958;
  border: 1px solid #b8e0d6;
  background: #eaf8f4;
}

/* Sign in */
.login-page {
  min-height: 100vh;
  background: #eef4f1;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(430px, 0.9fr) minmax(520px, 1.1fr);
}
.login-story {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px clamp(40px, 6vw, 92px);
  color: white;
  background: linear-gradient(155deg, #0c6257 0%, #103d37 62%, #102f2b 100%);
}
.login-story::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -210px;
  bottom: -140px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 48% 52% 64% 36%;
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.025),
    0 0 0 145px rgba(255, 255, 255, 0.02);
  transform: rotate(28deg);
}
.login-story::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  top: 18%;
  right: 10%;
  border-radius: 50%;
  background: var(--admin-sun);
  opacity: 0.9;
  box-shadow: 0 0 0 25px rgba(244, 202, 98, 0.08);
}
.login-story > * {
  position: relative;
  z-index: 1;
}
.login-story h1 {
  max-width: 620px;
  margin: 0 0 24px;
  font:
    600 clamp(48px, 5vw, 76px)/0.99 Georgia,
    serif;
  letter-spacing: -0.045em;
}
.login-story > div > p:last-child {
  max-width: 510px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
  line-height: 1.7;
}
.login-coordinate {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}
.login-panel {
  display: grid;
  place-items: center;
  padding: 50px;
  background: white;
}
.login-form-wrap {
  width: min(100%, 430px);
}
.login-form-wrap h2 {
  margin: 0;
  font:
    600 43px/1.1 Georgia,
    serif;
  letter-spacing: -0.03em;
}
.form-intro {
  margin: 12px 0 30px;
  color: var(--admin-muted);
  font-size: 14px;
}
.login-form {
  display: grid;
}
.login-form label,
.field label {
  margin-bottom: 8px;
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 750;
}
.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.label-row label {
  margin: 0;
}
.label-row span {
  color: var(--admin-muted);
  font-size: 10px;
}
.login-form input,
.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d9e3df;
  border-radius: 11px;
  outline: 0;
  color: var(--admin-ink);
  background: white;
}
.login-form input:focus,
.field input:focus,
.field select:focus {
  border-color: var(--admin-teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 112, 0.09);
}
.login-form .admin-button {
  margin-top: 26px;
}
.login-help {
  margin: 22px 0 0;
  color: #93a09c;
  font-size: 10px;
  text-align: center;
}

/* Main shell */
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}
.admin-sidebar {
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 27px 18px 20px;
  color: white;
  background: var(--admin-sidebar);
  overflow-y: auto;
}
.admin-sidebar > .admin-brand {
  padding: 0 10px 25px;
}
.admin-nav {
  flex: 1;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.admin-nav > p {
  margin: 24px 12px 8px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.admin-nav > a,
.nav-disabled {
  min-height: 43px;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 3px 0;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
}
.admin-nav > a {
  color: rgba(255, 255, 255, 0.7);
}
.admin-nav > a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.07);
}
.admin-nav > a.active {
  color: white;
  background: var(--admin-teal);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.nav-icon {
  color: #95d5c6;
  font-size: 15px;
  text-align: center;
}
.active .nav-icon {
  color: white;
}
.nav-disabled {
  color: rgba(255, 255, 255, 0.36);
  cursor: default;
}
.nav-disabled small {
  padding: 3px 5px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.43);
  background: rgba(255, 255, 255, 0.06);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar-profile {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--admin-ink);
  background: var(--admin-sun);
  font-size: 12px;
  font-weight: 800;
}
.sidebar-profile > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-profile strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile small {
  overflow: hidden;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-main {
  min-width: 0;
}
.admin-topbar {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 21px clamp(24px, 4vw, 50px);
  border-bottom: 1px solid var(--admin-line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
}
.admin-topbar h1 {
  margin: 0;
  font:
    600 26px/1.1 Georgia,
    serif;
  letter-spacing: -0.02em;
}
.admin-topbar .overline {
  margin-bottom: 4px;
}
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  color: var(--admin-ink);
  background: white;
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 15px;
}
.view-site {
  color: var(--admin-teal);
  font-size: 11px;
  font-weight: 750;
}
.icon-button {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  color: var(--admin-muted);
  background: white;
  font-size: 17px;
}
.icon-button:hover {
  color: var(--admin-coral);
  border-color: #f0c8be;
}
.admin-content {
  padding: 32px clamp(24px, 4vw, 50px) 60px;
}

.welcome-card {
  min-height: 190px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 38px 45px;
  border-radius: 20px;
  color: white;
  background: linear-gradient(125deg, #087f70, #07544d);
  box-shadow: var(--admin-shadow);
}
.welcome-card > div:first-child {
  flex: 1;
  position: relative;
  z-index: 1;
}
.welcome-card h2 {
  margin: 0 0 10px;
  font:
    600 34px/1.1 Georgia,
    serif;
}
.welcome-card p:last-child {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  line-height: 1.6;
}
.welcome-card .admin-button {
  position: relative;
  z-index: 1;
}
.welcome-shape {
  position: absolute;
  width: 270px;
  height: 270px;
  right: -100px;
  top: -105px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 44% 56% 61% 39%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.025);
  transform: rotate(30deg);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.stat-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  padding: 21px;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: white;
  box-shadow: 0 7px 25px rgba(24, 52, 47, 0.035);
}
.stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 17px;
}
.stat-icon.mint {
  color: #087f70;
  background: #e4f5f0;
}
.stat-icon.peach {
  color: #c75b43;
  background: #ffebe6;
}
.stat-icon.sand {
  color: #9a7421;
  background: #fff5d9;
}
.stat-icon.blue {
  color: #307a94;
  background: #e6f4f8;
}
.stat-card div {
  display: flex;
  flex-direction: column;
}
.stat-card strong {
  font:
    600 27px/1 Georgia,
    serif;
}
.stat-card div span {
  margin-top: 5px;
  color: var(--admin-ink);
  font-size: 11px;
  font-weight: 700;
}
.stat-card > small {
  grid-column: 1/-1;
  color: var(--admin-muted);
  font-size: 9px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: 18px;
}
.panel {
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: white;
  box-shadow: 0 7px 25px rgba(24, 52, 47, 0.035);
  overflow: hidden;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
}
.panel-heading h2 {
  margin: 0;
  font:
    600 20px/1.2 Georgia,
    serif;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.admin-table th {
  padding: 12px 18px;
  color: var(--admin-muted);
  background: #f8faf9;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}
.admin-table td {
  padding: 16px 18px;
  border-top: 1px solid #edf1ef;
  vertical-align: middle;
}
.admin-table td > strong,
.admin-table td > small {
  display: block;
}
.admin-table td > strong {
  margin-bottom: 4px;
  color: var(--admin-ink);
  font-size: 11px;
}
.admin-table td > small {
  color: var(--admin-muted);
  font-size: 9px;
}
.table-wrap {
  overflow-x: auto;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-pill.success {
  color: #08725f;
  background: #e5f6f1;
}
.status-pill.warning {
  color: #956718;
  background: #fff3d1;
}
.status-pill.neutral {
  color: #657470;
  background: #edf1ef;
}
.empty-cell {
  padding: 32px !important;
  color: var(--admin-muted);
  text-align: center;
}
.order-list {
  padding: 0 22px;
}
.order-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid #edf1ef;
}
.order-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font-size: 11px;
  font-weight: 800;
}
.order-row > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.order-row strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-row small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 8px;
}
.order-row b {
  font-size: 10px;
}
.panel-total {
  display: flex;
  justify-content: space-between;
  margin: 8px 22px 20px;
  padding: 14px;
  border-radius: 10px;
  color: #52716a;
  background: #edf7f4;
  font-size: 10px;
}
.panel-total strong {
  color: var(--admin-teal);
}

/* Category manager */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.page-summary {
  max-width: 670px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.6;
}
.panel-toolbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--admin-line);
}
.admin-search {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #f9fbfa;
}
.admin-search span {
  color: var(--admin-teal);
  font-size: 18px;
  transform: rotate(-15deg);
}
.admin-search input {
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  color: var(--admin-ink);
  background: transparent;
  font-size: 11px;
}
.result-count {
  margin-left: auto;
  color: var(--admin-muted);
  font-size: 9px;
}
.category-table th:last-child {
  width: 120px;
}
.category-name {
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.category-name img,
.category-letter {
  width: 39px;
  height: 39px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
}
.category-letter {
  display: grid;
  place-items: center;
  color: var(--admin-teal);
  background: #e5f5f1;
  font:
    600 15px Georgia,
    serif;
}
.category-name > span:last-child {
  display: flex;
  flex-direction: column;
}
.category-name strong {
  font-size: 11px;
}
.category-name small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 8px;
}
.category-table code {
  color: #53716a;
  font-size: 9px;
}
.row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.row-actions a,
.row-actions button {
  border: 0;
  color: var(--admin-teal);
  background: transparent;
  font-size: 9px;
  font-weight: 750;
}
.row-actions button {
  padding: 0;
  color: var(--admin-coral);
}

.back-row {
  margin-bottom: 17px;
  color: var(--admin-teal);
  font-size: 10px;
  font-weight: 750;
}
.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 18px;
}
.editor-main {
  padding-bottom: 25px;
}
.editor-main > .alert {
  margin-left: 24px;
  margin-right: 24px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 10px 24px 0;
}
.field {
  display: flex;
  flex-direction: column;
}
.field-full {
  grid-column: 1/-1;
}
.field label b {
  color: var(--admin-coral);
}
.field small {
  margin-top: 7px;
  color: var(--admin-muted);
  font-size: 8px;
  line-height: 1.5;
}
.upload-box {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border: 1px dashed #b9cdc7;
  border-radius: 12px;
  color: var(--admin-muted) !important;
  background: #f8fbfa;
  cursor: pointer;
}
.upload-box:hover {
  border-color: var(--admin-teal);
  background: #f0f8f5;
}
.upload-box > span {
  margin-bottom: 7px;
  color: var(--admin-teal);
  font-size: 20px;
}
.upload-box strong {
  color: var(--admin-ink);
  font-size: 10px;
}
.upload-box small {
  margin-top: 4px;
  font-weight: 400;
}
.file-input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.editor-side {
  display: grid;
  gap: 14px;
}
.publish-card {
  padding: 22px;
}
.publish-card h3 {
  margin: 0;
  font:
    600 20px Georgia,
    serif;
}
.publish-card p:not(.overline) {
  margin: 10px 0 20px;
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.6;
}
.publish-card > a {
  display: block;
  margin-top: 13px;
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.tip-card {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 11px;
  padding: 17px;
  border-radius: 14px;
  color: #705f2d;
  background: #fff7dd;
}
.tip-card > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: white;
}
.tip-card strong {
  font-size: 10px;
}
.tip-card p {
  margin: 5px 0 0;
  color: #907d45;
  font-size: 8px;
  line-height: 1.55;
}

/* Amenities */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--admin-line);
}
.amenity-card {
  min-height: 150px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-content: center;
  align-items: center;
  gap: 9px 12px;
  padding: 22px;
  background: white;
}
.amenity-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font:
    600 16px Georgia,
    serif;
}
.amenity-card > div:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.amenity-card strong {
  font-size: 11px;
}
.amenity-card code {
  overflow: hidden;
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-count {
  grid-column: 1 / 2;
  color: var(--admin-muted);
  font-size: 8px;
  text-align: center;
}
.amenity-card .row-actions {
  grid-column: 2 / 3;
}

/* Listings */
.listing-filters {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--admin-line);
}
.listing-filters .admin-search {
  flex: 1;
}
.listing-filters select {
  min-height: 40px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  outline: 0;
  color: var(--admin-ink);
  background: white;
  font-size: 10px;
}
.listing-filters > button {
  min-height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: var(--admin-teal);
  font-size: 10px;
  font-weight: 750;
}
.listing-filters > a {
  color: var(--admin-coral);
  font-size: 9px;
  font-weight: 700;
}
.listings-table {
  min-width: 930px;
}
.listing-name {
  min-width: 230px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.listing-name > img,
.listing-name > span {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  object-fit: cover;
}
.listing-name > span {
  display: grid;
  place-items: center;
  color: var(--admin-teal);
  background: #e5f5f1;
  font:
    600 15px Georgia,
    serif;
}
.listing-name > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.listing-name strong {
  max-width: 210px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing-name small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 8px;
}
.tag-list {
  max-width: 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-list span,
.tag-list small {
  padding: 4px 6px;
  border-radius: 6px;
  color: #55716b;
  background: #edf3f1;
  font-size: 7px;
}
.status-button {
  border: 0;
  cursor: pointer;
}
.feature-button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  color: #87938f;
  background: #f0f3f2;
  font-size: 17px;
}
.feature-button.on {
  color: #a27313;
  background: #fff2c9;
}
.table-note {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--admin-line);
  color: var(--admin-muted);
  background: #fafcfb;
  font-size: 8px;
  text-align: center;
}

.listing-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 18px;
}
.listing-editor-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}
.listing-editor-side {
  display: grid;
  gap: 14px;
}
.sticky-card {
  position: sticky;
  top: 18px;
}
.form-section {
  padding-bottom: 25px;
}
.form-pad {
  padding: 6px 24px 2px;
}
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9e3df;
  border-radius: 11px;
  outline: 0;
  resize: vertical;
  color: var(--admin-ink);
  background: white;
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
}
.field textarea:focus {
  border-color: var(--admin-teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 112, 0.09);
}
.group-label {
  display: block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 750;
}
.group-label b {
  color: var(--admin-coral);
}
.amenities-label {
  margin-top: 22px;
}
.choice-grid {
  max-height: 270px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 2px;
  overflow-y: auto;
}
.choice-grid label {
  min-height: 47px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  color: var(--admin-muted);
  background: #fafcfb;
  cursor: pointer;
  font-size: 9px;
}
.choice-grid label:hover {
  border-color: #acd2c8;
}
.choice-grid input {
  position: absolute;
  opacity: 0;
}
.choice-grid label:has(input:checked) {
  color: var(--admin-teal-dark);
  border-color: #8ccabc;
  background: #e9f7f3;
  box-shadow: inset 0 0 0 1px #8ccabc;
}
.category-choices label > span {
  display: flex;
  flex-direction: column;
}
.category-choices strong {
  font-size: 9px;
}
.category-choices small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 7px;
}
.amenity-choices {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 220px;
}
.amenity-choices label {
  min-height: 38px;
  justify-content: center;
  text-align: center;
}
.check-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  background: #fafcfb;
  cursor: pointer;
}
.check-line input {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--admin-teal);
}
.check-line > span {
  display: flex;
  flex-direction: column;
}
.check-line strong {
  font-size: 10px;
}
.check-line small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 8px;
}
.upload-box.compact {
  min-height: 95px;
}

/* Type-specific inventory */
.inventory-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}
.inventory-context > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.inventory-context a:not(.admin-button):not(.secondary-button) {
  color: var(--admin-teal);
  font-size: 10px;
  font-weight: 700;
}
.inventory-context span {
  color: #a4afac;
  font-size: 10px;
}
.inventory-context strong {
  font-size: 11px;
}
.inventory-context p {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--admin-muted);
  font-size: 10px;
}
.inventory-context > div:last-child {
  display: flex;
  gap: 9px;
}
.secondary-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 17px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  color: var(--admin-ink);
  background: white;
  font-size: 10px;
  font-weight: 750;
}
.secondary-button:hover {
  border-color: #b8d4cd;
}
.inventory-panel {
  min-height: 300px;
}
.inventory-heading {
  border-bottom: 1px solid var(--admin-line);
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.inventory-card {
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 15px;
  background: white;
}
.inventory-photo {
  height: 155px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #dff2ed, #b9ddd4);
}
.inventory-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inventory-photo span {
  color: var(--admin-teal);
  font:
    600 40px Georgia,
    serif;
  opacity: 0.7;
}
.inventory-body {
  padding: 17px;
}
.inventory-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.inventory-title p {
  margin: 0 0 4px;
  color: var(--admin-coral);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.inventory-title h3 {
  margin: 0;
  font:
    600 17px/1.15 Georgia,
    serif;
}
.inventory-title > strong {
  flex: none;
  color: var(--admin-teal);
  font-size: 11px;
}
.inventory-copy {
  min-height: 34px;
  margin: 13px 0;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.55;
}
.discount-note {
  display: inline-flex;
  padding: 5px 7px;
  border-radius: 6px;
  color: #98701d;
  background: #fff3ce;
  font-size: 8px;
  font-weight: 750;
}
.inventory-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--admin-line);
}
.inventory-actions a,
.inventory-actions button {
  padding: 0;
  border: 0;
  color: var(--admin-teal);
  background: transparent;
  font-size: 8px;
  font-weight: 750;
}
.inventory-actions button {
  color: var(--admin-coral);
}
.inventory-empty {
  grid-column: 1 / -1;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
  text-align: center;
}
.inventory-empty > span {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 19px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font-size: 27px;
}
.inventory-empty h3 {
  margin: 0;
  font:
    600 22px Georgia,
    serif;
}
.inventory-empty p {
  max-width: 400px;
  margin: 9px 0 20px;
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.6;
}
.inventory-form-context {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 17px;
  padding: 12px 15px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: white;
}
.inventory-form-context > span {
  padding: 6px 9px;
  border-radius: 7px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inventory-form-context > div {
  display: flex;
  flex-direction: column;
}
.inventory-form-context strong {
  font-size: 10px;
}
.inventory-form-context small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 8px;
}
.inventory-shortcut {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1px solid #aed4cb;
  border-radius: 14px;
  color: var(--admin-teal-dark);
  background: #eaf7f4;
}
.inventory-shortcut > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: var(--admin-teal);
}
.inventory-shortcut > div {
  display: flex;
  flex-direction: column;
}
.inventory-shortcut strong {
  font-size: 10px;
}
.inventory-shortcut small {
  margin-top: 4px;
  color: #5d8078;
  font-size: 8px;
}

/* Booking operations */
.booking-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.booking-stats a {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 6px 20px rgba(24, 52, 47, 0.03);
}
.booking-stats a:hover,
.booking-stats a.active {
  border-color: #96c9bd;
  box-shadow: inset 0 0 0 1px #96c9bd;
}
.booking-stats a.pending.active {
  border-color: #e8ca73;
  box-shadow: inset 0 0 0 1px #e8ca73;
}
.booking-stats a.approved.active {
  border-color: #7bc9b7;
  box-shadow: inset 0 0 0 1px #7bc9b7;
}
.booking-stats a.expired.active {
  border-color: #cbd3d0;
  box-shadow: inset 0 0 0 1px #cbd3d0;
}
.booking-stats span {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.booking-stats strong {
  font:
    600 25px Georgia,
    serif;
}
.booking-filters .admin-search {
  min-width: 250px;
}
.bookings-table {
  min-width: 1080px;
}
.booking-reference {
  display: block;
  margin-bottom: 5px;
  color: var(--admin-teal);
  font-size: 10px;
  font-weight: 800;
}
.payment-method {
  display: block;
  margin-bottom: 5px;
  color: var(--admin-ink);
  font-size: 10px;
  font-weight: 750;
}
.bookings-table td > strong {
  font-size: 10px;
}
.booking-state-action {
  color: var(--admin-teal) !important;
}

.booking-hero {
  min-height: 175px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 18px;
  padding: 34px 40px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(125deg, #087f70, #07544d);
}
.booking-hero::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -95px;
  top: -110px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 47% 53% 61% 39%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.025);
  transform: rotate(25deg);
}
.booking-hero > * {
  position: relative;
  z-index: 1;
}
.booking-hero h2 {
  margin: 0;
  font:
    600 31px/1.1 Georgia,
    serif;
}
.booking-hero p:last-child {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
}
.booking-hero-status {
  min-width: 92px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.booking-hero-status.approved {
  color: #d2fff2;
}
.booking-hero-status.pending {
  color: #ffeab1;
}
.booking-hero-status.expired {
  color: #d8e0dd;
}
.booking-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 18px;
}
.booking-detail-main,
.booking-detail-side {
  display: grid;
  gap: 18px;
}
.detail-panel {
  padding-bottom: 10px;
}
.detail-list,
.payload-list {
  margin: 0;
  padding: 0 24px 18px;
}
.detail-list > div,
.payload-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--admin-line);
}
.detail-list dt,
.payload-list dt {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 700;
}
.detail-list dd,
.payload-list dd {
  margin: 0;
  color: var(--admin-ink);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.contact-card {
  padding: 24px;
  text-align: center;
}
.contact-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 12px auto;
  border-radius: 18px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font:
    600 22px Georgia,
    serif;
}
.contact-card h3 {
  margin: 0 0 11px;
  font:
    600 18px Georgia,
    serif;
}
.contact-card > a,
.contact-card > span:last-child {
  display: block;
  margin-top: 7px;
  color: var(--admin-muted);
  font-size: 9px;
  overflow-wrap: anywhere;
}
.contact-card > a {
  color: var(--admin-teal);
}
.booking-actions-card {
  padding: 22px;
}
.booking-actions-card > p:not(.overline):not(.retention-note) {
  margin: 9px 0 0;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.55;
}
.danger-zone {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--admin-line);
}
.danger-zone button {
  width: 100%;
  min-height: 37px;
  border: 1px solid #ecc5bc;
  border-radius: 9px;
  color: #b64d39;
  background: #fff4f1;
  font-size: 9px;
  font-weight: 750;
}
.retention-note {
  margin: 16px 0 0;
  padding: 10px;
  border-radius: 8px;
  color: #76642f;
  background: #fff6d9;
  font-size: 8px;
  line-height: 1.5;
}

/* User management */
.users-table {
  min-width: 980px;
}
.user-name {
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.user-name > span {
  width: 41px;
  height: 41px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font:
    600 15px Georgia,
    serif;
}
.user-name > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.user-name a {
  max-width: 210px;
  overflow: hidden;
  color: var(--admin-ink);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-name small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 8px;
}
.account-pill {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.account-pill.customer {
  color: #30758b;
  background: #e5f2f7;
}
.account-pill.owner {
  color: #7d5b15;
  background: #fff1c9;
}
.user-form-section {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--admin-line);
}
.user-hero {
  min-height: 175px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 34px 40px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(125deg, #087f70, #07544d);
}
.user-hero::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -95px;
  top: -110px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 47% 53% 61% 39%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.025);
  transform: rotate(25deg);
}
.user-hero > * {
  position: relative;
  z-index: 1;
}
.user-hero-avatar {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--admin-ink);
  background: var(--admin-sun);
  font:
    600 26px Georgia,
    serif;
}
.user-hero-copy h2 {
  margin: 0;
  font:
    600 31px/1.1 Georgia,
    serif;
}
.user-hero-copy p:last-child {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
}
.user-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-verification {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #ffe7a5;
  background: rgba(255, 255, 255, 0.1);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}
.user-verification.verified {
  color: #caffee;
}
.user-detail-stats {
  margin-top: 0;
}
.user-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 18px;
}
.user-detail-main,
.user-detail-side {
  display: grid;
  gap: 18px;
}
.user-activity-table {
  min-width: 610px;
}
.user-contact-card {
  padding-top: 22px;
}
.user-contact-card .overline {
  text-align: left;
}
.user-about {
  margin: 17px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--admin-line);
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.6;
  text-align: left;
}
.verification-form {
  margin-top: 17px;
}
.verification-form button {
  width: 100%;
  justify-content: center;
}

/* Unified chat inbox */
.chat-list {
  display: grid;
}
.chat-list-row {
  min-height: 104px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
  border-top: 1px solid var(--admin-line);
}
.chat-list-row:first-child {
  border-top: 0;
}
.chat-list-row:hover {
  background: #f8fbfa;
}
.chat-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--admin-teal);
  background: #e4f4f0;
  font:
    600 18px Georgia,
    serif;
}
.chat-list-main {
  min-width: 0;
}
.chat-list-main > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-list-main b {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-list-main em {
  padding: 4px 6px;
  border-radius: 6px;
  color: #50746c;
  background: #edf4f2;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}
.chat-list-main small {
  display: block;
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 8px;
}
.chat-list-main p {
  overflow: hidden;
  margin: 8px 0 0;
  color: #667b76;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-list-meta {
  min-width: 95px;
  display: grid;
  justify-items: end;
  gap: 7px;
}
.chat-list-meta time {
  color: var(--admin-muted);
  font-size: 8px;
}
.chat-list-meta > b {
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--admin-coral);
  font-size: 8px;
}
.chat-empty {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
  text-align: center;
}
.chat-empty > span {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 19px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font-size: 27px;
}
.chat-empty h3 {
  margin: 0;
  font:
    600 22px Georgia,
    serif;
}
.chat-empty p {
  margin: 9px 0 0;
  color: var(--admin-muted);
  font-size: 10px;
}
.chat-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 18px;
}
.chat-thread-panel {
  overflow: hidden;
}
.chat-thread-head {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 25px;
  border-bottom: 1px solid var(--admin-line);
}
.chat-thread-head h2 {
  margin: 0;
  font:
    600 21px Georgia,
    serif;
}
.chat-thread-head small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted);
  font-size: 8px;
}
.chat-thread {
  min-height: 440px;
  max-height: 620px;
  padding: 25px;
  overflow-y: auto;
  background: #f8faf9;
}
.chat-message {
  max-width: 78%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: end;
  gap: 9px;
  margin: 0 0 18px;
}
.chat-message.mine {
  margin-left: auto;
  grid-template-columns: minmax(0, 1fr) 34px;
}
.chat-message-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--admin-teal);
  background: #dfeeea;
  font:
    600 12px Georgia,
    serif;
}
.chat-message.mine .chat-message-avatar {
  grid-column: 2;
  color: #88661b;
  background: #fff0c5;
}
.chat-message > div {
  min-width: 0;
}
.chat-message.mine > div {
  grid-row: 1;
  grid-column: 1;
}
.chat-message header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px 3px;
}
.chat-message.mine header {
  justify-content: flex-end;
}
.chat-message header strong {
  font-size: 8px;
}
.chat-message header span {
  color: var(--admin-muted);
  font-size: 7px;
}
.chat-message p {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--admin-line);
  border-radius: 5px 14px 14px;
  color: #3c5550;
  background: white;
  font-size: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.chat-message.mine p {
  color: white;
  border: 0;
  border-radius: 14px 5px 14px 14px;
  background: var(--admin-teal);
}
.chat-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 30px;
  color: var(--admin-muted);
  font-size: 8px;
}
.chat-day::before,
.chat-day::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--admin-line);
}
.chat-composer {
  padding: 18px 22px;
  border-top: 1px solid var(--admin-line);
}
.chat-composer textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9e3df;
  border-radius: 12px;
  outline: 0;
  resize: vertical;
  color: var(--admin-ink);
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
}
.chat-composer textarea:focus {
  border-color: var(--admin-teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 112, 0.09);
}
.chat-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
}
.chat-composer > div > span {
  color: var(--admin-muted);
  font-size: 8px;
}
.chat-closed-note {
  padding: 20px;
  color: #7a6834;
  background: #fff7dc;
  font-size: 9px;
  text-align: center;
}
.chat-info-side {
  display: grid;
  gap: 18px;
}
.chat-people-card {
  padding: 22px;
}
.chat-people-card h3 {
  margin: 0 0 16px;
  font:
    600 18px Georgia,
    serif;
}
.chat-people-card > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--admin-line);
}
.chat-people-card > div > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--admin-teal);
  background: #e5f5f1;
  font-size: 10px;
  font-weight: 800;
}
.chat-people-card div p {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.chat-people-card strong {
  font-size: 9px;
}
.chat-people-card small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-status-form {
  display: grid;
  gap: 9px;
  margin-top: 17px;
}
.chat-status-form select {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  color: var(--admin-ink);
  background: white;
  font-size: 9px;
}
.chat-status-form button {
  width: 100%;
  justify-content: center;
}
.chat-upload-composer {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 15px 22px 19px;
  border-top: 1px dashed var(--admin-line);
}
.chat-upload-composer > label {
  min-height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px dashed #a8c7c0;
  border-radius: 10px;
  color: var(--admin-teal);
  background: #f4faf8;
  cursor: pointer;
  font-size: 9px;
}
.chat-upload-composer > label > span {
  font-size: 16px;
}
.chat-upload-composer > label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.chat-upload-composer > input {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  color: var(--admin-ink);
  font-size: 9px;
}
.chat-upload-composer button {
  min-height: 42px;
}
.chat-attachment {
  margin-top: 7px;
  overflow: hidden;
  border-radius: 12px;
}
.chat-attachment.image img {
  display: block;
  width: min(100%, 420px);
  max-height: 330px;
  border-radius: 12px;
  object-fit: cover;
}
.chat-attachment audio {
  width: min(100%, 380px);
  height: 42px;
}
.chat-attachment video {
  display: block;
  width: min(100%, 480px);
  max-height: 360px;
  border-radius: 12px;
  background: #14211f;
}
.chat-attachment-meta {
  display: block;
  margin: 6px 4px 0;
  color: var(--admin-muted);
  font-size: 7px;
}
.chat-message.mine .chat-attachment-meta {
  color: var(--admin-muted);
  text-align: right;
}
.chat-document {
  min-width: 250px;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  color: var(--admin-ink);
  background: white;
}
.chat-document > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--admin-teal);
  background: #e7f5f1;
  font-size: 16px;
}
.chat-document > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-document strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-document small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 7px;
}
.customer-login-story {
  background: linear-gradient(155deg, #247d71 0%, #174e48 65%, #123a35 100%);
}
.account-sidebar {
  background: #17463f;
}
.account-sidebar .admin-nav > a.active {
  background: #168575;
}

/* Admin orders */
.admin-orders-table {
  min-width: 1120px;
}
.order-state.confirmed {
  color: #2e7188;
  background: #e5f3f7;
}
.order-state.preparing {
  color: #805c16;
  background: #fff0c8;
}
.order-state.ready {
  color: #6f4c91;
  background: #f0e7f7;
}
.order-state.completed {
  color: #08725f;
  background: #e5f6f1;
}
.order-state.cancelled {
  color: #a94e3b;
  background: #ffebe6;
}
.order-status-form {
  display: grid;
  gap: 13px;
  margin-top: 17px;
}
.order-status-form label {
  display: grid;
  gap: 6px;
  color: var(--admin-muted);
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.order-status-form select,
.order-status-form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  color: var(--admin-ink);
  background: white;
  font: inherit;
  font-size: 9px;
  text-transform: none;
  letter-spacing: normal;
}
.order-status-form select {
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.order-status-form textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Settings */
.settings-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: white;
}
.settings-tabs a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 9px;
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 750;
}
.settings-tabs a:hover {
  color: var(--admin-teal);
  background: #f1f8f6;
}
.settings-tabs a.active {
  color: white;
  background: var(--admin-teal);
}
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 18px;
}
.settings-main {
  display: grid;
  gap: 18px;
}
.settings-side {
  display: grid;
  gap: 14px;
}
.integration-card {
  padding: 22px;
}
.integration-card h3 {
  margin: 0 0 15px;
  font:
    600 19px Georgia,
    serif;
}
.integration-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--admin-line);
  font-size: 9px;
}
.integration-card > p:last-child {
  margin: 15px 0 0;
  color: var(--admin-muted);
  font-size: 8px;
  line-height: 1.55;
}

/* Mobile push notifications */
.notifications-table {
  min-width: 1050px;
}
.platform-pill {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  color: #496762;
  background: #edf3f1;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}
.platform-pill.android {
  color: #08725f;
  background: #e4f5ef;
}
.platform-pill.ios {
  color: #306f8a;
  background: #e6f2f7;
}
.notification-status.sent {
  color: #08725f;
  background: #e5f6f1;
}
.notification-status.partial {
  color: #956718;
  background: #fff3d1;
}
.notification-status.failed {
  color: #a94e3b;
  background: #ffebe6;
}
.notification-status.dry_run {
  color: #6f4c91;
  background: #f0e7f7;
}
.notification-status.no_targets {
  color: #657470;
  background: #edf1ef;
}
.notification-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 18px;
}
.notification-editor-main,
.notification-editor-side {
  display: grid;
  gap: 18px;
}
.notification-audiences {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 4px 24px 20px;
}
.notification-audiences label {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fafcfb;
  cursor: pointer;
}
.notification-audiences input {
  position: absolute;
  opacity: 0;
}
.notification-audiences label:has(input:checked) {
  border-color: #83c5b7;
  background: #eaf7f4;
  box-shadow: inset 0 0 0 1px #83c5b7;
}
.notification-audiences span {
  display: flex;
  flex-direction: column;
}
.notification-audiences strong {
  font-size: 10px;
}
.notification-audiences small {
  margin-top: 6px;
  color: var(--admin-muted);
  font-size: 8px;
}
.notification-preview {
  padding: 22px;
}
.phone-preview {
  display: grid;
  grid-template-columns: 37px 1fr;
  gap: 10px;
  margin-top: 13px;
  padding: 14px;
  border: 1px solid #dce4e1;
  border-radius: 15px;
  background: linear-gradient(145deg, #f5f8f7, #e9efed);
  box-shadow: 0 12px 25px rgba(24, 52, 47, 0.08);
}
.preview-app {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: var(--admin-teal);
  font-size: 9px;
  font-weight: 800;
}
.phone-preview > div {
  min-width: 0;
}
.phone-preview strong {
  display: block;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-preview p {
  margin: 5px 0;
  color: #536b66;
  font-size: 8px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.phone-preview small {
  color: #8a9995;
  font-size: 7px;
}
.notification-send {
  margin-top: 15px;
}
.notification-hero {
  min-height: 175px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 18px;
  padding: 34px 40px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(125deg, #087f70, #07544d);
}
.notification-hero h2 {
  margin: 0;
  font:
    600 31px/1.1 Georgia,
    serif;
}
.notification-hero p:last-child {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  line-height: 1.6;
}
.notification-hero-status {
  flex: none;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.notification-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 18px;
}
.notification-detail-main,
.notification-detail-side {
  display: grid;
  gap: 18px;
}
.delivery-table {
  min-width: 850px;
}
.notification-image-card {
  padding: 22px;
}
.notification-image-card img {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-radius: 12px;
}

/* Owner portal */
.owner-sidebar {
  background: #173e4a;
}
.owner-sidebar .admin-nav > a.active {
  background: #237d8d;
}
.owner-login-story {
  background: linear-gradient(155deg, #196779 0%, #17424e 65%, #12323b 100%);
}
.owner-welcome {
  background: linear-gradient(125deg, #1b7888, #174651);
}
.panel-link {
  color: var(--admin-teal);
  font-size: 8px;
  font-weight: 750;
}
.owner-listing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.owner-listing-card {
  padding: 23px;
  border: 1px solid var(--admin-line);
  border-radius: 17px;
  background: white;
  box-shadow: 0 7px 25px rgba(24, 52, 47, 0.04);
}
.owner-listing-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
}
.owner-listing-head > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #247688;
  background: #e4f3f6;
  font:
    600 18px Georgia,
    serif;
}
.owner-listing-head p {
  margin: 0 0 4px;
  color: #247688;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.owner-listing-head h2 {
  margin: 0;
  font:
    600 18px/1.1 Georgia,
    serif;
}
.owner-listing-head em {
  font-style: normal;
}
.owner-listing-card > p {
  min-height: 42px;
  margin: 17px 0;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.55;
}
.owner-listing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--admin-line);
}
.owner-listing-footer > span {
  max-width: 65%;
  color: var(--admin-muted);
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-listing-footer .admin-button {
  min-height: 36px;
  padding: 0 13px;
  font-size: 9px;
}
.sales-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  color: #176958;
  background: #e5f5f1;
}
.sales-chip span {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}
.sales-chip strong {
  font:
    600 17px Georgia,
    serif;
}
.orders-table {
  min-width: 880px;
}
.owner-order-items-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.owner-order-items-cell .orders-item-thumb,
.owner-order-items-cell .orders-item-more {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.owner-order-items-cell .orders-item-more,
.owner-order-items-cell .orders-item-thumb + .orders-item-thumb {
  margin-left: -14px;
}
.order-detail-lines {
  padding: 0 24px;
}
.order-detail-lines > div {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 15px 0;
  border-top: 1px solid var(--admin-line);
}
.owner-order-line-photo,
.owner-order-line-photo img,
.owner-order-line-photo > span {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.owner-order-line-photo {
  overflow: hidden;
  background: #fff0e3;
  box-shadow: 0 9px 20px rgba(45, 25, 8, 0.1);
}
.owner-order-line-photo img {
  display: block;
  object-fit: cover;
}
.owner-order-line-photo > span {
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 75% 20%, rgba(145, 242, 12, 0.55), transparent 24%),
    linear-gradient(135deg, var(--tour-orange, #ff5a00), var(--tour-blue, #0b8fa8));
  font:
    700 14px Georgia,
    serif;
}
.order-detail-lines > div > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.order-detail-lines strong {
  font-size: 10px;
}
.order-detail-lines small {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 8px;
}
.order-detail-lines b {
  font-size: 10px;
}
.order-grand-total {
  display: flex;
  justify-content: space-between;
  margin: 15px 24px 22px;
  padding: 15px;
  border-radius: 10px;
  color: #386b61;
  background: #e8f5f2;
  font-size: 10px;
}
.order-grand-total strong {
  font:
    600 17px Georgia,
    serif;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .amenity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .amenity-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .booking-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .booking-detail-grid {
    grid-template-columns: 1fr;
  }
  .user-detail-grid {
    grid-template-columns: 1fr;
  }
  .chat-workspace {
    grid-template-columns: 1fr;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .notification-editor,
  .notification-detail-grid {
    grid-template-columns: 1fr;
  }
  .notification-audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .owner-listing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-story {
    min-height: 340px;
    padding: 34px;
  }
  .login-story > div {
    margin-top: 60px;
  }
  .login-story h1 {
    font-size: 46px;
  }
  .login-story::after {
    width: 90px;
    height: 90px;
    top: 20%;
  }
  .login-panel {
    padding: 55px 24px;
  }
  .admin-shell {
    display: block;
  }
  .admin-sidebar {
    width: 248px;
    position: fixed;
    z-index: 20;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 14px 0 35px rgba(0, 0, 0, 0.16);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .menu-toggle {
    display: grid;
    place-items: center;
  }
  .editor-grid {
    grid-template-columns: 1fr;
  }
  .listing-editor {
    grid-template-columns: 1fr;
  }
  .sticky-card {
    position: static;
  }
  .listing-filters {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .listing-filters .admin-search {
    flex-basis: 100%;
  }
  .inventory-context {
    align-items: stretch;
    flex-direction: column;
  }
  .inventory-context > div:last-child {
    justify-content: flex-start;
  }
  .user-hero {
    grid-template-columns: 58px 1fr;
    padding: 28px;
  }
  .user-hero-avatar {
    width: 58px;
    height: 58px;
  }
  .user-hero-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .admin-topbar {
    min-height: 78px;
    padding: 15px 18px;
  }
  .admin-topbar h1 {
    font-size: 21px;
  }
  .view-site {
    display: none;
  }
  .admin-content {
    padding: 22px 16px 45px;
  }
  .welcome-card {
    display: block;
    padding: 30px 25px;
  }
  .welcome-card h2 {
    font-size: 28px;
  }
  .welcome-card .admin-button {
    margin-top: 22px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .page-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .page-actions .admin-button {
    width: 100%;
  }
  .form-grid {
    grid-template-columns: 1fr;
    padding: 8px 17px 0;
  }
  .field-full {
    grid-column: auto;
  }
  .amenity-grid {
    grid-template-columns: 1fr;
  }
  .choice-grid,
  .amenity-choices {
    grid-template-columns: 1fr;
  }
  .listing-filters select {
    flex: 1;
  }
  .inventory-grid {
    grid-template-columns: 1fr;
    padding: 13px;
  }
  .inventory-context > div:last-child {
    flex-direction: column;
  }
  .inventory-context .admin-button,
  .inventory-context .secondary-button {
    width: 100%;
    justify-content: center;
  }
  .booking-stats {
    grid-template-columns: 1fr 1fr;
  }
  .booking-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 24px;
  }
  .booking-hero h2 {
    font-size: 26px;
  }
  .detail-list > div,
  .payload-list > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .panel-heading {
    padding-left: 17px;
    padding-right: 17px;
  }
  .user-hero {
    grid-template-columns: 1fr;
  }
  .user-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .user-verification {
    text-align: center;
  }
  .chat-list-row {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 15px;
  }
  .chat-avatar {
    width: 42px;
    height: 42px;
  }
  .chat-list-meta {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-items: start;
  }
  .chat-thread {
    padding: 17px;
  }
  .chat-message {
    max-width: 94%;
  }
  .chat-composer > div {
    align-items: stretch;
    flex-direction: column;
  }
  .chat-upload-composer {
    grid-template-columns: 1fr;
    padding: 14px 17px;
  }
  .settings-tabs {
    overflow-x: auto;
  }
  .settings-tabs a {
    flex: 1;
    min-width: 90px;
  }
  .notification-audiences {
    grid-template-columns: 1fr;
    padding: 4px 17px 18px;
  }
  .notification-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 24px;
  }
}

.listing-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 5px;
}
.listing-gallery-item {
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
}
.listing-gallery-item img {
  display: block;
  width: 100%;
  height: 105px;
  object-fit: cover;
  background: #eef1f5;
}
.listing-gallery-item .gallery-file-missing {
  display: grid;
  place-items: center;
  min-height: 105px;
  padding: 12px;
  background: #f5f2ee;
  color: #8a6a53;
  text-align: center;
}
.upload-selection-preview {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.upload-selection-preview.multiple {
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
}
.upload-preview-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e6ed;
  border-radius: 12px;
  background: #fff;
}
.upload-preview-item img,
.upload-preview-item video {
  display: block;
  width: 100%;
  height: 115px;
  object-fit: cover;
  background: #eef1f5;
}
.upload-preview-item audio {
  display: block;
  width: calc(100% - 16px);
  margin: 15px 8px 5px;
}
.upload-preview-item small {
  display: block;
  overflow: hidden;
  padding: 8px 10px;
  color: #667085;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-preview-document {
  display: grid;
  place-items: center;
  min-height: 85px;
  background: #f2f5f8;
  color: #526077;
  font-weight: 800;
}
.upload-selection-preview.single {
  grid-template-columns: minmax(0, 220px);
}
.upload-selection-preview.favicon {
  grid-template-columns: 72px;
}
.upload-selection-preview.single > img,
.upload-selection-preview.favicon > img {
  display: block;
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  border: 1px solid #e2e6ed;
  border-radius: 11px;
  padding: 8px;
  background: #fff;
}
.admin-brand-mark.has-image {
  overflow: hidden;
  padding: 4px;
  background: #fff;
}
.admin-brand-mark.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stories-hero,
.story-form-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
  padding: 28px 30px;
  border: 1px solid rgba(11, 143, 168, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(230, 246, 249, 0.95), rgba(255, 250, 244, 0.94)),
    #ffffff;
  box-shadow: 0 16px 40px rgba(24, 52, 47, 0.06);
}
.stories-hero h2,
.story-form-hero h2 {
  margin: 0;
  color: #182f2b;
  font:
    650 30px/1.1 Georgia,
    serif;
}
.stories-hero p:not(.overline),
.story-form-hero p:not(.overline) {
  max-width: 650px;
  margin: 9px 0 0;
  color: #61726f;
  font-size: 12px;
  line-height: 1.6;
}
.story-form-hero > a {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 12px;
  color: #087f70;
  background: #e4f5f0;
  font-size: 10px;
  font-weight: 800;
}
.story-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.story-stat-card {
  min-height: 112px;
}
.story-stat-card small {
  order: -1;
  margin-bottom: 6px;
  color: #6b7a77;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.story-manager {
  overflow: hidden;
}
.story-filters .admin-search {
  max-width: none;
}
.story-list {
  display: grid;
}
.story-row {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  border-top: 1px solid #edf1ef;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.story-row:hover {
  background: #fbfdfd;
  box-shadow: inset 3px 0 0 #0b8fa8;
}
.story-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 156px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  color: #0b8fa8;
  background:
    linear-gradient(135deg, rgba(11, 143, 168, 0.12), rgba(255, 90, 0, 0.1)),
    #f4f8f7;
  font:
    650 32px/1 Georgia,
    serif;
}
.story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
}
.story-row:hover .story-thumb img {
  transform: scale(1.035);
}
.story-main {
  min-width: 0;
}
.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.story-meta small {
  color: #7b8986;
  font-size: 10px;
  font-weight: 750;
}
.story-main h3 {
  margin: 9px 0 6px;
  color: #1e293b;
  font-size: 19px;
  line-height: 1.25;
}
.story-main h3 a {
  color: inherit;
}
.story-main h3 a:hover {
  color: #0b8fa8;
}
.story-main p {
  display: -webkit-box;
  margin: 0 0 10px;
  overflow: hidden;
  color: #667085;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.story-detail-line {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #8a94a5;
  font-size: 10px;
}
.story-detail-line span:not(:last-child)::after {
  content: "·";
  margin-left: 9px;
  color: #c3cac8;
}
.story-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.story-actions form {
  margin: 0;
}
.story-actions .icon-button.is-active {
  color: #9a7421;
  border-color: #f5d98d;
  background: #fff8e2;
}
.story-main .badge-featured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #8a5a00;
  background: #fff3d6;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}
.story-actions .live-link {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 10px;
  color: #667085;
  background: #f2f4f7;
}
.story-actions .live-link:hover {
  color: #0b8fa8;
  background: #e6f6f9;
}
.story-empty-state {
  padding: 52px 22px;
}
.story-section-hint {
  flex: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #087f70;
  background: #e4f5f0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Rich content editor for story articles */
.story-editor {
  display: grid;
  gap: 0;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(24, 52, 47, 0.05);
}
.story-editor.has-error {
  border-color: rgba(255, 90, 0, 0.72);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.11);
}
.story-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 9px;
  border-bottom: 1px solid #e1e9e8;
  background: #f7fbfb;
}
.story-editor-toolbar button {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #344054;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.story-editor-toolbar button:hover,
.story-editor-toolbar button[aria-pressed="true"] {
  color: #0b8fa8;
  background: #e6f6f9;
}
.story-editor-toolbar button:disabled {
  opacity: 0.48;
  cursor: wait;
}
.story-editor-toolbar .divider {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: #dfe7e5;
}
.story-editor-content {
  min-height: 360px;
  max-height: 680px;
  position: relative;
  padding: 22px 24px;
  overflow-y: auto;
  color: #1e293b;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.75;
}
.story-editor.is-empty .story-editor-content::before {
  content: attr(data-placeholder);
  color: #98a3b3;
  pointer-events: none;
}
.story-editor-content:focus {
  outline: 0;
  background: #fffefb;
}
.story-editor-content p {
  margin: 0 0 15px;
}
.story-editor-content h2 {
  margin: 24px 0 11px;
  color: #182f2b;
  font-size: 23px;
  line-height: 1.2;
}
.story-editor-content h3 {
  margin: 20px 0 9px;
  color: #1e293b;
  font-size: 18px;
  line-height: 1.25;
}
.story-editor-content ul,
.story-editor-content ol {
  margin: 0 0 15px;
  padding-left: 23px;
}
.story-editor-content li {
  margin-bottom: 6px;
}
.story-editor-content blockquote {
  margin: 0 0 16px;
  padding: 12px 17px;
  border-left: 4px solid #0b8fa8;
  border-radius: 0 12px 12px 0;
  color: #475467;
  background: #f4fbfb;
}
.story-editor-content img {
  display: block;
  max-width: 100%;
  margin: 12px 0;
  border-radius: 12px;
}
.story-editor-content a {
  color: #0b8fa8;
  font-weight: 750;
}
.story-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid #e1e9e8;
  background: #f8fafc;
  color: #778396;
  font-size: 11px;
}
.story-editor-upload-status {
  color: #0b8fa8;
  font-weight: 800;
}
.story-editor.is-uploading .story-editor-upload-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 980px) {
  .stories-hero,
  .story-form-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .story-row {
    grid-template-columns: 132px minmax(0, 1fr);
  }
  .story-thumb {
    width: 132px;
  }
  .story-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .story-stats {
    grid-template-columns: 1fr;
  }
  .story-filters {
    align-items: stretch;
    flex-direction: column;
  }
  .story-filters select,
  .story-filters > button {
    width: 100%;
  }
  .story-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .story-thumb {
    width: 100%;
    max-height: 220px;
  }
  .story-actions {
    grid-column: 1;
    flex-wrap: wrap;
  }
  .story-detail-line {
    display: grid;
    gap: 5px;
  }
  .story-detail-line span::after {
    display: none;
  }
  .story-editor-toolbar {
    gap: 4px;
  }
  .story-editor-content {
    min-height: 300px;
    padding: 18px;
  }
  .story-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.checkbox-field {
  display: flex;
  align-items: center;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #ff5a00;
}

/* Frontend CMS */
.cms-hero,
.cms-form-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
  padding: 30px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(232, 248, 250, 0.96), rgba(255, 248, 237, 0.96)),
    #ffffff;
  box-shadow: 0 18px 44px rgba(24, 52, 47, 0.06);
}
.cms-hero h2,
.cms-form-hero h2 {
  margin: 0;
  color: #182f2b;
  font:
    650 31px/1.1 Georgia,
    serif;
}
.cms-hero p:not(.overline),
.cms-form-hero p:not(.overline) {
  max-width: 720px;
  margin: 10px 0 0;
  color: #61726f;
  font-size: 12px;
  line-height: 1.65;
}
.cms-form-hero > a {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 12px;
  color: #087f70;
  background: #e4f5f0;
  font-size: 10px;
  font-weight: 800;
}
.cms-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cms-manager {
  overflow: hidden;
}
.cms-filters .admin-search {
  max-width: none;
}
.cms-page-list {
  display: grid;
}
.cms-page-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-top: 1px solid #edf1ef;
}
.cms-page-row:hover {
  background: #fbfdfd;
  box-shadow: inset 3px 0 0 #0b8fa8;
}
.cms-page-order {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #087f70;
  background: #e4f5f0;
  font-weight: 900;
}
.cms-page-main {
  min-width: 0;
}
.cms-page-meta,
.cms-page-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.cms-page-meta small,
.cms-page-detail {
  color: #7b8986;
  font-size: 10px;
  font-weight: 750;
}
.cms-page-main h3 {
  margin: 9px 0 6px;
  color: #1e293b;
  font-size: 19px;
}
.cms-page-main h3 a {
  color: inherit;
}
.cms-page-main h3 a:hover {
  color: #0b8fa8;
}
.cms-page-main p {
  max-width: 780px;
  margin: 0 0 9px;
  color: #667085;
  line-height: 1.5;
}
.cms-page-detail span:not(:last-child)::after {
  content: "·";
  margin-left: 9px;
  color: #c3cac8;
}
.cms-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  color: #8a5a00;
  background: #fff3d6;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}
.cms-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.cms-page-actions form {
  margin: 0;
}
.cms-page-actions .live-link {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 10px;
  color: #667085;
  background: #f2f4f7;
}
.cms-page-actions .live-link:hover {
  color: #0b8fa8;
  background: #e6f6f9;
}
.cms-empty-state {
  padding: 52px 22px;
}
.cms-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 18px;
}
.cms-editor-main,
.cms-editor-side {
  display: grid;
  gap: 18px;
}
.cms-section-card {
  padding-bottom: 25px;
}
.cms-section-card .panel-heading {
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 90, 0, 0.08), transparent 28%),
    linear-gradient(90deg, #ffffff, #fffaf4 100%);
}
.cms-section-badge {
  flex: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #087f70;
  background: #e4f5f0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cms-rich-editor {
  width: 100%;
}
.cms-builder .panel-heading .secondary-button {
  min-height: 38px;
}
.cms-section-list {
  display: grid;
  gap: 14px;
  padding: 20px 24px 0;
}
.cms-builder-section {
  overflow: hidden;
  border: 1px solid rgba(11, 143, 168, 0.14);
  border-radius: 16px;
  background: #ffffff;
}
.cms-builder-section-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1ef;
  background: #f8fbfa;
}
.cms-builder-section-head span {
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.cms-builder-section .form-grid {
  padding: 18px;
}
.cms-builder-section textarea {
  font-family: inherit;
}
@media (max-width: 980px) {
  .cms-hero,
  .cms-form-hero,
  .cms-editor {
    grid-template-columns: 1fr;
  }
  .cms-hero,
  .cms-form-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .cms-page-row {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .cms-page-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .cms-stats {
    grid-template-columns: 1fr;
  }
  .cms-filters {
    align-items: stretch;
    flex-direction: column;
  }
  .cms-filters select,
  .cms-filters > button {
    width: 100%;
  }
  .cms-page-row {
    grid-template-columns: 1fr;
  }
  .cms-page-order,
  .cms-page-actions {
    grid-column: 1;
  }
  .cms-page-actions {
    flex-wrap: wrap;
  }
  .cms-page-detail {
    display: grid;
    gap: 5px;
  }
  .cms-page-detail span::after {
    display: none;
  }
  .cms-section-list,
  .cms-builder-section .form-grid {
    padding: 16px;
  }
}

.listing-gallery-item span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  color: #9d3131;
  font-size: 12px;
  font-weight: 700;
}
.listing-schedule {
  padding: 8px 25px 25px;
}
.schedule-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 90px minmax(130px, 1fr) minmax(
      130px,
      1fr
    );
  gap: 14px;
  align-items: end;
  padding: 13px 0;
  border-bottom: 1px solid #edf0f4;
}
.schedule-row:last-child {
  border-bottom: 0;
}
.schedule-row > strong {
  align-self: center;
}
.schedule-row label {
  display: grid;
  gap: 5px;
  color: #697386;
  font-size: 11px;
  font-weight: 700;
}
.schedule-row select {
  width: 100%;
  border: 1px solid #dce1e8;
  border-radius: 9px;
  padding: 9px;
  background: #fff;
  color: #253148;
}
.schedule-row .schedule-closed {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .schedule-row {
    grid-template-columns: 1fr 1fr;
  }
  .schedule-row > strong {
    grid-column: 1;
  }
  .schedule-row .schedule-closed {
    grid-column: 2;
  }
}

/* =========================================================
   TourTobago logo theme override
   Orange island + blue sea + green app accent
   Added for backend admin redesign
   ========================================================= */

:root {
  --admin-ink: #241607;
  --admin-muted: #776b5f;
  --admin-bg: #fff7ec;
  --admin-paper: #ffffff;

  --admin-teal: #0b8fa8;
  --admin-teal-dark: #076172;
  --admin-sidebar: #271305;
  --admin-coral: #ff5a00;
  --admin-sun: #91f20c;
  --admin-line: #ffe0c2;
  --admin-shadow: 0 18px 45px rgba(255, 90, 0, 0.13);

  --tour-orange: #ff5a00;
  --tour-orange-dark: #d84400;
  --tour-blue: #0b8fa8;
  --tour-blue-dark: #06596a;
  --tour-green: #91f20c;
  --tour-cream: #fff7ec;
  --tour-dark: #241607;
}

body.admin-page {
  background:
    radial-gradient(circle at top left, rgba(255, 90, 0, 0.1), transparent 31%),
    radial-gradient(
      circle at top right,
      rgba(11, 143, 168, 0.1),
      transparent 34%
    ),
    linear-gradient(180deg, #fff9f1 0%, #fff3e4 48%, #f8fbfc 100%);
}

.admin-sidebar {
  background:
    radial-gradient(circle at 35% 0%, rgba(255, 90, 0, 0.42), transparent 34%),
    linear-gradient(180deg, #321604 0%, #1d1209 48%, #052532 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-brand-mark {
  background: linear-gradient(135deg, var(--tour-orange), var(--tour-green));
  box-shadow: 0 12px 28px rgba(255, 90, 0, 0.25);
}

.admin-brand-mark.has-image {
  overflow: hidden;
  background: #ffffff;
  border: 2px solid rgba(255, 90, 0, 0.35);
  transform: none;
}

.admin-brand-mark.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-nav > a.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange), #ff7b1a);
  box-shadow: 0 12px 28px rgba(255, 90, 0, 0.28);
}

.admin-nav > a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-icon {
  color: #9edce8;
}

.active .nav-icon {
  color: #ffffff;
}

.avatar {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green), #d8ff69);
}

.admin-topbar {
  border-bottom: 1px solid rgba(255, 90, 0, 0.16);
  background: rgba(255, 255, 255, 0.88);
}

.overline,
.view-site {
  color: var(--tour-orange);
}

.icon-button:hover {
  color: var(--tour-orange);
  border-color: rgba(255, 90, 0, 0.35);
}

.admin-button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange), #ff7a1a);
  box-shadow: 0 12px 26px rgba(255, 90, 0, 0.22);
}

.admin-button:hover {
  background: linear-gradient(
    135deg,
    var(--tour-orange-dark),
    var(--tour-orange)
  );
}

.alert-success {
  color: #326109;
  border-color: rgba(145, 242, 12, 0.45);
  background: #f2ffe2;
}

.alert-error {
  color: #982d00;
  border-color: rgba(255, 90, 0, 0.3);
  background: #fff0e7;
}

/* Category page redesign */

.category-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(145, 242, 12, 0.55),
      transparent 18%
    ),
    radial-gradient(
      circle at 12% 100%,
      rgba(11, 143, 168, 0.65),
      transparent 30%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ed4e00 48%, #0b7188 100%);
  box-shadow: 0 22px 55px rgba(255, 90, 0, 0.18);
}

.category-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -170px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.category-hero-content,
.category-hero-action {
  position: relative;
  z-index: 1;
}

.category-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.category-hero h2 {
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.category-hero p {
  max-width: 650px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.7;
}

.category-main-button {
  min-width: 158px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.category-main-button:hover {
  background: linear-gradient(135deg, #7be000, #cfff3d);
}

.category-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.category-stat-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
}

.category-stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 900;
}

.category-stat-icon.orange {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange), #ff8730);
}

.category-stat-icon.blue {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue), #20bdd8);
}

.category-stat-icon.green {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green), #d6ff5b);
}

.category-stat-icon.dark {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.category-stat-card strong {
  display: block;
  color: var(--tour-dark);
  font:
    650 28px/1 Georgia,
    serif;
}

.category-stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tour-category-panel {
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-category-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(320px, 540px);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 42%), #ffffff;
}

.toolbar-title {
  margin: 0;
  color: var(--tour-dark);
  font:
    650 20px/1.2 Georgia,
    serif;
}

.toolbar-subtitle {
  margin: 6px 0 0;
  color: var(--admin-muted);
  font-size: 11px;
}

.tour-category-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 16px;
  background: #f8fcfd;
}

.tour-category-search span {
  padding-left: 9px;
  color: var(--tour-blue);
  font-size: 20px;
  transform: rotate(-15deg);
}

.tour-category-search input {
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  color: var(--tour-dark);
  background: transparent;
  font-size: 12px;
}

.tour-category-search button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue), #16a8c2);
  font-size: 10px;
  font-weight: 850;
}

.category-table-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  color: var(--admin-muted);
  background: #fffaf4;
  font-size: 10px;
  font-weight: 750;
}

.category-table-summary a {
  color: var(--tour-orange);
}

.tour-category-table {
  min-width: 980px;
}

.tour-category-table th {
  padding: 14px 20px;
  color: #7f6e60;
  background: #fff6eb;
}

.tour-category-table td {
  padding: 17px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
}

.tour-category-table tbody tr {
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.tour-category-table tbody tr:hover {
  background: #fffaf4;
}

.tour-category-name {
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.tour-category-name img,
.tour-category-letter {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.1);
}

.tour-category-letter {
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(135deg, var(--tour-orange), var(--tour-blue));
  font:
    700 18px Georgia,
    serif;
}

.tour-category-name div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tour-category-name strong {
  color: var(--tour-dark);
  font-size: 12px;
}

.tour-category-name small {
  overflow: hidden;
  max-width: 260px;
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-status-pill,
.tour-media-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-status-pill.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange), #ff8126);
}

.tour-status-pill.sub {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue), #12a9c5);
}

.tour-category-slug {
  display: inline-flex;
  max-width: 210px;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 9px;
  color: var(--tour-blue-dark);
  background: #f3fcfd;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-relation {
  color: var(--admin-muted);
  font-size: 10px;
}

.tour-relation b {
  color: var(--tour-dark);
  font-size: 11px;
}

.tour-relation.parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tour-media-status.yes {
  color: #3b6908;
  background: #efffdb;
}

.tour-media-status.no {
  color: #8d6b4b;
  background: #fff0df;
}

.tour-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-row-actions a,
.tour-row-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 9px;
  font-weight: 850;
}

.tour-row-actions a {
  color: var(--tour-blue);
  background: #eefbfe;
}

.tour-row-actions a:hover {
  color: #ffffff;
  background: var(--tour-blue);
}

.tour-row-actions button {
  color: var(--tour-orange);
  background: #fff0e6;
}

.tour-row-actions button:hover {
  color: #ffffff;
  background: var(--tour-orange);
}

.category-empty-state {
  display: grid;
  place-items: center;
  padding: 45px 20px;
  text-align: center;
}

.category-empty-state span {
  font-size: 42px;
}

.category-empty-state h3 {
  margin: 12px 0 6px;
  color: var(--tour-dark);
  font:
    650 24px/1.2 Georgia,
    serif;
}

.category-empty-state p {
  max-width: 430px;
  margin: 0 0 18px;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .category-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-category-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .category-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .category-hero-action .admin-button {
    width: 100%;
  }

  .category-stats-grid {
    grid-template-columns: 1fr;
  }

  .tour-category-toolbar {
    padding: 18px;
  }

  .tour-category-search {
    grid-template-columns: auto 1fr;
  }

  .tour-category-search button {
    grid-column: 1 / -1;
  }

  .category-table-summary {
    flex-direction: column;
  }
}
/* =========================================================
   TourTobago Admin Login Redesign
   Add this block at the bottom of public/assets/css/admin.css
   ========================================================= */

body.tt-login-page {
  min-height: 100vh;
  color: #241607;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 90, 0, 0.16), transparent 28%),
    radial-gradient(
      circle at 88% 18%,
      rgba(11, 143, 168, 0.16),
      transparent 26%
    ),
    linear-gradient(135deg, #fff8ee 0%, #fff1df 45%, #eefbfe 100%);
}

.tt-login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr);
}

.tt-login-brand-panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px clamp(34px, 5vw, 82px);
  color: #ffffff;
  background:
    radial-gradient(
      circle at 24% 18%,
      rgba(145, 242, 12, 0.4),
      transparent 15%
    ),
    radial-gradient(
      circle at 84% 8%,
      rgba(255, 255, 255, 0.16),
      transparent 18%
    ),
    linear-gradient(145deg, #ff5a00 0%, #f06710 38%, #0b8fa8 100%);
}

.tt-login-brand-panel::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 290px;
  right: -170px;
  top: 90px;
  border-radius: 53% 47% 65% 35% / 45% 54% 46% 55%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    -30px 45px 0 rgba(255, 255, 255, 0.06),
    0 0 0 78px rgba(255, 255, 255, 0.035),
    0 0 0 150px rgba(255, 255, 255, 0.025);
  transform: rotate(-16deg);
}

.tt-login-brand-panel::after {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -190px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(145, 242, 12, 0.34) 0 22%, transparent 23%),
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 48%, transparent 49%);
}

.tt-login-brand-top,
.tt-login-story-content,
.tt-login-story-footer {
  position: relative;
  z-index: 1;
}

.tt-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
}

.tt-login-brand-logo {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 23px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.tt-login-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-login-brand strong {
  display: block;
  font:
    750 26px/1.1 Georgia,
    serif;
  letter-spacing: -0.03em;
}

.tt-login-brand small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tt-login-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #fffdd7;
  background: rgba(0, 0, 0, 0.16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tt-login-story-content h1 {
  max-width: 680px;
  margin: 0;
  font:
    700 clamp(46px, 5vw, 76px)/0.98 Georgia,
    serif;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.tt-login-story-content p {
  max-width: 540px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.75;
}

.tt-login-story-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 34px;
}

.tt-login-story-footer div {
  display: flex;
  flex-direction: column;
}

.tt-login-story-footer strong {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.tt-login-story-footer span,
.tt-login-coordinate {
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tt-login-form-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(26px, 5vw, 62px);
}

.tt-login-form-panel::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(255, 90, 0, 0.11);
  border-radius: 34px;
  pointer-events: none;
}

.tt-login-form-card {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
  padding: 38px;
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 70px rgba(45, 25, 8, 0.12);
  backdrop-filter: blur(18px);
}

.tt-login-mobile-logo {
  display: none;
  width: 94px;
  height: 94px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 3px solid rgba(255, 90, 0, 0.23);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(255, 90, 0, 0.13);
}

.tt-login-mobile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-login-overline {
  margin: 0 0 8px;
  color: #ff5a00;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tt-login-form-card h2 {
  margin: 0;
  color: #241607;
  font:
    700 44px/1.04 Georgia,
    serif;
  letter-spacing: -0.045em;
}

.tt-login-intro {
  margin: 12px 0 28px;
  color: #776b5f;
  font-size: 13px;
  line-height: 1.65;
}

.tt-login-form {
  display: grid;
}

.tt-login-form label,
.tt-login-label-row label {
  margin-bottom: 8px;
  color: #241607;
  font-size: 12px;
  font-weight: 850;
}

.tt-login-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.tt-login-label-row label {
  margin: 0;
}

.tt-login-label-row span {
  color: #8c7c6c;
  font-size: 10px;
  font-weight: 700;
}

.tt-login-field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 15px;
  background: #f8fcfd;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tt-login-field:focus-within {
  border-color: rgba(255, 90, 0, 0.48);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.09);
}

.tt-login-field span {
  display: grid;
  place-items: center;
  color: #0b8fa8;
  font-size: 13px;
  font-weight: 900;
}

.tt-login-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px 0 0;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font-size: 13px;
}

.tt-login-field input::placeholder {
  color: #b4a89b;
}

.tt-login-submit {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff7a18);
  box-shadow: 0 17px 34px rgba(255, 90, 0, 0.26);
  font-size: 13px;
  font-weight: 900;
}

.tt-login-submit:hover {
  background: linear-gradient(135deg, #df4a00, #ff5a00);
  transform: translateY(-1px);
}

.tt-login-submit b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #241607;
  background: #91f20c;
  font-size: 14px;
}

.tt-login-security-note {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px;
  border: 1px solid rgba(145, 242, 12, 0.42);
  border-radius: 15px;
  background: #f5ffe9;
}

.tt-login-security-note span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #241607;
  background: #91f20c;
  font-size: 12px;
  font-weight: 950;
}

.tt-login-security-note p {
  margin: 0;
  color: #547334;
  font-size: 10px;
  line-height: 1.55;
}

.tt-login-page .alert {
  border-radius: 14px;
}

.tt-login-page .alert-error {
  color: #982d00;
  border-color: rgba(255, 90, 0, 0.26);
  background: #fff0e6;
}

.tt-login-page .alert-success {
  color: #326109;
  border-color: rgba(145, 242, 12, 0.45);
  background: #f2ffe2;
}

@media (max-width: 980px) {
  .tt-login-shell {
    grid-template-columns: 1fr;
  }

  .tt-login-brand-panel {
    min-height: auto;
    padding: 32px 26px;
  }

  .tt-login-brand-top {
    display: none;
  }

  .tt-login-story-content h1,
  .tt-login-story-content p,
  .tt-login-story-footer {
    display: none;
  }

  .tt-login-mobile-logo {
    display: grid;
    place-items: center;
  }

  .tt-login-form-panel {
    min-height: calc(100vh - 92px);
  }
}

@media (max-width: 560px) {
  .tt-login-form-panel {
    padding: 18px;
  }

  .tt-login-form-panel::before {
    display: none;
  }

  .tt-login-form-card {
    padding: 26px 22px;
    border-radius: 22px;
  }

  .tt-login-form-card h2 {
    font-size: 36px;
  }

  .tt-login-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
/* =========================================================
   TourTobago Dashboard Redesign
   Add this at the bottom of public/assets/css/admin.css
   ========================================================= */

.tour-dashboard-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 18px;
  padding: 30px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(145, 242, 12, 0.55),
      transparent 18%
    ),
    radial-gradient(
      circle at 12% 95%,
      rgba(11, 143, 168, 0.7),
      transparent 32%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ed4e00 48%, #0b7188 100%);
  box-shadow: 0 22px 58px rgba(255, 90, 0, 0.18);
}

.tour-dashboard-hero::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -150px;
  top: -190px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 43% 57% 62% 38%;
  box-shadow:
    0 0 0 58px rgba(255, 255, 255, 0.035),
    0 0 0 120px rgba(255, 255, 255, 0.025);
  transform: rotate(21deg);
}

.tour-dashboard-hero::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 70px;
  left: 39%;
  bottom: 23px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  filter: blur(20px);
}

.tour-dashboard-hero-copy,
.tour-dashboard-island-card {
  position: relative;
  z-index: 1;
}

.tour-dashboard-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tour-dashboard-hero h2 {
  max-width: 720px;
  margin: 0;
  font:
    650 clamp(34px, 4vw, 54px)/1.02 Georgia,
    serif;
  letter-spacing: -0.045em;
}

.tour-dashboard-hero p {
  max-width: 650px;
  margin: 13px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.75;
}

.tour-dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.tour-dashboard-main-action {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.tour-dashboard-main-action:hover {
  background: linear-gradient(135deg, #7be000, #cfff3d);
}

.tour-dashboard-link-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
}

.tour-dashboard-link-action:hover {
  background: rgba(255, 255, 255, 0.18);
}

.tour-dashboard-island-card {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 230px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
}

.tour-island-orbit {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.tour-island-shape {
  width: 62px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 53% 47% 62% 38%;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #f6ff82);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.08em;
  transform: rotate(-12deg);
}

.tour-dashboard-island-card strong {
  display: block;
  font:
    700 42px/1 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.tour-dashboard-island-card small {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-island-mini-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.tour-island-mini-row span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.16);
  font-size: 9px;
  font-weight: 850;
}

.tour-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-dashboard-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
}

.tour-dashboard-stat-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -52px;
  top: -48px;
  border-radius: 50%;
  opacity: 0.14;
}

.tour-dashboard-stat-card.orange::after {
  background: #ff5a00;
}
.tour-dashboard-stat-card.blue::after {
  background: #0b8fa8;
}
.tour-dashboard-stat-card.green::after {
  background: #91f20c;
  opacity: 0.22;
}
.tour-dashboard-stat-card.dark::after {
  background: #241607;
}

.tour-stat-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-size: 20px;
  font-weight: 900;
}

.tour-dashboard-stat-card.orange .tour-stat-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.tour-dashboard-stat-card.blue .tour-stat-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.tour-dashboard-stat-card.green .tour-stat-icon {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tour-dashboard-stat-card.dark .tour-stat-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tour-dashboard-stat-card div {
  min-width: 0;
}

.tour-dashboard-stat-card small {
  display: block;
  color: #7f6e60;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tour-dashboard-stat-card strong {
  display: block;
  margin-top: 6px;
  color: #241607;
  font:
    700 33px/1 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tour-dashboard-stat-card p {
  margin: 7px 0 0;
  color: #776b5f;
  font-size: 10px;
  line-height: 1.45;
}

.tour-dashboard-stat-card > a {
  grid-column: 1 / -1;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 0 13px;
  border-radius: 10px;
  color: #241607;
  background: #fff4e8;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.tour-dashboard-stat-card > a:hover {
  color: #ffffff;
  background: #ff5a00;
}

.tour-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 18px;
  margin-bottom: 18px;
}

.tour-dashboard-panel {
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 23px 24px 19px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.11);
  background: linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 45%);
}

.tour-panel-heading.compact {
  padding-bottom: 16px;
}

.tour-panel-heading h2 {
  margin: 0;
  color: #241607;
  font:
    650 22px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.tour-panel-heading span {
  display: block;
  margin-top: 7px;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.55;
}

.tour-panel-heading > a {
  flex: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 10px;
  color: #0b8fa8;
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.tour-panel-heading > a:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.tour-dashboard-table {
  min-width: 720px;
}

.tour-dashboard-table th {
  color: #7f6e60;
  background: #fff6eb;
}

.tour-dashboard-table td {
  border-top: 1px solid rgba(255, 90, 0, 0.1);
}

.tour-dashboard-table tbody tr:hover {
  background: #fffaf4;
}

.tour-dashboard-listing-name {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.tour-dashboard-listing-name > span {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.62),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.1);
  font:
    700 17px Georgia,
    serif;
}

.tour-dashboard-listing-name div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tour-dashboard-listing-name strong {
  max-width: 300px;
  overflow: hidden;
  color: #241607;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-dashboard-listing-name small {
  overflow: hidden;
  max-width: 340px;
  margin-top: 5px;
  color: #776b5f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-dashboard-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-dashboard-status.success {
  color: #3b6908;
  background: #efffdb;
}

.tour-dashboard-status.warning {
  color: #a95400;
  background: #fff0df;
}

.tour-dashboard-side-stack {
  display: grid;
  gap: 18px;
}

.tour-order-list {
  padding: 0 22px 4px;
}

.tour-order-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
}

.tour-order-row:first-child {
  border-top: 0;
}

.tour-order-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
  font-size: 12px;
  font-weight: 900;
}

.tour-order-row div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tour-order-row strong {
  overflow: hidden;
  color: #241607;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-order-row small {
  margin-top: 4px;
  color: #776b5f;
  font-size: 9px;
}

.tour-order-row em {
  margin-top: 4px;
  color: #0b8fa8;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.tour-order-row b {
  color: #241607;
  font-size: 11px;
}

.tour-dashboard-total-card {
  margin: 14px 22px 22px;
  padding: 18px;
  border-radius: 17px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(145, 242, 12, 0.48),
      transparent 26%
    ),
    linear-gradient(135deg, #241607, #0b5f70);
}

.tour-dashboard-total-card span,
.tour-dashboard-total-card small {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-dashboard-total-card strong {
  display: block;
  margin: 7px 0 7px;
  font:
    700 30px/1 Georgia,
    serif;
}

.tour-pulse-list {
  display: grid;
  gap: 16px;
  padding: 20px 22px 24px;
}

.tour-pulse-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
}

.tour-pulse-item strong {
  display: block;
  color: #241607;
  font-size: 11px;
}

.tour-pulse-item small {
  display: block;
  margin-top: 4px;
  color: #776b5f;
  font-size: 9px;
}

.tour-pulse-item span {
  color: #ff5a00;
  font-size: 10px;
  font-weight: 900;
}

.tour-pulse-item i {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #fff0df;
}

.tour-pulse-item i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, #ff5a00, #91f20c);
}

.tour-dashboard-empty {
  display: grid;
  place-items: center;
  padding: 38px 20px;
  text-align: center;
}

.tour-dashboard-empty.small {
  padding: 24px 12px;
}

.tour-dashboard-empty span {
  font-size: 38px;
}

.tour-dashboard-empty strong {
  margin-top: 10px;
  color: #241607;
  font:
    650 20px/1.2 Georgia,
    serif;
}

.tour-dashboard-empty small {
  max-width: 360px;
  margin-top: 6px;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.55;
}

.tour-dashboard-empty .admin-button {
  margin-top: 16px;
}

.tour-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tour-quick-actions a {
  min-height: 118px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-content: center;
  align-items: center;
  gap: 6px 13px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(45, 25, 8, 0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.tour-quick-actions a:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.34);
  box-shadow: 0 18px 40px rgba(255, 90, 0, 0.1);
}

.tour-quick-actions span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #0b8fa8);
  font-size: 18px;
  font-weight: 900;
}

.tour-quick-actions strong {
  color: #241607;
  font-size: 12px;
}

.tour-quick-actions small {
  color: #776b5f;
  font-size: 9px;
}

@media (max-width: 1180px) {
  .tour-dashboard-stats,
  .tour-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tour-dashboard-hero {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .tour-dashboard-island-card {
    min-height: 190px;
  }
}

@media (max-width: 620px) {
  .tour-dashboard-stats,
  .tour-quick-actions {
    grid-template-columns: 1fr;
  }

  .tour-dashboard-hero h2 {
    font-size: 34px;
  }

  .tour-panel-heading {
    flex-direction: column;
  }
}
/* =========================================================
   TourTobago amenities page redesign
   File: app/Views/admin/amenities/index.php
   ========================================================= */

.amenities-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 87% 12%,
      rgba(145, 242, 12, 0.52),
      transparent 18%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(11, 143, 168, 0.68),
      transparent 32%
    ),
    linear-gradient(135deg, #0b8fa8 0%, #087184 40%, #ff5a00 100%);
  box-shadow: 0 22px 55px rgba(11, 143, 168, 0.17);
}

.amenities-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -170px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.amenities-hero::after {
  content: "✦";
  position: absolute;
  right: 84px;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 92px;
  line-height: 1;
  transform: rotate(-10deg);
}

.amenities-hero-content,
.amenities-hero-actions {
  position: relative;
  z-index: 1;
}

.amenities-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.amenities-hero h2 {
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.amenities-hero p {
  max-width: 680px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.amenities-main-button {
  min-width: 158px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.amenities-main-button:hover {
  background: linear-gradient(135deg, #7be000, #cfff3d);
}

.amenities-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.amenities-stat-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
}

.amenities-stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 900;
}

.amenities-stat-icon.orange {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.amenities-stat-icon.blue {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.amenities-stat-icon.green {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.amenities-stat-icon.dark {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.amenities-stat-card strong {
  display: block;
  color: #241607;
  font:
    650 28px/1 Georgia,
    serif;
}

.amenities-stat-card small {
  display: block;
  margin-top: 6px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tour-amenities-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-amenities-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(320px, 540px);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(11, 143, 168, 0.07), transparent 43%), #ffffff;
}

.tour-amenities-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 16px;
  background: #f8fcfd;
}

.tour-amenities-search span {
  padding-left: 9px;
  color: #0b8fa8;
  font-size: 20px;
  transform: rotate(-15deg);
}

.tour-amenities-search input {
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font-size: 12px;
}

.tour-amenities-search button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.amenities-list-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  color: #776b5f;
  background: #fffaf4;
  font-size: 10px;
  font-weight: 750;
}

.amenities-list-summary a {
  color: #ff5a00;
}

.tour-amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}

.tour-amenity-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 250px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 90, 0, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(145, 242, 12, 0.14),
      transparent 24%
    ),
    linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
  box-shadow: 0 16px 34px rgba(45, 25, 8, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.tour-amenity-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #ff5a00, #91f20c, #0b8fa8);
}

.tour-amenity-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 90, 0, 0.25);
  box-shadow: 0 22px 45px rgba(45, 25, 8, 0.1);
}

.tour-amenity-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 0;
}

.tour-amenity-symbol {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  box-shadow: 0 12px 24px rgba(255, 90, 0, 0.15);
  font:
    700 20px Georgia,
    serif;
}

.tour-amenity-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-amenity-status.used {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
}

.tour-amenity-status.unused {
  color: #3b6908;
  background: #efffdb;
}

.tour-amenity-body {
  padding: 17px 20px 8px;
}

.tour-amenity-body h3 {
  margin: 0 0 16px;
  color: #241607;
  font:
    650 22px/1.15 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-amenity-meta {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.tour-amenity-meta span {
  color: #8b7c6e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-amenity-meta code {
  overflow: hidden;
  display: block;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 10px;
  color: #06596a;
  background: #f3fcfd;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-amenity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
}

.tour-amenity-usage {
  color: #776b5f;
  font-size: 10px;
  font-weight: 750;
}

.tour-amenity-usage b {
  color: #241607;
  font-size: 16px;
}

.tour-amenity-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-amenity-actions a,
.tour-amenity-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 9px;
  font-weight: 850;
}

.tour-amenity-actions a {
  color: #0b8fa8;
  background: #eefbfe;
}

.tour-amenity-actions a:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.tour-amenity-actions button {
  color: #ff5a00;
  background: #fff0e6;
  cursor: pointer;
}

.tour-amenity-actions button:hover:not(:disabled) {
  color: #ffffff;
  background: #ff5a00;
}

.tour-amenity-actions button:disabled {
  color: #a99a8d;
  background: #f4eee8;
  cursor: not-allowed;
}

.amenities-empty-state {
  display: grid;
  place-items: center;
  padding: 55px 20px;
  text-align: center;
}

.amenities-empty-state span {
  font-size: 42px;
}

.amenities-empty-state h3 {
  margin: 12px 0 6px;
  color: #241607;
  font:
    650 24px/1.2 Georgia,
    serif;
}

.amenities-empty-state p {
  max-width: 430px;
  margin: 0 0 18px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .tour-amenities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .amenities-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-amenities-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .amenities-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .amenities-hero-actions .admin-button {
    width: 100%;
  }

  .amenities-stats-grid,
  .tour-amenities-grid {
    grid-template-columns: 1fr;
  }

  .tour-amenities-toolbar {
    padding: 18px;
  }

  .tour-amenities-search {
    grid-template-columns: auto 1fr;
  }

  .tour-amenities-search button {
    grid-column: 1 / -1;
  }

  .amenities-list-summary,
  .tour-amenity-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   Admin Listings page redesign
   TourTobago orange island + blue sea + green app accent
   ========================================================= */

.listings-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 26px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 83% 18%,
      rgba(145, 242, 12, 0.52),
      transparent 18%
    ),
    radial-gradient(circle at 8% 92%, rgba(11, 143, 168, 0.7), transparent 30%),
    linear-gradient(135deg, #ff5a00 0%, #f26914 45%, #087f98 100%);
  box-shadow: 0 24px 58px rgba(255, 90, 0, 0.18);
}

.listings-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 250px;
  right: -110px;
  bottom: -100px;
  border-radius: 52% 48% 44% 56%;
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(-12deg);
}

.listings-hero::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  left: 50%;
  top: -145px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(255, 255, 255, 0.035),
    0 0 0 100px rgba(255, 255, 255, 0.025);
}

.listings-hero-content,
.listings-hero-card {
  position: relative;
  z-index: 1;
}

.listings-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.listings-hero h2 {
  max-width: 670px;
  margin: 0;
  font:
    650 clamp(30px, 3.2vw, 46px)/1.04 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.listings-hero p {
  max-width: 720px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.72;
}

.listings-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.listings-hero-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.listings-hero-card {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.listings-map-pin {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 12px;
  border-radius: 15px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #e4ff79);
  font-size: 21px;
  font-weight: 900;
}

.listings-hero-card strong {
  color: #ffffff;
  font:
    650 42px/1 Georgia,
    serif;
}

.listings-hero-card small {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listings-main-button {
  margin-top: 18px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}

.listings-main-button:hover {
  background: linear-gradient(135deg, #7be000, #cfff3d);
}

.listings-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.listing-stat-card {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 36px rgba(45, 25, 8, 0.06);
}

.listing-stat-card > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
}

.listing-stat-card.orange > span {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.listing-stat-card.blue > span {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.listing-stat-card.green > span {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.listing-stat-card.dark > span {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.listing-stat-card strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #241607;
  font:
    650 28px/1.05 Georgia,
    serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-stat-card small {
  display: block;
  margin-top: 6px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tour-listings-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-listings-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 720px);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 42%), #ffffff;
}

.tour-listing-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px 130px 160px auto;
  gap: 10px;
  align-items: center;
}

.tour-listing-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 15px;
  background: #f8fcfd;
}

.tour-listing-search span {
  color: #0b8fa8;
  font-size: 19px;
  transform: rotate(-15deg);
}

.tour-listing-search input,
.tour-listing-filters select {
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font-size: 12px;
}

.tour-listing-filters select {
  padding: 0 12px;
  border: 1px solid rgba(255, 90, 0, 0.17);
  border-radius: 15px;
  background: #fffaf4;
}

.tour-listing-filters button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tour-listing-filters button:hover {
  background: linear-gradient(135deg, #076172, #0b8fa8);
}

.listings-table-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  color: #776b5f;
  background: #fffaf4;
  font-size: 10px;
  font-weight: 800;
}

.listings-table-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.listings-table-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ffffff;
}

.listings-table-summary a {
  color: #ff5a00;
  white-space: nowrap;
}

.tour-listings-table {
  min-width: 1120px;
}

.tour-listings-table th {
  padding: 14px 20px;
  color: #7f6e60;
  background: #fff6eb;
}

.tour-listings-table td {
  padding: 17px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  vertical-align: middle;
}

.tour-listings-table tbody tr {
  transition: background 0.18s ease;
}

.tour-listings-table tbody tr:hover {
  background: #fffaf4;
}

.tour-listing-name {
  min-width: 285px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.tour-listing-name img,
.tour-listing-letter {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(45, 25, 8, 0.11);
}

.tour-listing-letter {
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  font:
    700 20px Georgia,
    serif;
}

.tour-listing-name div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tour-listing-name strong {
  color: #241607;
  font-size: 12px;
  line-height: 1.4;
}

.tour-listing-name small {
  overflow: hidden;
  max-width: 270px;
  margin-top: 5px;
  color: #776b5f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-listing-name small b {
  color: #b59c83;
  font-weight: 800;
}

.tour-listing-tags {
  min-width: 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tour-listing-tags span,
.tour-listing-tags small,
.tour-listing-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.tour-listing-tags span {
  color: #0b5c6b;
  background: #eefbfe;
}

.tour-listing-tags small {
  color: #ff5a00;
  background: #fff0e6;
}

.tour-listing-tags em {
  color: #8d6b4b;
  background: #fff0df;
}

.tour-listing-location {
  min-width: 150px;
}

.tour-listing-location strong,
.tour-listing-location small {
  display: block;
}

.tour-listing-location strong {
  color: #241607;
  font-size: 11px;
}

.tour-listing-location small {
  overflow: hidden;
  max-width: 210px;
  margin-top: 6px;
  color: #776b5f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-listing-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tour-listing-status span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.tour-listing-status.active {
  color: #3b6908;
  background: #efffdb;
}

.tour-listing-status.pending {
  color: #9b5700;
  background: #fff2d8;
}

.tour-feature-button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: #776b5f;
  background: #f5efe8;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tour-feature-button.on {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
}

.tour-listing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 205px;
}

.tour-listing-actions a,
.tour-listing-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.tour-listing-actions a {
  color: #0b8fa8;
  background: #eefbfe;
}

.tour-listing-actions a.inventory {
  color: #241607;
  background: #efffdb;
}

.tour-listing-actions a:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.tour-listing-actions a.inventory:hover {
  color: #241607;
  background: #91f20c;
}

.tour-listing-actions button {
  color: #ff5a00;
  background: #fff0e6;
}

.tour-listing-actions button:hover {
  color: #ffffff;
  background: #ff5a00;
}

.listings-empty-state {
  display: grid;
  place-items: center;
  padding: 55px 20px;
  text-align: center;
}

.listings-empty-state span {
  font-size: 42px;
}

.listings-empty-state h3 {
  margin: 12px 0 6px;
  color: #241607;
  font:
    650 24px/1.2 Georgia,
    serif;
}

.listings-empty-state p {
  max-width: 455px;
  margin: 0 0 18px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.6;
}

.tour-table-note {
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  color: #776b5f;
  background: #fffaf4;
  font-size: 11px;
}

.tour-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  background: #fffaf4;
  flex-wrap: wrap;
}

.tour-pagination-summary {
  margin: 0;
  color: #776b5f;
  font-size: 12px;
  font-weight: 600;
}

.tour-pagination-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tour-pagination-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 90, 0, 0.16);
  background: white;
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.tour-pagination-nav a:hover {
  border-color: var(--admin-teal);
  color: var(--admin-teal);
}

.tour-pagination-nav a.active {
  border-color: var(--admin-teal);
  background: var(--admin-teal);
  color: white;
}

.tour-pagination-nav a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 1220px) {
  .tour-listings-toolbar {
    grid-template-columns: 1fr;
  }

  .tour-listing-filters {
    grid-template-columns: 1fr 140px 140px 160px auto;
  }
}

@media (max-width: 1100px) {
  .listings-hero {
    grid-template-columns: 1fr;
  }

  .listings-hero-card {
    min-height: auto;
  }

  .listings-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .listings-hero {
    padding: 28px 24px;
  }

  .listings-stats-grid {
    grid-template-columns: 1fr;
  }

  .tour-listings-toolbar {
    padding: 18px;
  }

  .tour-listing-filters {
    grid-template-columns: 1fr;
  }

  .tour-listing-filters button,
  .listings-main-button {
    width: 100%;
  }

  .listings-table-summary {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =========================================================
   TourTobago listing create/edit page redesign
   Page: /admin/listings/new and /admin/listings/{id}/edit
   ========================================================= */

.listing-form-shell {
  display: grid;
  gap: 18px;
}

.listing-form-back-row {
  display: flex;
  align-items: center;
}

.listing-form-back-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 999px;
  color: #0b7188;
  background: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.05);
}

.listing-form-back-row a:hover {
  color: #ffffff;
  border-color: #0b8fa8;
  background: #0b8fa8;
}

.listing-form-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 24px;
  align-items: stretch;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 86% 8%,
      rgba(145, 242, 12, 0.58),
      transparent 18%
    ),
    radial-gradient(
      circle at 9% 100%,
      rgba(11, 143, 168, 0.72),
      transparent 31%
    ),
    linear-gradient(135deg, #ff5a00 0%, #f35a06 45%, #0a6f85 100%);
  box-shadow: 0 24px 58px rgba(255, 90, 0, 0.18);
}

.listing-form-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -145px;
  top: -160px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 48% 52% 56% 44%;
  box-shadow:
    0 0 0 52px rgba(255, 255, 255, 0.04),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(18deg);
}

.listing-form-hero::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -44px;
  width: 245px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(2px);
}

.listing-form-hero-copy,
.listing-form-hero-panel {
  position: relative;
  z-index: 1;
}

.listing-form-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.listing-form-hero h2 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font:
    650 clamp(30px, 3.2vw, 44px)/1.04 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.listing-form-hero p {
  max-width: 710px;
  margin: 13px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.listing-form-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.listing-form-hero-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.12);
  font-size: 10px;
  font-weight: 850;
}

.listing-form-hero-panel {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 40px rgba(0, 0, 0, 0.11);
  text-align: center;
  backdrop-filter: blur(8px);
}

.listing-form-compass {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  font-size: 26px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.listing-form-hero-panel strong {
  display: block;
  color: #ffffff;
  font:
    650 23px/1.1 Georgia,
    serif;
}

.listing-form-hero-panel small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-listing-editor {
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 20px;
  align-items: start;
}

.tour-listing-editor-main {
  gap: 20px;
}

.tour-form-section,
.listing-editor .panel.form-section {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.15);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-form-section-head,
.listing-editor .panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 90, 0, 0.08), transparent 28%),
    linear-gradient(90deg, #ffffff, #fffaf4 100%);
}

.tour-form-section-head .overline,
.listing-editor .panel-heading .overline {
  margin: 0 0 6px;
  color: #ff5a00;
}

.tour-form-section-head h2,
.listing-editor .panel-heading h2 {
  margin: 0;
  color: #241607;
  font:
    650 22px/1.15 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-form-section-head span {
  display: block;
  margin-top: 7px;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.55;
}

.tour-form-section-head em {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-form-grid,
.listing-editor .form-grid {
  padding: 24px;
  gap: 18px;
}

.tour-field label,
.listing-editor .field > label,
.tour-group-label,
.listing-editor .group-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: #47301b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tour-field label b,
.listing-editor .field > label b,
.tour-group-label b {
  color: #ff5a00;
}

.tour-field input,
.tour-field textarea,
.tour-field select,
.listing-editor .field input:not([type="checkbox"]):not([type="file"]),
.listing-editor .field textarea,
.listing-editor .field select {
  width: 100%;
  border: 1px solid rgba(11, 143, 168, 0.17);
  border-radius: 14px;
  color: #241607;
  background: #fbfeff;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tour-field input,
.tour-field select,
.listing-editor .field input:not([type="checkbox"]):not([type="file"]),
.listing-editor .field select {
  min-height: 48px;
  padding: 0 14px;
}

.tour-field textarea,
.listing-editor .field textarea {
  min-height: 96px;
  padding: 14px;
  resize: vertical;
}

.tour-field input:focus,
.tour-field textarea:focus,
.tour-field select:focus,
.listing-editor .field input:not([type="checkbox"]):not([type="file"]):focus,
.listing-editor .field textarea:focus,
.listing-editor .field select:focus {
  outline: none;
  border-color: rgba(255, 90, 0, 0.58);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.1);
}

.tour-field small,
.listing-editor .field small {
  display: block;
  margin-top: 7px;
  color: #8b7b6c;
  font-size: 10px;
  line-height: 1.55;
}

.highlight-field input {
  min-height: 56px !important;
  border-color: rgba(255, 90, 0, 0.24) !important;
  background: #fffaf4 !important;
  font-size: 14px !important;
  font-weight: 800;
}

.coordinate-field input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.tour-check-line,
.listing-editor .check-line {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(255, 90, 0, 0.15);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.18),
      transparent 38%
    ),
    #fffaf4;
  cursor: pointer;
}

.tour-check-line input,
.listing-editor .check-line input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: #ff5a00;
}

.tour-check-line span,
.listing-editor .check-line span {
  display: grid;
  gap: 4px;
}

.tour-check-line strong,
.listing-editor .check-line strong {
  color: #241607;
  font-size: 12px;
}

.tour-check-line small,
.listing-editor .check-line small {
  color: #776b5f;
  font-size: 10px;
  line-height: 1.45;
}

.tour-choice-pad,
.listing-editor .form-pad {
  padding: 24px;
}

.tour-choice-grid,
.listing-editor .choice-grid {
  display: grid;
  gap: 10px;
}

.category-choice-cards,
.listing-editor .category-choices {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.amenity-choice-cards,
.listing-editor .amenity-choices {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.tour-choice-grid label,
.listing-editor .choice-grid label {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 64px;
  padding: 14px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 16px;
  background: #fbfeff;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.04);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.tour-choice-grid label:hover,
.listing-editor .choice-grid label:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 90, 0, 0.28);
  background: #fffaf4;
  box-shadow: 0 16px 30px rgba(255, 90, 0, 0.08);
}

.tour-choice-grid label:has(input:checked),
.listing-editor .choice-grid label:has(input:checked) {
  border-color: rgba(255, 90, 0, 0.55);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.25),
      transparent 38%
    ),
    #fff6ed;
}

.tour-choice-grid input,
.listing-editor .choice-grid input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  accent-color: #ff5a00;
}

.tour-choice-grid strong,
.listing-editor .choice-grid strong {
  display: block;
  color: #241607;
  font-size: 12px;
  line-height: 1.25;
}

.tour-choice-grid small,
.listing-editor .choice-grid small {
  display: block;
  margin-top: 5px;
  color: #776b5f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.amenities-label,
.listing-editor .amenities-label {
  margin-top: 22px;
}

.tour-upload-box,
.listing-editor .upload-box.compact {
  min-height: 140px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px dashed rgba(255, 90, 0, 0.38);
  border-radius: 18px;
  color: #241607;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.22),
      transparent 34%
    ),
    linear-gradient(135deg, #fffaf4, #f5fcfd);
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tour-upload-box:hover,
.listing-editor .upload-box.compact:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 143, 168, 0.55);
  box-shadow: 0 16px 34px rgba(11, 143, 168, 0.08);
}

.tour-upload-box > span,
.listing-editor .upload-box.compact > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
  font-size: 20px;
  font-weight: 900;
}

.tour-upload-box strong,
.listing-editor .upload-box.compact strong {
  color: #241607;
  font-size: 12px;
}

.tour-upload-box small,
.listing-editor .upload-box.compact small {
  margin: 0;
  color: #776b5f;
  font-size: 10px;
}

.current-media-preview {
  position: relative;
  overflow: hidden;
  height: 130px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: #f4f4f4;
  box-shadow: 0 14px 28px rgba(45, 25, 8, 0.08);
}

.current-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.current-media-preview span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(36, 22, 7, 0.72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.upload-selection-preview.single,
.upload-selection-preview.multiple,
.listing-editor .upload-selection-preview {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.upload-selection-preview.multiple {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
}

.upload-selection-preview img,
.upload-selection-preview .upload-preview-item img {
  width: 100%;
  height: 96px;
  border-radius: 14px;
  object-fit: cover;
}

.file-input,
.listing-editor .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Component: gallery + schedule */
.listing-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
}

.listing-gallery-item {
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 16px;
  background: #fbfeff;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.05);
}

.listing-gallery-item img,
.gallery-file-missing {
  width: 100%;
  height: 105px;
  border-radius: 12px;
  object-fit: cover;
}

.gallery-file-missing {
  display: grid;
  place-items: center;
  padding: 10px;
  color: #9b5700;
  background: #fff2d8;
  font-size: 10px;
  text-align: center;
}

.listing-gallery-item > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 800;
}

.listing-gallery-item input {
  accent-color: #ff5a00;
}

.status-pill.neutral {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #0b7188;
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.listing-schedule {
  display: grid;
  gap: 10px;
  padding: 24px;
}

.schedule-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.8fr) auto minmax(155px, 1fr) minmax(
      155px,
      1fr
    );
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(11, 143, 168, 0.14);
  border-radius: 16px;
  background: #fbfeff;
}

.schedule-row > strong {
  color: #241607;
  font-size: 12px;
}

.schedule-row label {
  display: grid;
  gap: 6px;
  color: #776b5f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.schedule-row select {
  min-height: 42px;
  border: 1px solid rgba(11, 143, 168, 0.17);
  border-radius: 13px;
  color: #241607;
  background: #ffffff;
  font-size: 11px;
}

.schedule-closed {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  color: #ff5a00 !important;
  background: #fff0e6;
  white-space: nowrap;
}

.schedule-closed input {
  accent-color: #ff5a00;
}

/* Sidebar */
.tour-listing-editor-side {
  gap: 14px;
}

.tour-publish-card {
  overflow: hidden;
  padding: 22px;
  border-color: rgba(255, 90, 0, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.22),
      transparent 34%
    ),
    linear-gradient(180deg, #ffffff, #fffaf4);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.08);
}

.tour-publish-card h3 {
  margin: 4px 0 8px;
  color: #241607;
  font:
    650 25px/1.1 Georgia,
    serif;
  letter-spacing: -0.03em;
}

.tour-publish-card p {
  margin: 0;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.6;
}

.publish-progress-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.publish-progress-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 14px;
  color: #47301b;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 850;
}

.publish-progress-list b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #18b0cb);
  font-size: 9px;
}

.tour-publish-card .admin-button-wide {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  margin-bottom: 12px;
}

.tour-publish-card > a {
  display: flex;
  justify-content: center;
  color: #776b5f;
  font-size: 10px;
  font-weight: 850;
}

.tour-publish-card > a:hover {
  color: #ff5a00;
}

.listing-form-mini-card,
.tour-tip-card,
.tour-inventory-shortcut {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 90, 0, 0.15);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(45, 25, 8, 0.06);
}

.listing-form-mini-card > span,
.tour-tip-card > span,
.tour-inventory-shortcut > span {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  font-weight: 900;
}

.listing-form-mini-card strong,
.tour-tip-card strong,
.tour-inventory-shortcut strong {
  display: block;
  color: #241607;
  font-size: 12px;
}

.listing-form-mini-card p,
.tour-tip-card p,
.tour-inventory-shortcut small {
  margin: 5px 0 0;
  color: #776b5f;
  font-size: 10px;
  line-height: 1.55;
}

.tour-inventory-shortcut:hover {
  border-color: rgba(11, 143, 168, 0.28);
  background: #f5fcfd;
}

.tour-inventory-shortcut > span {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #18b0cb);
}

.listing-form-errors {
  display: grid;
  gap: 6px;
}

@media (max-width: 1220px) {
  .tour-listing-editor {
    grid-template-columns: minmax(0, 1fr) 285px;
  }

  .schedule-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1020px) {
  .listing-form-hero {
    grid-template-columns: 1fr;
  }

  .listing-form-hero-panel {
    min-height: auto;
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
  }

  .tour-listing-editor {
    grid-template-columns: 1fr;
  }

  .tour-listing-editor-side {
    order: -1;
  }

  .tour-publish-card.sticky-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .listing-form-hero {
    padding: 28px 24px;
  }

  .listing-form-hero h2 {
    font-size: 30px;
  }

  .listing-form-hero-panel {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .tour-form-section-head,
  .listing-editor .panel-heading {
    flex-direction: column;
    padding: 20px;
  }

  .tour-form-grid,
  .listing-editor .form-grid,
  .tour-choice-pad,
  .listing-editor .form-pad,
  .listing-schedule {
    padding: 20px;
  }

  .category-choice-cards,
  .amenity-choice-cards,
  .listing-editor .category-choices,
  .listing-editor .amenity-choices {
    grid-template-columns: 1fr;
  }

  .schedule-row {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Listing form: improved Categories & Amenities section
   TourTobago orange + sea blue + app green theme
   ========================================================= */

.taxonomy-section {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 90, 0, 0.08), transparent 28%),
    radial-gradient(
      circle at 100% 0%,
      rgba(11, 143, 168, 0.08),
      transparent 30%
    ),
    rgba(255, 255, 255, 0.94) !important;
}

.taxonomy-head {
  align-items: center;
}

.taxonomy-head-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.taxonomy-head-stats span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 999px;
  color: #6d4d34;
  background: #fffaf4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.taxonomy-head-stats b {
  color: #ff5a00;
  font-size: 13px;
}

.taxonomy-builder {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.taxonomy-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 90, 0, 0.13);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(45, 25, 8, 0.055);
}

.taxonomy-panel-categories {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.16),
      transparent 30%
    ),
    linear-gradient(180deg, #ffffff, #fffaf4);
}

.taxonomy-panel-amenities {
  background:
    radial-gradient(circle at 0% 0%, rgba(11, 143, 168, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff, #f8fdfe);
}

.taxonomy-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.11);
}

.taxonomy-panel-header.compact {
  border-bottom-color: rgba(11, 143, 168, 0.12);
}

.taxonomy-panel-title {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
}

.taxonomy-panel-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 72% 16%,
      rgba(145, 242, 12, 0.85),
      transparent 23%
    ),
    linear-gradient(135deg, #ff5a00, #ff8533);
  box-shadow: 0 12px 28px rgba(255, 90, 0, 0.18);
  font-size: 19px;
}

.taxonomy-panel-icon.blue {
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(145, 242, 12, 0.75),
      transparent 23%
    ),
    linear-gradient(135deg, #0b8fa8, #16b9d4);
  box-shadow: 0 12px 28px rgba(11, 143, 168, 0.17);
}

.taxonomy-panel-title h3 {
  margin: 0;
  color: #241607;
  font:
    700 18px/1.15 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.taxonomy-panel-title h3 b {
  color: #ff5a00;
  font-family: inherit;
}

.taxonomy-panel-title p {
  max-width: 620px;
  margin: 7px 0 0;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.55;
}

.taxonomy-mini-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 360px;
}

.taxonomy-mini-stats.single {
  max-width: none;
}

.taxonomy-mini-stats span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #8a4a16;
  background: #fff0df;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.taxonomy-panel-amenities .taxonomy-mini-stats span {
  color: #075b6d;
  background: #edfafd;
}

.taxonomy-grid {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.taxonomy-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-height: 390px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 90, 0, 0.45) rgba(255, 240, 223, 0.7);
}

.taxonomy-amenity-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 143, 168, 0.45) rgba(237, 250, 253, 0.9);
}

.taxonomy-card,
.taxonomy-amenity-chip {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.taxonomy-card input,
.taxonomy-amenity-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.taxonomy-card {
  min-height: 92px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(11, 143, 168, 0.14);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(45, 25, 8, 0.055);
}

.taxonomy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.24),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(255, 90, 0, 0.1), rgba(11, 143, 168, 0.06));
  transition: opacity 0.18s ease;
}

.taxonomy-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.34);
  box-shadow: 0 18px 34px rgba(255, 90, 0, 0.1);
}

.taxonomy-card.is-selected,
.taxonomy-card:has(input:checked) {
  border-color: rgba(255, 90, 0, 0.55);
  box-shadow:
    0 18px 34px rgba(255, 90, 0, 0.13),
    inset 0 0 0 1px rgba(255, 90, 0, 0.16);
}

.taxonomy-card.is-selected::before,
.taxonomy-card:has(input:checked)::before {
  opacity: 1;
}

.taxonomy-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 76% 20%,
      rgba(145, 242, 12, 0.75),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  box-shadow: 0 10px 22px rgba(45, 25, 8, 0.12);
  font:
    800 18px/1 Georgia,
    serif;
}

.taxonomy-card.is-sub .taxonomy-avatar {
  background:
    radial-gradient(
      circle at 76% 20%,
      rgba(145, 242, 12, 0.6),
      transparent 22%
    ),
    linear-gradient(135deg, #0b8fa8, #16b9d4);
}

.taxonomy-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.taxonomy-card-copy strong {
  overflow: hidden;
  color: #241607;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taxonomy-card-copy small {
  color: #776b5f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.taxonomy-type-chip {
  align-self: start;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8430);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.taxonomy-card.is-sub .taxonomy-type-chip {
  background: linear-gradient(135deg, #0b8fa8, #16b9d4);
}

.taxonomy-checkmark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #241607;
  background: #91f20c;
  box-shadow: 0 8px 18px rgba(145, 242, 12, 0.28);
  font-size: 12px;
  font-weight: 950;
  transform: scale(0.5);
  opacity: 0;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.taxonomy-card.is-selected .taxonomy-checkmark,
.taxonomy-card:has(input:checked) .taxonomy-checkmark {
  transform: scale(1);
  opacity: 1;
}

.taxonomy-amenity-chip {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 16px;
  color: #241607;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.045);
}

.taxonomy-amenity-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 143, 168, 0.38);
  background: #f7fdff;
  box-shadow: 0 15px 30px rgba(11, 143, 168, 0.09);
}

.taxonomy-amenity-chip.is-selected,
.taxonomy-amenity-chip:has(input:checked) {
  border-color: rgba(11, 143, 168, 0.55);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.22),
      transparent 36%
    ),
    #effbfe;
  box-shadow:
    0 16px 32px rgba(11, 143, 168, 0.11),
    inset 0 0 0 1px rgba(11, 143, 168, 0.12);
}

.amenity-check-dot {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(11, 143, 168, 0.22);
  border-radius: 999px;
  color: transparent;
  background: #f7fdff;
  font-size: 11px;
  font-weight: 950;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.taxonomy-amenity-chip.is-selected .amenity-check-dot,
.taxonomy-amenity-chip:has(input:checked) .amenity-check-dot {
  color: #241607;
  border-color: #91f20c;
  background: #91f20c;
}

.taxonomy-amenity-chip strong {
  overflow: hidden;
  color: #241607;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taxonomy-empty-box {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 110px;
  padding: 22px;
  border: 1px dashed rgba(255, 90, 0, 0.26);
  border-radius: 18px;
  color: #241607;
  background: #fffaf4;
  text-align: center;
}

.taxonomy-empty-box strong {
  font-size: 13px;
}

.taxonomy-empty-box small {
  color: #776b5f;
  font-size: 10px;
}

@media (max-width: 980px) {
  .taxonomy-panel-header {
    display: grid;
  }

  .taxonomy-mini-stats,
  .taxonomy-head-stats {
    justify-content: flex-start;
  }

  .taxonomy-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  .taxonomy-builder {
    padding: 16px;
  }

  .taxonomy-panel-header {
    padding: 17px;
  }

  .taxonomy-grid {
    padding: 14px;
  }

  .taxonomy-category-grid,
  .taxonomy-amenity-grid {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .taxonomy-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .taxonomy-type-chip {
    grid-column: 2;
    justify-self: start;
  }
}
/* =========================================================
   TourTobago admin bookings page redesign
   Applies to: /admin/bookings
   ========================================================= */

.tour-booking-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: stretch;
  gap: 22px;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 87% 12%,
      rgba(145, 242, 12, 0.6),
      transparent 18%
    ),
    radial-gradient(
      circle at 8% 100%,
      rgba(11, 143, 168, 0.65),
      transparent 31%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ed4e00 46%, #0b7188 100%);
  box-shadow: 0 22px 55px rgba(255, 90, 0, 0.18);
}

.tour-booking-hero::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -145px;
  top: -178px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 44% 56% 58% 42%;
  box-shadow:
    0 0 0 55px rgba(255, 255, 255, 0.035),
    0 0 0 116px rgba(255, 255, 255, 0.022);
  transform: rotate(22deg);
}

.tour-booking-hero-copy,
.tour-booking-hero-card {
  position: relative;
  z-index: 1;
}

.tour-booking-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-booking-hero h2 {
  max-width: 720px;
  margin: 0;
  font:
    650 clamp(30px, 3.4vw, 46px)/1.04 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.tour-booking-hero p {
  max-width: 680px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.7;
}

.tour-booking-hero-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.tour-booking-hero-card span,
.tour-booking-hero-card small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-booking-hero-card strong {
  margin: 8px 0 7px;
  font:
    700 46px/1 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.tour-booking-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-booking-stat {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 5px 14px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tour-booking-stat::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -64px;
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.06);
}

.tour-booking-stat:hover,
.tour-booking-stat.active {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.34);
  box-shadow: 0 18px 42px rgba(255, 90, 0, 0.12);
}

.tour-booking-stat-icon {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8830);
  font-size: 18px;
  font-weight: 900;
}

.tour-booking-stat.pending .tour-booking-stat-icon {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dfff62);
}

.tour-booking-stat.approved .tour-booking-stat-icon {
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #22bdd8);
}

.tour-booking-stat.expired .tour-booking-stat-icon {
  background: linear-gradient(135deg, #241607, #6a3a15);
}

.tour-booking-stat-text {
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-stat strong {
  color: var(--tour-dark, #241607);
  font:
    650 29px/1 Georgia,
    serif;
}

.tour-booking-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-booking-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.065), transparent 44%), #ffffff;
}

.tour-booking-panel-title {
  margin: 0;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.2 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-booking-panel-subtitle {
  margin: 7px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.55;
}

.tour-booking-mini-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tour-booking-mini-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  color: #6c5949;
  background: #fff6eb;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-booking-mini-metrics b {
  color: var(--tour-orange, #ff5a00);
  font-size: 12px;
}

.tour-booking-filters {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.3fr) minmax(145px, 0.65fr) minmax(155px, 0.75fr)
    minmax(145px, 0.65fr) auto;
  align-items: end;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  background: #fffaf4;
}

.tour-booking-filters label {
  display: grid;
  gap: 7px;
}

.tour-booking-filters small {
  color: #8a7766;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-booking-filters input,
.tour-booking-filters select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 13px;
  outline: 0;
  color: var(--tour-dark, #241607);
  background: #ffffff;
  font-size: 12px;
}

.tour-booking-filters input:focus,
.tour-booking-filters select:focus {
  border-color: rgba(255, 90, 0, 0.48);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.1);
}

.tour-booking-filters select {
  padding: 0 13px;
}

.tour-booking-search {
  position: relative;
}

.tour-booking-search span {
  position: absolute;
  left: 14px;
  bottom: 10px;
  color: var(--tour-blue, #0b8fa8);
  font-size: 20px;
  transform: rotate(-15deg);
}

.tour-booking-search input {
  padding: 0 13px 0 42px;
}

.tour-booking-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tour-booking-filter-actions button,
.tour-booking-filter-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tour-booking-filter-actions button {
  padding: 0 16px;
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7c1c);
  box-shadow: 0 12px 25px rgba(255, 90, 0, 0.16);
}

.tour-booking-filter-actions a {
  padding: 0 13px;
  color: var(--tour-blue, #0b8fa8);
  background: #eefbfe;
}

.tour-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  background: #ffffff;
}

.tour-active-filters span {
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-active-filters b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--tour-dark, #241607);
  background: #f1ffe1;
  font-size: 9px;
  font-weight: 850;
}

.tour-booking-table-wrap {
  border-radius: 0;
}

.tour-booking-table {
  min-width: 1120px;
}

.tour-booking-table th {
  padding: 15px 20px;
  color: #806e5e;
  background: #fff6eb;
}

.tour-booking-table td {
  padding: 18px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  vertical-align: middle;
}

.tour-booking-table tbody tr {
  transition: background 0.18s ease;
}

.tour-booking-table tbody tr:hover {
  background: #fffaf4;
}

.tour-booking-table td > small,
.tour-booking-date small,
.tour-payment-block small,
.tour-booking-listing small,
.tour-booking-guest small {
  display: block;
  margin-top: 5px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  line-height: 1.35;
}

.tour-booking-ref {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #19aec9);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.tour-booking-guest {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 210px;
}

.tour-booking-guest > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dfff62);
  box-shadow: 0 10px 22px rgba(145, 242, 12, 0.2);
  font:
    800 16px Georgia,
    serif;
}

.tour-booking-guest div,
.tour-booking-listing {
  min-width: 0;
}

.tour-booking-guest strong,
.tour-booking-listing strong,
.tour-booking-date strong {
  display: block;
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-booking-listing strong {
  max-width: 270px;
}

.tour-payment-block {
  display: grid;
  gap: 5px;
}

.tour-payment-method {
  width: max-content;
  max-width: 160px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--tour-blue-dark, #06596a);
  background: #effbfe;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-payment-block .is-paid {
  color: #3f7007;
}

.tour-payment-block .not-paid {
  color: #9d5e1f;
}

.tour-booking-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-status.approved {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #18adc8);
}

.tour-booking-status.pending {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dfff62);
}

.tour-booking-status.expired {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #6a3a15);
}

.tour-booking-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tour-booking-actions a,
.tour-booking-actions button,
.tour-expired-note {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.tour-booking-actions a {
  color: var(--tour-blue, #0b8fa8);
  background: #eefbfe;
}

.tour-booking-actions a:hover {
  color: #ffffff;
  background: var(--tour-blue, #0b8fa8);
}

.tour-booking-actions button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7c1c);
}

.tour-booking-actions button:hover {
  background: linear-gradient(135deg, #d84400, #ff5a00);
}

.tour-expired-note {
  color: #806c58;
  background: #f4e8dd;
}

.tour-booking-empty {
  display: grid;
  place-items: center;
  padding: 54px 20px;
  text-align: center;
}

.tour-booking-empty span {
  font-size: 44px;
}

.tour-booking-empty h3 {
  margin: 13px 0 6px;
  color: var(--tour-dark, #241607);
  font:
    650 24px/1.2 Georgia,
    serif;
}

.tour-booking-empty p {
  max-width: 430px;
  margin: 0 0 18px;
  color: var(--admin-muted, #776b5f);
  font-size: 12px;
  line-height: 1.6;
}

.tour-booking-empty a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7c1c);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.tour-booking-note {
  padding: 0 24px 22px;
  color: var(--admin-muted, #776b5f);
}

@media (max-width: 1240px) {
  .tour-booking-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-booking-search {
    grid-column: 1 / -1;
  }

  .tour-booking-filter-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1040px) {
  .tour-booking-hero {
    grid-template-columns: 1fr;
  }

  .tour-booking-hero-card {
    min-height: auto;
  }

  .tour-booking-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-booking-panel-head {
    grid-template-columns: 1fr;
  }

  .tour-booking-mini-metrics {
    justify-content: flex-start;
  }
}

@media (max-width: 660px) {
  .tour-booking-hero {
    padding: 28px 22px;
  }

  .tour-booking-stats,
  .tour-booking-filters {
    grid-template-columns: 1fr;
  }

  .tour-booking-filter-actions,
  .tour-booking-filter-actions button,
  .tour-booking-filter-actions a {
    width: 100%;
  }

  .tour-booking-filter-actions {
    flex-direction: column;
  }
}
/* =========================================================
   TourTobago booking detail page redesign
   Page: /admin/bookings/{id}
   ========================================================= */

.tour-booking-detail-back {
  margin-bottom: 14px;
}

.tour-booking-detail-back a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 999px;
  color: var(--tour-orange, #ff5a00);
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.05);
}

.tour-booking-detail-back a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8126);
}

.tour-booking-detail-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 90, 0, 0.2);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 9% 92%,
      rgba(11, 143, 168, 0.82),
      transparent 28%
    ),
    radial-gradient(
      circle at 91% 12%,
      rgba(145, 242, 12, 0.62),
      transparent 21%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ef4d00 43%, #0a7188 100%);
  box-shadow: 0 24px 58px rgba(255, 90, 0, 0.2);
}

.tour-booking-detail-hero::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -150px;
  top: -180px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 45% 55% 62% 38%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.04),
    0 0 0 114px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.tour-booking-detail-hero::after {
  content: "";
  position: absolute;
  inset: auto 36px 28px auto;
  width: 120px;
  height: 16px;
  border-radius: 50%;
  background: rgba(36, 22, 7, 0.16);
  filter: blur(1px);
}

.tour-booking-detail-copy,
.tour-booking-status-card {
  position: relative;
  z-index: 1;
}

.tour-booking-detail-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd5;
  background: rgba(0, 0, 0, 0.16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-booking-detail-hero h2 {
  max-width: 760px;
  margin: 0;
  font:
    650 clamp(31px, 4vw, 52px)/1.02 Georgia,
    serif;
  letter-spacing: -0.045em;
}

.tour-booking-detail-hero p {
  max-width: 650px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tour-booking-detail-hero p strong {
  color: #ffffff;
}

.tour-booking-status-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
}

.tour-booking-status-card::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
}

.tour-booking-status-card::after {
  content: "✓";
  position: absolute;
  top: 28px;
  right: 33px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
}

.tour-booking-status-card.pending::after {
  content: "…";
  top: 22px;
  right: 31px;
  font-size: 28px;
}

.tour-booking-status-card.expired::after {
  content: "!";
}

.tour-booking-status-card span,
.tour-booking-status-card small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-booking-status-card strong {
  margin: 8px 0 8px;
  color: #ffffff;
  font:
    650 32px/1 Georgia,
    serif;
}

.tour-booking-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-booking-detail-metric {
  min-height: 112px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 19px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(45, 25, 8, 0.06);
}

.tour-booking-detail-metric .metric-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 19px;
  box-shadow: 0 12px 24px rgba(45, 25, 8, 0.08);
}

.tour-booking-detail-metric .metric-icon.orange {
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8730);
}

.tour-booking-detail-metric .metric-icon.blue {
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #20bdd8);
}

.tour-booking-detail-metric .metric-icon.green {
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #d6ff5b);
}

.tour-booking-detail-metric .metric-icon.dark {
  background: linear-gradient(135deg, var(--tour-dark, #241607), #5a3517);
}

.tour-booking-detail-metric small {
  display: block;
  margin-bottom: 7px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-detail-metric strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tour-booking-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 18px;
}

.tour-booking-detail-main,
.tour-booking-detail-side {
  display: grid;
  gap: 18px;
}

.tour-booking-overview-card,
.tour-booking-payload-card,
.tour-booking-guest-card,
.tour-booking-workflow-card,
.tour-booking-timeline-card {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.15);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-booking-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 42%), #ffffff;
}

.tour-booking-card-head h2 {
  margin: 3px 0 0;
  color: var(--tour-dark, #241607);
  font:
    650 23px/1.15 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-booking-chip,
.tour-booking-count {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-chip.approved {
  color: #315f09;
  background: #efffdb;
}

.tour-booking-chip.pending {
  color: #965000;
  background: #fff1da;
}

.tour-booking-chip.expired {
  color: #6d6256;
  background: #f2eee9;
}

.tour-booking-count {
  color: var(--tour-blue-dark, #06596a);
  background: #eefdff;
}

.tour-booking-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 24px 26px 26px;
}

.tour-booking-info-grid article,
.tour-booking-payload-grid article {
  min-height: 96px;
  padding: 18px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(11, 143, 168, 0.07),
      transparent 28%
    ),
    #ffffff;
}

.tour-booking-info-grid small,
.tour-booking-payload-grid small {
  display: block;
  margin-bottom: 8px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-info-grid strong,
.tour-booking-payload-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--tour-dark, #241607);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
}

.tour-booking-info-grid span {
  display: block;
  margin-top: 7px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
}

.tour-booking-payload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 24px 26px 26px;
}

.tour-booking-payload-grid article {
  min-height: 84px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 90, 0, 0.07), transparent 28%),
    #ffffff;
}

.tour-booking-empty-payload {
  display: grid;
  place-items: center;
  padding: 46px 24px;
  text-align: center;
}

.tour-booking-empty-payload > span {
  font-size: 42px;
}

.tour-booking-empty-payload h3 {
  margin: 12px 0 6px;
  color: var(--tour-dark, #241607);
  font:
    650 23px/1.2 Georgia,
    serif;
}

.tour-booking-empty-payload p {
  max-width: 390px;
  margin: 0;
  color: var(--admin-muted, #776b5f);
  font-size: 12px;
  line-height: 1.6;
}

.tour-booking-guest-card,
.tour-booking-workflow-card,
.tour-booking-timeline-card {
  padding: 24px;
}

.tour-booking-guest-card {
  position: relative;
  text-align: center;
}

.tour-booking-guest-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 92px;
  background:
    radial-gradient(circle at 82% 8%, rgba(145, 242, 12, 0.3), transparent 28%),
    linear-gradient(135deg, rgba(255, 90, 0, 0.11), rgba(11, 143, 168, 0.11));
}

.tour-booking-guest-card > * {
  position: relative;
  z-index: 1;
}

.tour-booking-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 20px auto 14px;
  border: 4px solid #ffffff;
  border-radius: 27px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  box-shadow: 0 16px 32px rgba(45, 25, 8, 0.14);
  font:
    700 30px/1 Georgia,
    serif;
}

.tour-booking-guest-card h3 {
  margin: 0;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.2 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-booking-contact-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.tour-booking-contact-list a,
.tour-booking-contact-list > span {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 13px;
  color: var(--admin-muted, #776b5f);
  background: #fbfeff;
  font-size: 10px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.tour-booking-contact-list a:hover {
  color: var(--tour-blue, #0b8fa8);
  border-color: rgba(11, 143, 168, 0.28);
}

.tour-booking-contact-list a span,
.tour-booking-contact-list > span span {
  width: 25px;
  height: 25px;
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 9px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #17aac5);
}

.tour-booking-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tour-booking-dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #d9d1c7;
  box-shadow: 0 0 0 6px rgba(217, 209, 199, 0.25);
}

.tour-booking-dot.approved {
  background: var(--tour-green, #91f20c);
  box-shadow: 0 0 0 6px rgba(145, 242, 12, 0.24);
}

.tour-booking-dot.pending {
  background: var(--tour-orange, #ff5a00);
  box-shadow: 0 0 0 6px rgba(255, 90, 0, 0.18);
}

.tour-booking-dot.expired {
  background: #918579;
  box-shadow: 0 0 0 6px rgba(145, 133, 121, 0.16);
}

.tour-booking-primary-action {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 15px;
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dfff62);
  box-shadow: 0 16px 30px rgba(145, 242, 12, 0.22);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(145, 242, 12, 0.28);
}

.tour-booking-danger-form {
  margin-top: 10px;
}

.tour-booking-danger-form button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  color: var(--tour-orange, #ff5a00);
  background: #fff0e7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-booking-danger-form button:hover {
  color: #ffffff;
  background: var(--tour-orange, #ff5a00);
}

.tour-booking-retention-note,
.tour-booking-workflow-note p {
  margin: 12px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.65;
}

.tour-booking-workflow-note {
  padding: 16px;
  border: 1px solid rgba(145, 133, 121, 0.16);
  border-radius: 16px;
  background: #f8f5f1;
}

.tour-booking-workflow-note strong {
  color: var(--tour-dark, #241607);
  font-size: 13px;
}

.tour-booking-timeline-card .overline {
  margin-bottom: 16px;
}

.tour-booking-timeline {
  display: grid;
  gap: 0;
}

.tour-booking-timeline > div {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 18px;
}

.tour-booking-timeline > div:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: rgba(255, 90, 0, 0.2);
}

.tour-booking-timeline > div:last-child {
  padding-bottom: 0;
}

.tour-booking-timeline > div > span {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--tour-orange, #ff5a00);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.15);
}

.tour-booking-timeline article small {
  display: block;
  margin-bottom: 5px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-booking-timeline article strong {
  display: block;
  color: var(--tour-dark, #241607);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .tour-booking-detail-hero,
  .tour-booking-detail-grid {
    grid-template-columns: 1fr;
  }

  .tour-booking-status-card {
    min-height: 150px;
  }

  .tour-booking-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tour-booking-detail-hero {
    padding: 28px 22px;
  }

  .tour-booking-detail-hero h2 {
    font-size: 31px;
  }

  .tour-booking-detail-metrics,
  .tour-booking-info-grid,
  .tour-booking-payload-grid {
    grid-template-columns: 1fr;
  }

  .tour-booking-card-head {
    flex-direction: column;
    padding: 22px;
  }

  .tour-booking-info-grid,
  .tour-booking-payload-grid {
    padding: 22px;
  }
}

/* =========================================================
   TourTobago admin orders page redesign
   URL: /admin/orders
   ========================================================= */

.orders-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: stretch;
  gap: 22px;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 86% 12%,
      rgba(145, 242, 12, 0.62),
      transparent 17%
    ),
    radial-gradient(
      circle at 12% 100%,
      rgba(11, 143, 168, 0.72),
      transparent 32%
    ),
    linear-gradient(135deg, #ff5a00 0%, #f26112 46%, #086f86 100%);
  box-shadow: 0 22px 60px rgba(255, 90, 0, 0.19);
}

.orders-hero::before,
.orders-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orders-hero::before {
  width: 390px;
  height: 390px;
  right: -150px;
  top: -185px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 44% 56% 51% 49%;
  box-shadow:
    0 0 0 50px rgba(255, 255, 255, 0.035),
    0 0 0 108px rgba(255, 255, 255, 0.026);
  transform: rotate(20deg);
}

.orders-hero::after {
  width: 240px;
  height: 80px;
  left: 28%;
  bottom: -42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(4px);
}

.orders-hero-copy,
.orders-hero-card {
  position: relative;
  z-index: 1;
}

.orders-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.orders-hero h2 {
  margin: 0;
  font:
    650 clamp(30px, 4vw, 48px)/1.04 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.orders-hero p {
  max-width: 680px;
  margin: 13px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.75;
}

.orders-hero-card {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 23px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
}

.orders-hero-card span,
.orders-hero-card small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.orders-hero-card strong {
  margin: 8px 0;
  color: #ffffff;
  font:
    700 34px/1 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.orders-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.orders-stat-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 120px;
  padding: 21px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 21px;
  color: inherit;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.orders-stat-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -50px;
  width: 115px;
  height: 115px;
  border-radius: 38% 62% 60% 40%;
  background: rgba(255, 90, 0, 0.06);
  transform: rotate(18deg);
}

.orders-stat-card:hover,
.orders-stat-card.active {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.32);
  box-shadow: 0 20px 44px rgba(255, 90, 0, 0.12);
}

.orders-stat-card.pending::after {
  background: rgba(11, 143, 168, 0.08);
}

.orders-stat-card.active-work::after {
  background: rgba(145, 242, 12, 0.14);
}

.orders-stat-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-size: 21px;
  box-shadow: 0 12px 28px rgba(45, 25, 8, 0.1);
}

.orders-stat-icon.orange {
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8730);
}

.orders-stat-icon.blue {
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #20bdd8);
}

.orders-stat-icon.green {
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #d6ff5b);
}

.orders-stat-icon.dark {
  background: linear-gradient(135deg, #241607, #5a3517);
}

.orders-stat-card div {
  position: relative;
  z-index: 1;
}

.orders-stat-card small {
  display: block;
  margin-bottom: 7px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.orders-stat-card strong {
  color: var(--tour-dark, #241607);
  font:
    700 30px/1 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.orders-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.orders-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 23px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.07), transparent 44%), #ffffff;
}

.orders-panel-title {
  margin: 0;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.2 Georgia,
    serif;
}

.orders-panel-subtitle {
  margin: 7px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
}

.orders-mini-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.orders-mini-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(11, 143, 168, 0.15);
  border-radius: 999px;
  color: var(--admin-muted, #776b5f);
  background: #f6fcfd;
  font-size: 10px;
  font-weight: 800;
}

.orders-mini-metrics b {
  color: var(--tour-blue-dark, #06596a);
}

.orders-filter-bar {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.45fr) repeat(3, minmax(160px, 0.7fr))
    auto auto;
  gap: 12px;
  align-items: end;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  background: #fffaf4;
}

.orders-filter-bar label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.orders-filter-bar input,
.orders-filter-bar select {
  width: 100%;
  height: 43px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 14px;
  color: var(--tour-dark, #241607);
  background: #ffffff;
  font-size: 12px;
  outline: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.orders-filter-bar input:focus,
.orders-filter-bar select:focus {
  border-color: rgba(255, 90, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.1);
}

.orders-search-field {
  position: relative;
}

.orders-search-field span {
  position: absolute;
  left: 14px;
  bottom: 10px;
  color: var(--tour-blue, #0b8fa8);
  font-size: 19px;
  transform: rotate(-15deg);
  z-index: 1;
}

.orders-search-field input {
  padding-left: 42px;
}

.orders-filter-bar select {
  padding: 0 12px;
}

.orders-filter-bar button,
.orders-clear-filter {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  padding: 0 17px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.orders-filter-bar button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7a1a);
  box-shadow: 0 12px 25px rgba(255, 90, 0, 0.18);
}

.orders-filter-bar button:hover {
  background: linear-gradient(135deg, #d84400, #ff5a00);
}

.orders-clear-filter {
  color: var(--tour-orange, #ff5a00);
  background: #fff0e6;
}

.orders-clear-filter:hover {
  color: #ffffff;
  background: var(--tour-orange, #ff5a00);
}

.orders-status-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  background: #ffffff;
}

.orders-status-strip a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 90, 0, 0.13);
  border-radius: 999px;
  color: var(--admin-muted, #776b5f);
  background: #fffaf4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.orders-status-strip a.active,
.orders-status-strip a:hover {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7a1a);
}

.orders-status-strip a.confirmed,
.orders-status-strip a.preparing,
.orders-status-strip a.ready {
  border-color: rgba(11, 143, 168, 0.18);
}

.orders-status-strip a.completed {
  border-color: rgba(145, 242, 12, 0.35);
}

.orders-status-strip a.cancelled {
  border-color: rgba(128, 59, 23, 0.16);
}

.orders-table-wrap {
  overflow-x: auto;
}

.orders-table-modern {
  min-width: 1120px;
}

.orders-table-modern th {
  padding: 15px 20px;
  color: #7f6e60;
  background: #fff6eb;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.orders-table-modern td {
  padding: 18px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  vertical-align: middle;
}

.orders-table-modern tbody tr {
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.orders-table-modern tbody tr:hover {
  background: #fffaf4;
}

.orders-ref-cell,
.orders-listing-cell,
.orders-items-cell,
.orders-payment-cell,
.orders-total-cell,
.orders-fulfilment-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.orders-reference {
  display: inline-flex;
  width: max-content;
  max-width: 185px;
  overflow: hidden;
  color: var(--tour-blue-dark, #06596a);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-reference:hover {
  color: var(--tour-orange, #ff5a00);
}

.orders-ref-cell small,
.orders-listing-cell small,
.orders-items-cell small,
.orders-payment-cell small,
.orders-total-cell small,
.orders-fulfilment-cell small,
.orders-customer-cell small {
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  line-height: 1.45;
}

.orders-customer-cell {
  min-width: 215px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.orders-customer-cell > span {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(145, 242, 12, 0.65),
      transparent 23%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.1);
  font:
    700 16px Georgia,
    serif;
}

.orders-customer-cell div,
.orders-listing-cell {
  min-width: 0;
}

.orders-customer-cell strong,
.orders-listing-cell strong,
.orders-items-cell strong,
.orders-total-cell strong {
  color: var(--tour-dark, #241607);
  font-size: 12px;
}

.orders-customer-cell strong,
.orders-listing-cell strong {
  display: block;
  overflow: hidden;
  max-width: 230px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-listing-cell i {
  display: inline-flex;
  margin-left: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--tour-blue-dark, #06596a);
  background: #eefbfe;
  font-style: normal;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.orders-items-with-media {
  min-width: 150px;
  flex-direction: row;
  align-items: center;
  gap: 11px;
}

.orders-item-thumbs {
  min-width: 58px;
  display: flex;
  align-items: center;
}

.orders-item-thumb,
.orders-item-more {
  width: 38px;
  height: 38px;
  flex: none;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 13px;
  background: #fff0e3;
  box-shadow: 0 9px 20px rgba(45, 25, 8, 0.12);
}

.orders-item-thumb + .orders-item-thumb,
.orders-item-more {
  margin-left: -16px;
}

.orders-item-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.orders-item-thumb.fallback,
.orders-item-more {
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.55),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  font-weight: 900;
}

.orders-item-thumb.fallback {
  font:
    700 14px Georgia,
    serif;
}

.orders-item-more {
  font-size: 10px;
  letter-spacing: 0;
}

.orders-items-cell strong,
.orders-total-cell strong {
  font:
    700 18px/1.1 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.orders-payment-cell .status-pill {
  width: max-content;
}

.orders-state-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.orders-state-pill.pending {
  color: #9b5300;
  background: #fff2d7;
}

.orders-state-pill.confirmed {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #18aac4);
}

.orders-state-pill.preparing {
  color: #ffffff;
  background: linear-gradient(135deg, #f09000, #ffb02e);
}

.orders-state-pill.ready {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #d7ff63);
}

.orders-state-pill.completed {
  color: #ffffff;
  background: linear-gradient(135deg, #2f8f24, #68bf2b);
}

.orders-state-pill.cancelled {
  color: #ffffff;
  background: linear-gradient(135deg, #4d2a17, #8a4c25);
}

.orders-progress-track {
  display: grid;
  grid-template-columns: repeat(5, 16px);
  gap: 4px;
  margin-top: 2px;
}

.orders-progress-track i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: #f0dfcf;
}

.orders-progress-track i.done {
  background: linear-gradient(
    90deg,
    var(--tour-orange, #ff5a00),
    var(--tour-green, #91f20c)
  );
}

.orders-row-actions {
  display: flex;
  justify-content: flex-end;
}

.orders-row-actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #19aeca);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(11, 143, 168, 0.14);
}

.orders-row-actions a:hover {
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7a1a);
}

.orders-empty-state {
  display: grid;
  place-items: center;
  padding: 46px 20px;
  text-align: center;
}

.orders-empty-state span {
  font-size: 44px;
}

.orders-empty-state h3 {
  margin: 12px 0 6px;
  color: var(--tour-dark, #241607);
  font:
    650 24px/1.2 Georgia,
    serif;
}

.orders-empty-state p {
  max-width: 440px;
  margin: 0 0 18px;
  color: var(--admin-muted, #776b5f);
  font-size: 12px;
  line-height: 1.6;
}

.orders-empty-state a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7a1a);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 1280px) {
  .orders-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .orders-search-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .orders-hero {
    grid-template-columns: 1fr;
  }

  .orders-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orders-panel-head {
    grid-template-columns: 1fr;
  }

  .orders-mini-metrics {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .orders-hero {
    padding: 28px 23px;
    border-radius: 22px;
  }

  .orders-stat-grid,
  .orders-filter-bar {
    grid-template-columns: 1fr;
  }

  .orders-panel-head,
  .orders-filter-bar,
  .orders-status-strip {
    padding-left: 18px;
    padding-right: 18px;
  }

  .orders-mini-metrics {
    display: grid;
    grid-template-columns: 1fr;
  }

  .orders-filter-bar button,
  .orders-clear-filter {
    width: 100%;
  }
}
/* =========================================================
   TourTobago Admin - Order details redesign
   Page: /admin/orders/{order_ref}
   ========================================================= */

.tour-order-detail-back {
  margin-bottom: 16px;
}

.tour-order-detail-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 999px;
  color: var(--tour-orange, #ff5a00);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 26px rgba(45, 25, 8, 0.06);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tour-order-detail-back a:hover {
  transform: translateY(-1px);
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7b1a);
  box-shadow: 0 16px 32px rgba(255, 90, 0, 0.2);
}

.tour-order-detail-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.2);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 86% 14%,
      rgba(145, 242, 12, 0.56),
      transparent 18%
    ),
    radial-gradient(
      circle at 12% 95%,
      rgba(11, 143, 168, 0.68),
      transparent 31%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ed4e00 45%, #0b7188 100%);
  box-shadow: 0 24px 60px rgba(255, 90, 0, 0.18);
}

.tour-order-detail-hero::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -145px;
  top: -185px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 48% 52% 61% 39%;
  box-shadow:
    0 0 0 56px rgba(255, 255, 255, 0.035),
    0 0 0 118px rgba(255, 255, 255, 0.025);
  transform: rotate(19deg);
}

.tour-order-detail-hero::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 52px;
  left: 38px;
  bottom: -23px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  filter: blur(1px);
}

.tour-order-detail-copy,
.tour-order-detail-status-stack {
  position: relative;
  z-index: 1;
}

.tour-order-detail-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-order-detail-hero h2 {
  overflow-wrap: anywhere;
  margin: 0;
  font:
    650 clamp(25px, 3vw, 40px)/1.05 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tour-order-detail-hero p {
  max-width: 720px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tour-order-detail-hero p strong {
  color: #ffffff;
}

.tour-order-detail-status-stack {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.tour-order-status-pill,
.tour-order-payment-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.tour-order-status-pill.pending {
  color: #7b4b00;
  background: #fff4cf;
}

.tour-order-status-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16b6d1);
}

.tour-order-status-pill.completed {
  color: #264c00;
  background: linear-gradient(135deg, #91f20c, #d9ff68);
}

.tour-order-status-pill.cancelled {
  color: #ffffff;
  background: linear-gradient(135deg, #e14d2a, #ff7b52);
}

.tour-order-payment-pill.paid {
  color: #264c00;
  background: rgba(233, 255, 204, 0.96);
}

.tour-order-payment-pill.unpaid {
  color: #7b4b00;
  background: rgba(255, 244, 207, 0.96);
}

.tour-order-payment-pill.refunded {
  color: #154f61;
  background: rgba(224, 248, 252, 0.96);
}

.tour-order-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-order-detail-metric {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  column-gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
}

.tour-order-detail-metric::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -30px;
  top: -34px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.07);
}

.tour-order-detail-metric .metric-icon {
  grid-area: icon;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 950;
}

.tour-order-detail-metric .metric-icon.orange {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8730);
}

.tour-order-detail-metric .metric-icon.blue {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #20bdd8);
}

.tour-order-detail-metric .metric-icon.green {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #d6ff5b);
}

.tour-order-detail-metric .metric-icon.dark {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tour-order-detail-metric small {
  grid-area: label;
  align-self: end;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-order-detail-metric strong {
  grid-area: value;
  align-self: start;
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font:
    650 21px/1.15 Georgia,
    serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 18px;
}

.tour-order-detail-main,
.tour-order-detail-side {
  display: grid;
  gap: 18px;
}

.tour-order-progress-panel,
.tour-order-lines-panel,
.tour-order-context-panel,
.tour-order-customer-card,
.tour-order-operations-card {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-order-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 44%), #ffffff;
}

.tour-order-section-heading h2 {
  margin: 4px 0 0;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.18 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-order-section-heading > strong,
.tour-order-type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #15aac5);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tour-order-type-chip {
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7b1a);
}

.tour-order-progress-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 28px 24px 20px;
}

.tour-order-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #9a897b;
  text-align: center;
}

.tour-order-step::before,
.tour-order-step::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 50%;
  height: 3px;
  background: #ffe1c5;
}

.tour-order-step::before {
  left: 0;
}

.tour-order-step::after {
  right: 0;
}

.tour-order-step:first-child::before,
.tour-order-step:last-child::after {
  display: none;
}

.tour-order-step.done::before,
.tour-order-step.done::after,
.tour-order-step.current::before {
  background: linear-gradient(90deg, var(--tour-orange, #ff5a00), #ff9b45);
}

.tour-order-step span {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid #ffe1c5;
  border-radius: 999px;
  color: #8c7562;
  background: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.tour-order-step.done span {
  border-color: var(--tour-orange, #ff5a00);
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7b1a);
}

.tour-order-step.current span {
  border-color: var(--tour-green, #91f20c);
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dcff6b);
  box-shadow: 0 0 0 6px rgba(145, 242, 12, 0.18);
}

.tour-order-step strong {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-order-progress-track.cancelled .tour-order-step span {
  border-color: #ffd0c4;
  color: #bf3d20;
  background: #fff3ef;
}

.tour-order-progress-note {
  margin: 0 24px 24px;
  padding: 13px 15px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 14px;
  color: #276879;
  background: #f2fbfd;
  font-size: 11px;
  line-height: 1.55;
}

.tour-order-progress-note.completed {
  color: #3b6908;
  border-color: rgba(145, 242, 12, 0.3);
  background: #f4ffe7;
}

.tour-order-progress-note.cancelled {
  color: #a6381d;
  border-color: rgba(225, 77, 42, 0.22);
  background: #fff1ec;
}

.tour-order-lines-list {
  display: grid;
  gap: 12px;
  padding: 18px 24px 0;
}

.tour-order-line-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 90, 0, 0.11);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.045), transparent 45%), #fffdf9;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.tour-order-line-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 90, 0, 0.24);
  box-shadow: 0 14px 30px rgba(45, 25, 8, 0.08);
}

.tour-order-line-photo,
.tour-order-line-photo img,
.tour-order-line-photo span {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.tour-order-line-photo {
  overflow: hidden;
  flex: none;
  background: #fff0e3;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.1);
}

.tour-order-line-photo img {
  display: block;
  object-fit: cover;
}

.tour-order-line-photo span {
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  font:
    700 20px Georgia,
    serif;
}

.tour-order-line-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.tour-order-line-body strong {
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-order-line-body small {
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  line-height: 1.5;
}

.tour-order-line-total {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 112px;
}

.tour-order-line-total span {
  color: var(--admin-muted, #776b5f);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tour-order-line-total b {
  color: var(--tour-blue-dark, #06596a);
  font:
    650 16px/1 Georgia,
    serif;
}

.tour-order-total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 24px 24px;
  padding: 18px 20px;
  border-radius: 18px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(145, 242, 12, 0.55),
      transparent 22%
    ),
    linear-gradient(135deg, #241607, #0b7188);
  box-shadow: 0 16px 35px rgba(11, 113, 136, 0.16);
}

.tour-order-total-box span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-order-total-box strong {
  font:
    650 23px/1 Georgia,
    serif;
  white-space: nowrap;
}

.tour-order-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 20px 24px 24px;
}

.tour-order-info-grid div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(11, 143, 168, 0.12);
  border-radius: 16px;
  background: #f9fdfe;
}

.tour-order-info-grid span,
.tour-order-info-grid small {
  display: block;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-order-info-grid strong {
  display: block;
  overflow-wrap: anywhere;
  margin: 7px 0 6px;
  color: var(--tour-dark, #241607);
  font-size: 12px;
  line-height: 1.45;
}

.tour-order-info-grid small {
  color: var(--tour-blue, #0b8fa8);
  font-size: 8px;
}

.tour-order-customer-card,
.tour-order-operations-card {
  padding: 22px;
}

.tour-order-customer-card {
  text-align: center;
}

.tour-order-customer-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin: 12px auto 14px;
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(145, 242, 12, 0.72),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  box-shadow: 0 16px 34px rgba(255, 90, 0, 0.17);
  font:
    700 34px Georgia,
    serif;
}

.tour-order-customer-card h3 {
  margin: 0 0 14px;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.2 Georgia,
    serif;
}

.tour-order-contact-list {
  display: grid;
  gap: 9px;
  margin: 0 0 14px;
}

.tour-order-contact-list a,
.tour-order-contact-list span,
.tour-order-chat-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 13px;
  background: #fff7ef;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.tour-order-contact-list a:hover,
.tour-order-chat-link:hover {
  color: var(--tour-orange, #ff5a00);
  background: #fff0e3;
}

.tour-order-chat-link {
  min-height: 44px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #16b1cc);
  font-weight: 900;
}

.tour-order-chat-link:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #076172, var(--tour-blue, #0b8fa8));
}

.tour-order-operations-card h3 {
  margin: 6px 0 8px;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.2 Georgia,
    serif;
}

.tour-order-operations-card > p {
  margin: 0 0 18px;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.65;
}

.tour-order-status-form {
  display: grid;
  gap: 14px;
}

.tour-order-status-form label {
  display: grid;
  gap: 7px;
}

.tour-order-status-form label > span {
  color: var(--tour-dark, #241607);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-order-status-form select,
.tour-order-status-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 14px;
  color: var(--tour-dark, #241607);
  background: #fffaf4;
  font-size: 12px;
  outline: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tour-order-status-form select {
  min-height: 46px;
  padding: 0 13px;
}

.tour-order-status-form textarea {
  min-height: 112px;
  resize: vertical;
  padding: 13px;
  line-height: 1.6;
}

.tour-order-status-form select:focus,
.tour-order-status-form textarea:focus {
  border-color: rgba(11, 143, 168, 0.42);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(11, 143, 168, 0.1);
}

.tour-order-tip-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(145, 242, 12, 0.5),
      transparent 22%
    ),
    linear-gradient(135deg, #241607, #0b7188);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.12);
}

.tour-order-tip-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dcff6b);
  font-weight: 950;
}

.tour-order-tip-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.tour-order-tip-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .tour-order-detail-grid {
    grid-template-columns: 1fr;
  }

  .tour-order-detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .tour-order-tip-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .tour-order-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-order-detail-hero {
    grid-template-columns: 1fr;
  }

  .tour-order-detail-status-stack {
    justify-items: start;
    grid-template-columns: repeat(2, max-content);
  }

  .tour-order-progress-track {
    overflow-x: auto;
    grid-template-columns: repeat(5, 120px);
    padding-bottom: 22px;
  }
}

@media (max-width: 720px) {
  .tour-order-detail-hero {
    padding: 28px 24px;
  }

  .tour-order-detail-hero h2 {
    font-size: 24px;
  }

  .tour-order-detail-metrics,
  .tour-order-info-grid,
  .tour-order-detail-side {
    grid-template-columns: 1fr;
  }

  .tour-order-detail-status-stack {
    grid-template-columns: 1fr;
  }

  .tour-order-status-pill,
  .tour-order-payment-pill {
    width: 100%;
  }

  .tour-order-line-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .tour-order-line-photo,
  .tour-order-line-photo img,
  .tour-order-line-photo span {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .tour-order-line-total {
    grid-column: 1 / -1;
    justify-items: stretch;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 90, 0, 0.1);
  }

  .tour-order-line-total b {
    font-size: 18px;
  }

  .tour-order-total-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .tour-order-total-box strong {
    white-space: normal;
  }
}
/* =========================================================
   TourTobago Admin Users Directory
   Applies to: /admin/users
   ========================================================= */

.tt-users-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 14px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(145, 242, 12, 0.58),
      transparent 18%
    ),
    radial-gradient(
      circle at 7% 100%,
      rgba(11, 143, 168, 0.68),
      transparent 29%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ec4f00 48%, #075c70 100%);
  box-shadow: 0 24px 60px rgba(255, 90, 0, 0.18);
}

.tt-users-hero::before {
  content: "";
  position: absolute;
  right: -130px;
  top: -170px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.024);
  transform: rotate(23deg);
}

.tt-users-hero-copy,
.tt-users-hero-actions {
  position: relative;
  z-index: 1;
}

.tt-users-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-users-hero h2 {
  margin: 0;
  color: #ffffff;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tt-users-hero p {
  max-width: 670px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tt-users-add-button {
  min-width: 150px;
  justify-content: center;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.tt-users-add-button:hover {
  color: #241607;
  background: linear-gradient(135deg, #7be000, #cfff3d);
}

.tt-users-note-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(11, 143, 168, 0.07), transparent),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(45, 25, 8, 0.05);
}

.tt-users-note-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #12b4cf);
  font-weight: 900;
}

.tt-users-note-card p {
  margin: 0;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.65;
}

.tt-users-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tt-users-stat {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 19px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
  text-decoration: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tt-users-stat:hover,
.tt-users-stat.active {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.32);
  box-shadow: 0 18px 42px rgba(255, 90, 0, 0.11);
}

.tt-users-stat.active {
  background:
    linear-gradient(135deg, rgba(255, 90, 0, 0.09), rgba(145, 242, 12, 0.1)),
    #ffffff;
}

.tt-users-stat-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
}

.tt-users-stat-icon.total {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.tt-users-stat-icon.customer {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.tt-users-stat-icon.owner {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tt-users-stat-icon.unverified {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tt-users-stat strong {
  display: block;
  color: #241607;
  font:
    650 28px/1 Georgia,
    serif;
}

.tt-users-stat small {
  display: block;
  margin-top: 6px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-users-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tt-users-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 48%), #ffffff;
}

.tt-users-panel-title {
  margin: 0;
  color: #241607;
  font:
    650 20px/1.2 Georgia,
    serif;
}

.tt-users-panel-subtitle {
  margin: 6px 0 0;
  color: #776b5f;
  font-size: 11px;
}

.tt-users-result-chip {
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 999px;
  color: #076172;
  background: #f0fbfd;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-user-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 190px 190px auto auto;
  gap: 12px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  background: #fffaf4;
}

.tt-user-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 15px;
  background: #ffffff;
}

.tt-user-search span {
  color: #0b8fa8;
  font-size: 20px;
  transform: rotate(-15deg);
}

.tt-user-search input,
.tt-user-filters select {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font-size: 12px;
}

.tt-user-filters select {
  padding: 0 13px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 15px;
  background: #ffffff;
}

.tt-user-filters button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tt-user-filters button:hover {
  background: linear-gradient(135deg, #076172, #0b8fa8);
}

.tt-user-clear {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 15px;
  color: #ff5a00;
  background: #fff0e6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-users-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  background: #ffffff;
}

.tt-users-active-filters span {
  display: inline-flex;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #776b5f;
  background: #fff6eb;
  font-size: 10px;
  font-weight: 750;
}

.tt-users-active-filters b {
  color: #241607;
}

.tt-users-table {
  min-width: 1000px;
}

.tt-users-table th {
  padding: 14px 20px;
  color: #7f6e60;
  background: #fff6eb;
}

.tt-users-table td {
  padding: 18px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  vertical-align: middle;
}

.tt-users-table tbody tr {
  transition: background 0.18s ease;
}

.tt-users-table tbody tr:hover {
  background: #fffaf4;
}

.tt-user-profile-cell {
  min-width: 245px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.tt-user-avatar {
  width: 50px;
  height: 50px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.65),
      transparent 23%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.12);
  font:
    700 18px Georgia,
    serif;
}

.tt-user-profile-cell div,
.tt-user-type-cell,
.tt-user-contact-cell,
.tt-user-activity-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tt-user-profile-cell a {
  color: #241607;
  font-size: 12px;
  font-weight: 900;
}

.tt-user-profile-cell a:hover {
  color: #ff5a00;
}

.tt-user-profile-cell small,
.tt-user-type-cell small,
.tt-user-contact-cell small,
.tt-user-activity-cell small {
  color: #776b5f;
  font-size: 10px;
}

.tt-account-pill,
.tt-verification-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tt-account-pill.customer,
.tt-account-pill.customers {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
}

.tt-account-pill.owner,
.tt-account-pill.owners {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tt-account-pill:not(.customer):not(.customers):not(.owner):not(.owners) {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8126);
}

.tt-user-contact-cell a {
  overflow: hidden;
  max-width: 230px;
  color: #076172;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-user-contact-cell strong,
.tt-user-activity-cell span {
  color: #241607;
  font-size: 11px;
}

.tt-user-activity-cell b {
  color: #241607;
  font-size: 13px;
}

.tt-verification-pill.verified {
  color: #3b6908;
  background: #efffdb;
}

.tt-verification-pill.unverified {
  color: #9a4100;
  background: #fff0df;
}

.tt-user-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tt-user-row-actions a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
}

.tt-user-row-actions a:first-child {
  color: #0b8fa8;
  background: #eefbfe;
}

.tt-user-row-actions a:first-child:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.tt-user-row-actions a:last-child {
  color: #ff5a00;
  background: #fff0e6;
}

.tt-user-row-actions a:last-child:hover {
  color: #ffffff;
  background: #ff5a00;
}

.tt-users-empty-state {
  display: grid;
  place-items: center;
  padding: 48px 20px;
  text-align: center;
}

.tt-users-empty-state span {
  font-size: 42px;
}

.tt-users-empty-state h3 {
  margin: 12px 0 6px;
  color: #241607;
  font:
    650 24px/1.2 Georgia,
    serif;
}

.tt-users-empty-state p {
  max-width: 440px;
  margin: 0 0 18px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.6;
}

.tt-users-table-note {
  margin: 0;
  padding: 14px 24px 20px;
  color: #776b5f;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .tt-users-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-user-filters {
    grid-template-columns: 1fr 1fr;
  }

  .tt-user-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .tt-users-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .tt-users-hero-actions .admin-button {
    width: 100%;
  }

  .tt-users-note-card,
  .tt-users-stats {
    grid-template-columns: 1fr;
  }

  .tt-users-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tt-user-filters {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .tt-user-clear,
  .tt-user-filters button {
    width: 100%;
  }
}
/* =========================================================
   TourTobago Admin - User Details page redesign
   Applies to: /admin/users/{id}
   ========================================================= */

.tt-user-show-back {
  margin: 0 0 16px;
}

.tt-user-show-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 999px;
  color: var(--tour-orange, #ff5a00);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 22px rgba(45, 25, 8, 0.05);
  font-size: 10px;
  font-weight: 850;
}

.tt-user-show-back a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7b1a);
}

.tt-user-show-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 205px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(145, 242, 12, 0.45),
      transparent 18%
    ),
    radial-gradient(
      circle at 9% 92%,
      rgba(11, 143, 168, 0.58),
      transparent 30%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ed4e00 48%, #0a7187 100%);
  box-shadow: 0 22px 58px rgba(255, 90, 0, 0.18);
}

.tt-user-show-hero.owner {
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(145, 242, 12, 0.48),
      transparent 18%
    ),
    radial-gradient(
      circle at 11% 90%,
      rgba(11, 143, 168, 0.62),
      transparent 30%
    ),
    linear-gradient(135deg, #ff5a00 0%, #f05b08 44%, #074f61 100%);
}

.tt-user-show-hero.customer {
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(145, 242, 12, 0.38),
      transparent 18%
    ),
    radial-gradient(
      circle at 11% 92%,
      rgba(255, 255, 255, 0.17),
      transparent 28%
    ),
    linear-gradient(135deg, #0b8fa8 0%, #0a7187 44%, #ff5a00 100%);
}

.tt-user-show-hero::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -145px;
  top: -190px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 45% 55% 60% 40%;
  box-shadow:
    0 0 0 52px rgba(255, 255, 255, 0.035),
    0 0 0 108px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.tt-user-show-hero::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -42px;
  width: 150px;
  height: 85px;
  border-radius: 90% 90% 0 0;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(0.2px);
}

.tt-user-show-avatar-wrap,
.tt-user-show-copy,
.tt-user-show-actions {
  position: relative;
  z-index: 1;
}

.tt-user-show-avatar-wrap {
  position: relative;
}

.tt-user-show-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 26px;
  color: #241607;
  background:
    radial-gradient(circle at 78% 14%, #ffffff 0 12%, transparent 13%),
    linear-gradient(135deg, var(--tour-green, #91f20c), #e0ff64);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  font:
    750 31px/1 Georgia,
    serif;
}

.tt-user-show-live-dot {
  position: absolute;
  right: -2px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: #fbbf24;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.tt-user-show-live-dot.verified {
  background: var(--tour-green, #91f20c);
}

.tt-user-show-live-dot.unverified {
  background: #ffb14a;
}

.tt-user-show-kicker,
.tt-user-show-mini-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-user-show-kicker {
  margin-bottom: 10px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fffbd5;
  background: rgba(0, 0, 0, 0.13);
}

.tt-user-show-copy h2 {
  margin: 0;
  font:
    700 clamp(29px, 3vw, 44px)/1.02 Georgia,
    serif;
  letter-spacing: -0.04em;
}

.tt-user-show-copy p {
  max-width: 620px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.tt-user-show-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.tt-user-show-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff5d4;
  background: rgba(255, 255, 255, 0.12);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tt-user-show-status.verified {
  color: #efffdd;
}

.tt-user-show-edit {
  color: #241607 !important;
  background: linear-gradient(
    135deg,
    var(--tour-green, #91f20c),
    #dfff62
  ) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16) !important;
}

.tt-user-show-edit:hover {
  background: linear-gradient(135deg, #7be000, #cfff3d) !important;
}

.tt-user-show-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tt-user-show-stat {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(45, 25, 8, 0.06);
}

.tt-user-show-stat::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -48px;
  top: -42px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.06);
}

.tt-user-show-stat-icon {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
}

.tt-user-show-stat-icon.orange {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8730);
}

.tt-user-show-stat-icon.blue {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #20bdd8);
}

.tt-user-show-stat-icon.green {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #d6ff5b);
}

.tt-user-show-stat-icon.dark {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tt-user-show-stat strong {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font:
    700 25px/1 Georgia,
    serif;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-user-show-stat small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 7px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-user-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 18px;
}

.tt-user-show-main,
.tt-user-show-side {
  display: grid;
  gap: 18px;
}

.tt-user-show-panel,
.tt-user-show-profile-card,
.tt-user-show-access-card,
.tt-user-show-about-card,
.tt-user-show-type-card {
  border-color: rgba(255, 90, 0, 0.15);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tt-user-show-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background: linear-gradient(90deg, rgba(255, 90, 0, 0.055), transparent 45%);
}

.tt-user-show-mini-kicker {
  margin-bottom: 8px;
  color: var(--tour-orange, #ff5a00);
}

.tt-user-show-panel-head h3,
.tt-user-show-profile-card h3,
.tt-user-show-access-card h3,
.tt-user-show-type-card h3 {
  margin: 0;
  color: var(--tour-dark, #241607);
  font:
    700 22px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.tt-user-show-panel-head p {
  max-width: 640px;
  margin: 7px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.6;
}

.tt-user-show-panel-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--tour-blue, #0b8fa8);
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.tt-user-show-panel-link:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #16a8c2);
}

.tt-user-show-table {
  min-width: 820px;
}

.tt-user-show-table th {
  padding: 14px 20px;
  color: #7f6e60;
  background: #fff6eb;
}

.tt-user-show-table td {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  vertical-align: middle;
}

.tt-user-show-table tbody tr:hover {
  background: #fffaf4;
}

.tt-user-show-table td > strong {
  color: var(--tour-dark, #241607);
  font-size: 11px;
}

.tt-user-show-listing-cell {
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tt-user-show-listing-cell > span {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.1);
  font:
    700 17px Georgia,
    serif;
}

.tt-user-show-listing-cell div,
.tt-user-show-order-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tt-user-show-listing-cell strong,
.tt-user-show-order-cell strong {
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-user-show-listing-cell small,
.tt-user-show-order-cell small {
  margin-top: 5px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
}

.tt-user-show-reference {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--tour-blue, #0b8fa8);
  background: #eefbfe;
  font-size: 10px;
  font-weight: 900;
}

.tt-user-show-reference:hover {
  color: #ffffff;
  background: var(--tour-blue, #0b8fa8);
}

.tt-user-show-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-user-show-chip.blue {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #15abc5);
}

.tt-user-show-chip.success {
  color: #346304;
  background: #efffdb;
}

.tt-user-show-chip.warning {
  color: #92400e;
  background: #fff3d3;
}

.tt-user-show-chip.featured {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #ddff64);
}

.tt-user-show-chip.muted {
  color: #806c58;
  background: #fff0df;
}

.tt-user-show-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-user-show-row-actions a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--tour-blue, #0b8fa8);
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
}

.tt-user-show-row-actions a:hover {
  color: #ffffff;
  background: var(--tour-blue, #0b8fa8);
}

.tt-user-show-empty {
  display: grid;
  place-items: center;
  text-align: center;
}

.tt-user-show-empty.compact {
  padding: 28px 18px;
}

.tt-user-show-empty span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: #fff4e9;
  font-size: 25px;
}

.tt-user-show-empty strong {
  color: var(--tour-dark, #241607);
  font:
    700 17px/1.2 Georgia,
    serif;
}

.tt-user-show-empty p {
  max-width: 360px;
  margin: 6px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.55;
}

.tt-user-show-profile-card,
.tt-user-show-access-card,
.tt-user-show-about-card,
.tt-user-show-type-card {
  padding: 24px;
}

.tt-user-show-profile-card {
  text-align: center;
}

.tt-user-show-profile-card .tt-user-show-mini-kicker {
  margin-left: auto;
  margin-right: auto;
}

.tt-user-show-profile-avatar {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 10px auto 13px;
  border-radius: 25px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 76% 20%,
      rgba(145, 242, 12, 0.7),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--tour-orange, #ff5a00),
      var(--tour-blue, #0b8fa8)
    );
  box-shadow: 0 16px 34px rgba(255, 90, 0, 0.17);
  font:
    700 29px Georgia,
    serif;
}

.tt-user-show-profile-card > p {
  margin: 7px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-user-show-contact-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  text-align: left;
}

.tt-user-show-contact-list a,
.tt-user-show-contact-list div {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 15px;
  background: #f7fcfd;
}

.tt-user-show-contact-list a:hover {
  border-color: rgba(255, 90, 0, 0.25);
  background: #fffaf4;
}

.tt-user-show-contact-list span {
  color: var(--admin-muted, #776b5f);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tt-user-show-contact-list strong {
  color: var(--tour-dark, #241607);
  font-size: 10px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tt-user-show-access-card {
  position: relative;
  overflow: hidden;
}

.tt-user-show-access-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -45px;
  top: -45px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.07);
}

.tt-user-show-access-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 17px;
  font-size: 22px;
  font-weight: 900;
}

.tt-user-show-access-icon.verified {
  color: #326109;
  background: linear-gradient(135deg, #efffdb, #d9ff8f);
}

.tt-user-show-access-icon.unverified {
  color: #9a3b00;
  background: linear-gradient(135deg, #fff0df, #ffd9ba);
}

.tt-user-show-access-card h3,
.tt-user-show-access-card p,
.tt-user-show-access-card form,
.tt-user-show-access-card .tt-user-show-mini-kicker {
  position: relative;
  z-index: 1;
}

.tt-user-show-access-card p,
.tt-user-show-about-card p,
.tt-user-show-type-card p {
  margin: 9px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.65;
}

.tt-user-show-verification-form {
  margin-top: 18px;
}

.tt-user-show-verification-form button {
  width: 100%;
  justify-content: center;
}

.tt-user-show-about-card p {
  margin-top: 0;
}

.tt-user-show-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 90, 0, 0.12);
}

.tt-user-show-socials a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--tour-blue, #0b8fa8);
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
}

.tt-user-show-socials a:hover {
  color: #ffffff;
  background: var(--tour-blue, #0b8fa8);
}

.tt-user-show-type-card {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(145, 242, 12, 0.45),
      transparent 24%
    ),
    linear-gradient(135deg, #271305, #074f61);
}

.tt-user-show-type-card.owner {
  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(145, 242, 12, 0.48),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #074f61);
}

.tt-user-show-type-card.customer {
  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(145, 242, 12, 0.4),
      transparent 24%
    ),
    linear-gradient(135deg, #0b8fa8, #241607);
}

.tt-user-show-type-card span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  color: #fffbd5;
  background: rgba(0, 0, 0, 0.13);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tt-user-show-type-card h3 {
  color: #ffffff;
}

.tt-user-show-type-card p {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1180px) {
  .tt-user-show-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-user-show-grid {
    grid-template-columns: 1fr;
  }

  .tt-user-show-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tt-user-show-hero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 30px 28px;
  }

  .tt-user-show-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .tt-user-show-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 22px;
  }

  .tt-user-show-avatar {
    width: 70px;
    height: 70px;
    border-radius: 22px;
  }

  .tt-user-show-copy h2 {
    font-size: 30px;
  }

  .tt-user-show-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .tt-user-show-status,
  .tt-user-show-actions .admin-button {
    width: 100%;
  }

  .tt-user-show-stats,
  .tt-user-show-side {
    grid-template-columns: 1fr;
  }

  .tt-user-show-panel-head {
    flex-direction: column;
    padding: 20px;
  }

  .tt-user-show-panel-link {
    width: 100%;
  }

  .tt-user-show-profile-card,
  .tt-user-show-access-card,
  .tt-user-show-about-card,
  .tt-user-show-type-card {
    padding: 20px;
  }
}
/* =========================================================
   TourTobago Admin Chats Index
   Orange island + blue sea + green notification theme
   ========================================================= */

.tour-chat-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(145, 242, 12, 0.55),
      transparent 18%
    ),
    radial-gradient(
      circle at 14% 100%,
      rgba(11, 143, 168, 0.7),
      transparent 34%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ef4f00 45%, #076172 100%);
  box-shadow: 0 22px 55px rgba(255, 90, 0, 0.18);
}

.tour-chat-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -135px;
  top: -175px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.tour-chat-hero-copy,
.tour-chat-hero-actions {
  position: relative;
  z-index: 1;
}

.tour-chat-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-chat-hero h2 {
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tour-chat-hero p {
  max-width: 670px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tour-chat-new-button {
  min-width: 180px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.tour-chat-new-button:hover {
  background: linear-gradient(135deg, #7be000, #cfff3d);
}

.tour-chat-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-chat-stat-card {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 18px;
  color: inherit;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.tour-chat-stat-card:hover,
.tour-chat-stat-card.active {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.3);
  box-shadow: 0 18px 42px rgba(255, 90, 0, 0.12);
}

.tour-chat-stat-card.active::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #91f20c;
  box-shadow: 0 0 0 5px rgba(145, 242, 12, 0.16);
}

.tour-chat-stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 900;
}

.tour-chat-stat-icon.all {
  color: #fff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.tour-chat-stat-icon.open {
  color: #fff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.tour-chat-stat-icon.unread {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tour-chat-stat-icon.listing {
  color: #fff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tour-chat-stat-card strong {
  display: block;
  color: #241607;
  font:
    650 28px/1 Georgia,
    serif;
}

.tour-chat-stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tour-chat-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-chat-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(460px, 720px);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 42%), #fff;
}

.tour-chat-toolbar-title {
  margin: 0;
  color: #241607;
  font:
    650 20px/1.2 Georgia,
    serif;
}

.tour-chat-toolbar-subtitle {
  margin: 6px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
}

.tour-chat-filters {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 170px 150px auto;
  gap: 9px;
  align-items: center;
}

.tour-chat-search {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 14px;
  background: #f8fcfd;
}

.tour-chat-search span {
  color: #0b8fa8;
  font-size: 18px;
  transform: rotate(-15deg);
}

.tour-chat-search input,
.tour-chat-filters select {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font: inherit;
  font-size: 11px;
}

.tour-chat-filters select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 14px;
  background: #f8fcfd;
}

.tour-chat-filters button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.tour-chat-filters button:hover {
  background: linear-gradient(135deg, #076172, #0b8fa8);
}

.tour-chat-subbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  color: var(--admin-muted, #776b5f);
  background: #fffaf4;
  font-size: 10px;
  font-weight: 750;
}

.tour-chat-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tour-chat-result-meta span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tour-chat-result-meta span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.36);
}

.tour-chat-subbar a {
  color: #ff5a00;
}

.tour-chat-list {
  display: grid;
}

.tour-chat-row {
  position: relative;
  min-height: 118px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  color: inherit;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  background: rgba(255, 255, 255, 0.88);
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.tour-chat-row:first-child {
  border-top: 0;
}

.tour-chat-row:hover {
  z-index: 1;
  transform: translateY(-1px);
  background: #fffaf4;
  box-shadow: 0 14px 30px rgba(45, 25, 8, 0.07);
}

.tour-chat-row.has-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #91f20c, #ff5a00);
}

.tour-chat-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(
      circle at 74% 18%,
      rgba(145, 242, 12, 0.65),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  font:
    700 19px Georgia,
    serif;
  box-shadow: 0 12px 26px rgba(45, 25, 8, 0.12);
}

.tour-chat-avatar.owner-support {
  background: linear-gradient(135deg, #241607, #ff5a00);
}

.tour-chat-avatar.listing-inquiry {
  background: linear-gradient(135deg, #0b8fa8, #16bdd8);
}

.tour-chat-main {
  min-width: 0;
  display: block;
}

.tour-chat-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.tour-chat-title-line b {
  overflow: hidden;
  color: #241607;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-chat-type {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  color: #0b6374;
  background: #e9fbff;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-chat-type.owner-support {
  color: #8b3b00;
  background: #fff0e4;
}

.tour-chat-type.listing-inquiry {
  color: #365f05;
  background: #f0ffdc;
}

.tour-chat-main small {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-chat-main small span {
  color: rgba(255, 90, 0, 0.6);
}

.tour-chat-main p {
  overflow: hidden;
  margin: 10px 0 0;
  color: #655245;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-chat-meta {
  min-width: 104px;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.tour-chat-meta time {
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 750;
}

.tour-chat-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-chat-status.open {
  color: #365f05;
  background: #f0ffdc;
}

.tour-chat-status.closed {
  color: #0b6374;
  background: #e9fbff;
}

.tour-chat-status.archived {
  color: #7a6048;
  background: #f5eadf;
}

.tour-chat-meta > b {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(145, 242, 12, 0.23);
}

.tour-chat-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 46px 20px;
  text-align: center;
}

.tour-chat-empty > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(145, 242, 12, 0.55),
      transparent 28%
    ),
    linear-gradient(135deg, rgba(255, 90, 0, 0.14), rgba(11, 143, 168, 0.16));
  font-size: 34px;
}

.tour-chat-empty h3 {
  margin: 16px 0 7px;
  color: #241607;
  font:
    650 24px/1.2 Georgia,
    serif;
}

.tour-chat-empty p {
  max-width: 430px;
  margin: 0 0 18px;
  color: var(--admin-muted, #776b5f);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .tour-chat-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-chat-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .tour-chat-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .tour-chat-hero-actions .admin-button {
    width: 100%;
  }

  .tour-chat-filters {
    grid-template-columns: 1fr;
  }

  .tour-chat-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .tour-chat-meta {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .tour-chat-stats {
    grid-template-columns: 1fr;
  }

  .tour-chat-toolbar,
  .tour-chat-subbar,
  .tour-chat-row {
    padding-left: 18px;
    padding-right: 18px;
  }

  .tour-chat-subbar {
    flex-direction: column;
  }

  .tour-chat-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}
/* =========================================================
   TourTobago Admin Chat Compose
   /admin/chats/new
   ========================================================= */

.tour-compose-back-row {
  margin-bottom: 17px;
}

.tour-compose-back-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 999px;
  color: #d84400;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.05);
}

.tour-compose-back-row a:hover {
  color: #fff;
  border-color: rgba(255, 90, 0, 0.38);
  background: linear-gradient(135deg, #ff5a00, #ff7a1a);
}

.tour-compose-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(145, 242, 12, 0.55),
      transparent 18%
    ),
    radial-gradient(
      circle at 14% 100%,
      rgba(11, 143, 168, 0.7),
      transparent 34%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ef4f00 45%, #076172 100%);
  box-shadow: 0 22px 55px rgba(255, 90, 0, 0.18);
}

.tour-compose-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -135px;
  top: -175px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.tour-compose-hero-copy,
.tour-compose-hero-card {
  position: relative;
  z-index: 1;
}

.tour-compose-kicker,
.tour-compose-overline {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-compose-kicker {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
}

.tour-compose-overline {
  margin: 0 0 8px;
  color: #ff5a00;
  background: #fff1e7;
}

.tour-compose-hero h2 {
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tour-compose-hero p {
  max-width: 690px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tour-compose-hero-card {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tour-compose-hero-card span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  font-size: 21px;
  font-weight: 900;
}

.tour-compose-hero-card strong {
  margin-top: 12px;
  color: #fff;
  font:
    650 34px/1 Georgia,
    serif;
}

.tour-compose-hero-card small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-compose-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-compose-stat-card {
  min-height: 106px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
}

.tour-compose-stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 900;
}

.tour-compose-stat-icon.orange {
  color: #fff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.tour-compose-stat-icon.blue {
  color: #fff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.tour-compose-stat-icon.green {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tour-compose-stat-card strong {
  display: block;
  color: #241607;
  font:
    650 28px/1 Georgia,
    serif;
}

.tour-compose-stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tour-compose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
}

.tour-compose-main-card,
.tour-compose-send-card,
.tour-compose-tip-card {
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-compose-main-card {
  overflow: hidden;
}

.tour-compose-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 42%), #fff;
}

.tour-compose-card-heading h3,
.tour-compose-send-card h3 {
  margin: 0;
  color: #241607;
  font:
    650 24px/1.14 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tour-compose-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: #076172;
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tour-compose-errors {
  display: grid;
  gap: 7px;
  margin: 20px 24px 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 90, 0, 0.24);
  border-radius: 14px;
  color: #982d00;
  background: #fff0e7;
  font-size: 11px;
  font-weight: 700;
}

.tour-compose-form-grid {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.tour-compose-field {
  display: flex;
  flex-direction: column;
}

.tour-compose-field-full {
  grid-column: 1 / -1;
}

.tour-compose-field label {
  margin-bottom: 8px;
  color: #241607;
  font-size: 12px;
  font-weight: 850;
}

.tour-compose-field label b {
  color: #ff5a00;
}

.tour-compose-field small {
  margin-top: 8px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  line-height: 1.55;
}

.tour-compose-select-shell,
.tour-compose-input-shell,
.tour-compose-message-shell {
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 16px;
  background: #f8fcfd;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tour-compose-select-shell:focus-within,
.tour-compose-input-shell:focus-within,
.tour-compose-message-shell:focus-within {
  border-color: rgba(255, 90, 0, 0.38);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.08);
}

.tour-compose-select-shell,
.tour-compose-input-shell {
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 0 14px 0 6px;
}

.tour-compose-select-shell > span,
.tour-compose-input-shell > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
  font-size: 14px;
}

.tour-compose-input-shell > span {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tour-compose-select-shell select,
.tour-compose-input-shell input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font: inherit;
  font-size: 12px;
}

.tour-compose-message-shell {
  overflow: hidden;
  background: linear-gradient(180deg, #f8fcfd, #fffaf4);
}

.tour-compose-message-shell textarea {
  width: 100%;
  min-height: 210px;
  padding: 18px;
  border: 0;
  outline: 0;
  resize: vertical;
  color: #241607;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.7;
}

.tour-compose-side {
  display: grid;
  gap: 14px;
}

.tour-compose-send-card {
  position: sticky;
  top: 96px;
  overflow: hidden;
  padding: 24px;
}

.tour-compose-send-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #ff5a00, #91f20c, #0b8fa8);
}

.tour-compose-send-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(145, 242, 12, 0.22);
}

.tour-compose-send-card p:not(.tour-compose-overline) {
  margin: 10px 0 20px;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.65;
}

.tour-compose-send-card .admin-button-wide {
  width: 100%;
  justify-content: center;
}

.tour-compose-send-card > a {
  display: block;
  margin-top: 13px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.tour-compose-send-card > a:hover {
  color: #ff5a00;
}

.tour-compose-tip-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 18px;
}

.tour-compose-tip-card span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 900;
}

.tour-compose-tip-card.blue span {
  color: #fff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.tour-compose-tip-card.green span {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tour-compose-tip-card strong {
  display: block;
  color: #241607;
  font-size: 11px;
  font-weight: 900;
}

.tour-compose-tip-card p {
  margin: 6px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .tour-compose-layout {
    grid-template-columns: 1fr;
  }

  .tour-compose-send-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .tour-compose-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .tour-compose-hero-card {
    min-height: 128px;
  }

  .tour-compose-stats {
    grid-template-columns: 1fr;
  }

  .tour-compose-card-heading {
    flex-direction: column;
  }

  .tour-compose-form-grid,
  .tour-compose-card-heading,
  .tour-compose-send-card {
    padding: 20px;
  }
}

/* =========================================================
   TourTobago Admin Chat Details Redesign
   Page: /admin/chats/{id}
   ========================================================= */

.tour-thread-back-row {
  margin-bottom: 16px;
}

.tour-thread-back-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 999px;
  color: var(--tour-orange, #ff5a00);
  background: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 12px 30px rgba(45, 25, 8, 0.05);
}

.tour-thread-back-row a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff7a1a);
}

.tour-thread-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(145, 242, 12, 0.62),
      transparent 18%
    ),
    radial-gradient(
      circle at 9% 105%,
      rgba(12, 154, 184, 0.68),
      transparent 32%
    ),
    linear-gradient(135deg, #ff5a00 0%, #f36a00 42%, #076476 100%);
  box-shadow: 0 22px 55px rgba(255, 90, 0, 0.18);
}

.tour-thread-hero::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -150px;
  top: -180px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.024);
  transform: rotate(22deg);
}

.tour-thread-hero-copy,
.tour-thread-hero-status {
  position: relative;
  z-index: 1;
}

.tour-thread-kicker,
.tour-thread-overline {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tour-thread-kicker {
  color: #fffbd6;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.14);
}

.tour-thread-hero h2 {
  max-width: 900px;
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tour-thread-hero p {
  max-width: 760px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tour-thread-hero-status {
  min-width: 172px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  text-align: center;
}

.tour-thread-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-thread-status.open {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
}

.tour-thread-status.closed {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #15abc7);
}

.tour-thread-status.archived,
.tour-thread-status.neutral {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #62401e);
}

.tour-thread-hero-status small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.tour-thread-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tour-thread-stat-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 110px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 35px rgba(45, 25, 8, 0.06);
}

.tour-thread-stat-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 900;
}

.tour-thread-stat-icon.orange {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8730);
}

.tour-thread-stat-icon.blue {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #20bdd8);
}

.tour-thread-stat-icon.green {
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #d6ff5b);
}

.tour-thread-stat-icon.dark {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tour-thread-stat-card strong {
  display: block;
  color: var(--tour-dark, #241607);
  font:
    650 27px/1 Georgia,
    serif;
}

.tour-thread-stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tour-thread-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 18px;
}

.tour-thread-panel,
.tour-thread-side-card,
.tour-thread-tip-card {
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tour-thread-panel {
  overflow: hidden;
}

.tour-thread-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.07), transparent 45%), #ffffff;
}

.tour-thread-overline {
  color: var(--tour-orange, #ff5a00);
  background: #fff0e6;
}

.tour-thread-panel-head h3,
.tour-thread-side-head h3 {
  margin: 0;
  color: var(--tour-dark, #241607);
  font:
    650 22px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.tour-thread-panel-head small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
}

.tour-thread-live-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #3b6908;
  background: #efffdb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-thread-live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #75d900;
  box-shadow: 0 0 0 5px rgba(145, 242, 12, 0.18);
  animation: tour-thread-pulse 1.8s ease-in-out infinite;
}

.tour-thread-live-dot[data-state="connecting"] {
  color: #8a6a12;
  background: #fff6da;
}
.tour-thread-live-dot[data-state="connecting"]::before {
  background: #f2b705;
  box-shadow: 0 0 0 5px rgba(242, 183, 5, 0.18);
}

.tour-thread-live-dot[data-state="offline"] {
  color: #8a2f2f;
  background: #ffe9e9;
}
.tour-thread-live-dot[data-state="offline"]::before {
  background: #e34b4b;
  box-shadow: 0 0 0 5px rgba(227, 75, 75, 0.16);
  animation: none;
}

@keyframes tour-thread-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@keyframes tour-thread-message-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tour-thread-message-in {
  animation: tour-thread-message-in 0.22s ease-out;
}

.tour-thread-composer.is-sending {
  opacity: 0.6;
  pointer-events: none;
}

.tour-thread-timeline {
  min-height: 420px;
  max-height: min(74vh, 760px);
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(
      circle at top left,
      rgba(11, 143, 168, 0.07),
      transparent 28%
    ),
    linear-gradient(180deg, #fffaf4 0%, #f7fcfd 100%);
}

.tour-thread-empty {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 40px 20px;
  text-align: center;
}

.tour-thread-empty span {
  font-size: 44px;
}

.tour-thread-empty h3 {
  margin: 14px 0 7px;
  color: var(--tour-dark, #241607);
  font:
    650 25px/1.1 Georgia,
    serif;
}

.tour-thread-empty p {
  max-width: 430px;
  margin: 0;
  color: var(--admin-muted, #776b5f);
  font-size: 12px;
  line-height: 1.6;
}

.tour-thread-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  max-width: 78%;
  margin-bottom: 16px;
}

.tour-thread-message.mine {
  grid-template-columns: minmax(0, 1fr) 42px;
  margin-left: auto;
}

.tour-thread-message.mine .tour-thread-avatar {
  grid-column: 2;
  background: linear-gradient(135deg, var(--tour-orange, #ff5a00), #ff8730);
}

.tour-thread-message.mine .tour-thread-bubble {
  grid-column: 1;
  grid-row: 1;
  border-color: rgba(255, 90, 0, 0.18);
  background: linear-gradient(135deg, #fff6eb, #ffffff);
}

.tour-thread-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #19b4cf);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(45, 25, 8, 0.1);
}

.tour-thread-bubble {
  padding: 15px 16px;
  border: 1px solid rgba(11, 143, 168, 0.14);
  border-radius: 18px 18px 18px 6px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(45, 25, 8, 0.06);
}

.tour-thread-message.mine .tour-thread-bubble {
  border-radius: 18px 18px 6px 18px;
}

.tour-thread-bubble header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.tour-thread-bubble header strong {
  color: var(--tour-dark, #241607);
  font-size: 12px;
}

.tour-thread-bubble header span {
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.tour-thread-bubble p {
  margin: 0;
  color: #433121;
  font-size: 12px;
  line-height: 1.7;
  white-space: normal;
}

.tour-thread-bubble .chat-attachment {
  margin-top: 12px;
}

.tour-thread-bubble .chat-attachment img,
.tour-thread-bubble .chat-attachment video {
  max-width: 320px;
  width: 100%;
  border-radius: 15px;
  border: 1px solid rgba(255, 90, 0, 0.12);
  background: #fffaf4;
}

.tour-thread-bubble .chat-attachment audio {
  width: min(320px, 100%);
}

.tour-thread-bubble .chat-attachment-meta {
  display: block;
  margin-top: 7px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
}

.tour-thread-bubble .chat-document {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  padding: 12px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 14px;
  color: var(--tour-dark, #241607);
  background: #f3fcfd;
}

.tour-thread-bubble .chat-document > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #19b4cf);
  font-weight: 900;
}

.tour-thread-bubble .chat-document strong {
  display: block;
  font-size: 11px;
}

.tour-thread-bubble .chat-document small {
  display: block;
  margin-top: 4px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 750;
}

.tour-thread-composer {
  padding: 22px 24px;
  border-top: 1px solid rgba(255, 90, 0, 0.12);
  background: #ffffff;
}

.tour-thread-composer label,
.tour-thread-status-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--tour-dark, #241607);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour-thread-composer textarea {
  width: 100%;
  resize: none;
  min-height: 48px;
  max-height: 160px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 16px;
  outline: 0;
  color: var(--tour-dark, #241607);
  background: #fffaf4;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  transition: height 0.1s ease-out, border-color 0.15s ease;
}

.tour-thread-composer textarea:focus,
.tour-thread-status-form select:focus {
  border-color: rgba(255, 90, 0, 0.48);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.1);
}

.tour-thread-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}

.tour-thread-composer-actions span {
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  font-weight: 750;
}

.tour-thread-status-form select {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 14px;
  outline: 0;
  color: var(--tour-dark, #241607);
  background: #ffffff;
  font-size: 12px;
}

/* Unified composer: attach button + auto-growing textarea + send button,
   with a drag-and-drop dropzone overlay and an inline attachment preview chip. */
.tour-thread-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.tour-thread-attach-btn,
.tour-thread-send-btn {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}

.tour-thread-attach-btn {
  color: var(--tour-blue, #0b8fa8);
  background: #eef9fb;
}
.tour-thread-attach-btn:hover {
  background: #dcf3f6;
  transform: translateY(-1px);
}

.tour-thread-send-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff7a1f);
  box-shadow: 0 8px 18px rgba(255, 90, 0, 0.28);
}
.tour-thread-send-btn:hover {
  transform: translateY(-1px) scale(1.03);
}
.tour-thread-send-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.tour-thread-input-row textarea {
  flex: 1;
  min-width: 0;
}

.tour-thread-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.tour-thread-attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  padding: 8px 34px 8px 8px;
  border: 1px solid rgba(11, 143, 168, 0.22);
  border-radius: 14px;
  background: #f7fdfe;
}

.tour-thread-attach-chip img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.tour-thread-attach-chip-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #19b4cf);
  font-size: 16px;
  font-weight: 900;
}

.tour-thread-attach-chip-info {
  min-width: 0;
}

.tour-thread-attach-chip-info strong {
  display: block;
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-thread-attach-chip-info small {
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
}

.tour-thread-attach-chip-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  color: #8a2f2f;
  background: #ffe9e9;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.tour-thread-attach-chip-remove:hover {
  background: #ffd6d6;
}

.tour-thread-composer.is-dragover {
  border-radius: 18px;
  outline: 2px dashed rgba(11, 143, 168, 0.5);
  outline-offset: -6px;
  background: #f4fdfe;
}

.tour-thread-closed-note {
  display: flex;
  gap: 12px;
  margin: 22px 24px 24px;
  padding: 16px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 18px;
  background: #f3fcfd;
}

.tour-thread-closed-note > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #19b4cf);
  font-weight: 900;
}

.tour-thread-closed-note strong {
  color: var(--tour-dark, #241607);
  font-size: 13px;
}

.tour-thread-closed-note p {
  margin: 5px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.6;
}

.tour-thread-side {
  display: grid;
  gap: 14px;
}

.tour-thread-side-card,
.tour-thread-tip-card {
  padding: 22px;
}

.tour-thread-side-head {
  margin-bottom: 14px;
}

.tour-thread-people-list {
  display: grid;
  gap: 10px;
}

.tour-thread-person {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid rgba(255, 90, 0, 0.1);
  border-radius: 16px;
  background: #fffaf4;
}

.tour-thread-person > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--tour-orange, #ff5a00),
    var(--tour-blue, #0b8fa8)
  );
  font-size: 13px;
  font-weight: 900;
}

.tour-thread-person p {
  min-width: 0;
  margin: 0;
}

.tour-thread-person strong {
  display: block;
  overflow: hidden;
  color: var(--tour-dark, #241607);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-thread-person small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-thread-control-copy {
  margin: 0 0 16px;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.65;
}

.tour-thread-status-form {
  display: grid;
  gap: 10px;
}

.tour-thread-status-form select {
  padding: 0 12px;
}

.tour-thread-info-row {
  display: grid;
  gap: 5px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
}

.tour-thread-info-row:first-child {
  padding-top: 0;
}

.tour-thread-info-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tour-thread-info-row span {
  color: var(--admin-muted, #776b5f);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-thread-info-row strong {
  color: var(--tour-dark, #241607);
  font-size: 12px;
  line-height: 1.5;
}

.tour-thread-tip-card {
  display: flex;
  gap: 13px;
  border-color: rgba(145, 242, 12, 0.28);
  background: linear-gradient(135deg, #efffdb, #ffffff);
}

.tour-thread-tip-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 14px;
  color: #241607;
  background: linear-gradient(135deg, var(--tour-green, #91f20c), #dfff62);
  font-weight: 900;
}

.tour-thread-tip-card strong {
  color: var(--tour-dark, #241607);
  font-size: 13px;
}

.tour-thread-tip-card p {
  margin: 5px 0 0;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .tour-thread-layout {
    grid-template-columns: 1fr;
  }

  .tour-thread-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-thread-side-card.people {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .tour-thread-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-thread-hero {
    grid-template-columns: 1fr;
  }

  .tour-thread-hero-status {
    justify-items: start;
    place-items: start;
  }

  .tour-thread-message,
  .tour-thread-message.mine {
    max-width: 92%;
  }
}

@media (max-width: 680px) {
  .tour-thread-hero {
    padding: 28px 24px;
  }

  .tour-thread-stats,
  .tour-thread-side {
    grid-template-columns: 1fr;
  }

  .tour-thread-panel-head,
  .tour-thread-composer-actions,
  .tour-thread-upload-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .tour-thread-timeline {
    padding: 18px;
  }

  .tour-thread-message,
  .tour-thread-message.mine {
    max-width: 100%;
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .tour-thread-message.mine .tour-thread-avatar {
    grid-column: 1;
  }

  .tour-thread-message.mine .tour-thread-bubble {
    grid-column: 2;
  }

  .tour-thread-avatar {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }
}
/* =========================================================
   TourTobago Admin - Notifications index + show redesign
   Applies to:
   /admin/notifications
   /admin/notifications/{id}
   ========================================================= */

.tt-notification-hero,
.tt-notification-detail-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(145, 242, 12, 0.54),
      transparent 18%
    ),
    radial-gradient(
      circle at 8% 100%,
      rgba(11, 143, 168, 0.62),
      transparent 30%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ef5200 46%, #075e75 100%);
  box-shadow: 0 24px 62px rgba(255, 90, 0, 0.18);
}

.tt-notification-hero::before,
.tt-notification-detail-hero::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -150px;
  top: -170px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 42% 58% 54% 46%;
  box-shadow:
    0 0 0 52px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(21deg);
}

.tt-notification-hero-copy,
.tt-notification-hero-actions,
.tt-notification-detail-copy,
.tt-notification-detail-status-card {
  position: relative;
  z-index: 1;
}

.tt-notification-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-notification-hero h2,
.tt-notification-detail-hero h2 {
  margin: 0;
  font:
    650 clamp(29px, 3vw, 43px)/1.06 Georgia,
    serif;
  letter-spacing: -0.038em;
}

.tt-notification-hero p,
.tt-notification-detail-hero p {
  max-width: 690px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.83);
  font-size: 13px;
  line-height: 1.75;
}

.tt-notification-send {
  min-width: 184px;
  justify-content: center;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.17);
}

.tt-notification-send:hover {
  color: #241607;
  background: linear-gradient(135deg, #7be000, #d8ff56);
}

.tt-notification-alert {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 90, 0, 0.24);
  border-radius: 18px;
  color: #8b3900;
  background: linear-gradient(135deg, #fff2e7, #fffaf4);
  box-shadow: 0 14px 34px rgba(255, 90, 0, 0.08);
}

.tt-notification-alert > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
  font-size: 20px;
  font-weight: 900;
}

.tt-notification-alert strong {
  display: block;
  color: #241607;
  font-size: 13px;
}

.tt-notification-alert p {
  margin: 4px 0 0;
  color: #8b6a53;
  font-size: 11px;
  line-height: 1.55;
}

.tt-notification-kpis,
.tt-notification-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tt-notification-kpi {
  min-height: 114px;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(45, 25, 8, 0.065);
}

.tt-notification-kpi > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
}

.tt-notification-kpi.orange > span {
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.tt-notification-kpi.blue > span {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.tt-notification-kpi.green > span {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.tt-notification-kpi.dark > span {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tt-notification-kpi strong {
  display: block;
  overflow: hidden;
  color: #241607;
  font:
    650 27px/1 Georgia,
    serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-notification-kpi small {
  display: block;
  margin-top: 7px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-notification-panel,
.tt-delivery-panel,
.tt-notification-preview-card,
.tt-notification-context-card,
.tt-notification-image-card {
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(45, 25, 8, 0.07);
}

.tt-notification-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(420px, 640px);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 90, 0, 0.09), transparent 36%),
    #ffffff;
}

.tt-panel-eyebrow {
  margin: 0 0 7px;
  color: #ff5a00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-notification-toolbar h3,
.tt-delivery-heading h3,
.tt-notification-context-card h3 {
  margin: 0;
  color: #241607;
  font:
    650 21px/1.2 Georgia,
    serif;
  letter-spacing: -0.02em;
}

.tt-notification-toolbar small,
.tt-delivery-heading small {
  display: block;
  margin-top: 6px;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.45;
}

.tt-notification-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 175px auto auto;
  gap: 10px;
  align-items: center;
}

.tt-notification-search {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(11, 143, 168, 0.2);
  border-radius: 15px;
  background: #f8fcfd;
}

.tt-notification-search span {
  color: #0b8fa8;
  font-size: 20px;
  transform: rotate(-14deg);
}

.tt-notification-search input,
.tt-notification-filters select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font-size: 12px;
}

.tt-notification-filters select {
  height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 15px;
  background: #f8fcfd;
}

.tt-notification-filters button,
.tt-notification-filters a {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 0;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-notification-filters button {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #17abc5);
  box-shadow: 0 12px 26px rgba(11, 143, 168, 0.16);
}

.tt-notification-filters a {
  color: #ff5a00;
  background: #fff0e6;
}

.tt-notification-subbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
  color: #776b5f;
  background: #fffaf4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tt-notification-table {
  min-width: 1120px;
}

.tt-notification-table th,
.tt-delivery-table th {
  padding: 14px 20px;
  color: #7f6e60;
  background: #fff6eb;
}

.tt-notification-table td,
.tt-delivery-table td {
  padding: 17px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  vertical-align: middle;
}

.tt-notification-table tbody tr,
.tt-delivery-table tbody tr {
  transition: background 0.18s ease;
}

.tt-notification-table tbody tr:hover,
.tt-delivery-table tbody tr:hover {
  background: #fffaf4;
}

.tt-notification-message,
.tt-delivery-user {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.tt-notification-icon,
.tt-delivery-user > span {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 77% 17%,
      rgba(145, 242, 12, 0.7),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
  box-shadow: 0 10px 24px rgba(45, 25, 8, 0.1);
  font-weight: 900;
}

.tt-notification-message div,
.tt-audience-cell,
.tt-created-cell,
.tt-delivery-line,
.tt-provider-result,
.tt-delivery-user div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tt-notification-message strong,
.tt-audience-cell strong,
.tt-created-cell strong,
.tt-delivery-line strong,
.tt-provider-result strong,
.tt-delivery-user strong {
  color: #241607;
  font-size: 12px;
}

.tt-notification-message small,
.tt-audience-cell small,
.tt-created-cell small,
.tt-delivery-line small,
.tt-provider-result small,
.tt-delivery-user small {
  overflow: hidden;
  max-width: 360px;
  margin-top: 5px;
  color: #776b5f;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.tt-platform-pill,
.tt-notification-status,
.tt-version-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tt-platform-pill {
  min-width: 78px;
  padding: 8px 11px;
}

.tt-platform-pill.all {
  color: #ffffff;
  background: linear-gradient(135deg, #241607, #5a3517);
}

.tt-platform-pill.android {
  color: #2b5100;
  background: #efffdb;
}

.tt-platform-pill.ios {
  color: #07596a;
  background: #e9fbff;
}

.tt-notification-status {
  padding: 8px 11px;
}

.tt-notification-status.sent {
  color: #2b5100;
  background: #efffdb;
}

.tt-notification-status.partial,
.tt-notification-status.sending {
  color: #8a4f00;
  background: #fff3cf;
}

.tt-notification-status.failed,
.tt-notification-status.no-targets {
  color: #9b3100;
  background: #fff0e6;
}

.tt-notification-status.dry-run,
.tt-notification-status.draft,
.tt-notification-status.neutral {
  color: #07596a;
  background: #e9fbff;
}

.tt-version-chip {
  padding: 8px 10px;
  color: #8b6a53;
  background: #fff4e8;
}

.tt-delivery-cell {
  min-width: 150px;
}

.tt-delivery-progress {
  position: relative;
  overflow: hidden;
  display: block;
  width: 145px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: #ffe6cf;
}

.tt-delivery-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #91f20c, #0b8fa8);
}

.tt-delivery-progress.large {
  width: 100%;
  height: 10px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.25);
}

.tt-notification-actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 11px;
  color: #0b8fa8;
  background: #eefbfe;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tt-notification-actions form {
  margin: 0;
}

.tt-notification-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: #8b3900;
  background: #fff0e6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tt-notification-actions a:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.tt-notification-actions button:hover {
  color: #ffffff;
  background: #ff5a00;
}

.tt-notification-empty {
  display: grid;
  place-items: center;
  padding: 48px 20px;
  text-align: center;
}

.tt-notification-empty.compact {
  padding: 34px 20px;
}

.tt-notification-empty span {
  font-size: 42px;
}

.tt-notification-empty h3 {
  margin: 12px 0 6px;
  color: #241607;
  font:
    650 24px/1.2 Georgia,
    serif;
}

.tt-notification-empty p {
  max-width: 430px;
  margin: 0 0 18px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.6;
}

.tt-detail-back {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tt-detail-back form {
  margin: 0;
}

.tt-detail-back a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 999px;
  color: #0b8fa8;
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 850;
}

.tt-detail-back a:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.tt-notification-detail-hero {
  grid-template-columns: minmax(0, 1fr) 250px;
}

.tt-notification-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tt-notification-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
}

.tt-notification-detail-status-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.tt-notification-detail-status-card .tt-notification-status {
  align-self: flex-start;
  margin-bottom: 14px;
}

.tt-notification-detail-status-card strong {
  display: block;
  color: #ffffff;
  font:
    650 26px/1.1 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.tt-notification-detail-status-card small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.tt-notification-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.tt-delivery-heading {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 45%), #ffffff;
}

.tt-delivery-table {
  min-width: 980px;
}

.tt-provider-result small {
  max-width: 280px;
  white-space: normal;
}

.tt-notification-detail-side {
  display: grid;
  gap: 18px;
}

.tt-notification-preview-card,
.tt-notification-context-card,
.tt-notification-image-card {
  padding: 22px;
}

.tt-phone-preview {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  margin-top: 16px;
  padding: 22px 16px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(145, 242, 12, 0.32),
      transparent 20%
    ),
    radial-gradient(
      circle at 10% 95%,
      rgba(11, 143, 168, 0.3),
      transparent 28%
    ),
    linear-gradient(145deg, #fff6ec, #eafcff);
}

.tt-phone-top {
  width: 72px;
  height: 6px;
  margin: 0 auto 54px;
  border-radius: 999px;
  background: rgba(36, 22, 7, 0.24);
}

.tt-push-card {
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px rgba(45, 25, 8, 0.12);
}

.tt-push-card span {
  display: block;
  color: #0b8fa8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tt-push-card strong {
  display: block;
  margin-top: 7px;
  color: #241607;
  font-size: 13px;
}

.tt-push-card p {
  margin: 7px 0 0;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.55;
}

.tt-push-card img,
.preview-image {
  display: block;
  width: 100%;
  max-height: 128px;
  margin-top: 12px;
  border-radius: 14px;
  object-fit: cover;
}

.tt-notification-detail-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.tt-notification-detail-list div {
  padding: 14px;
  border: 1px solid rgba(255, 90, 0, 0.12);
  border-radius: 15px;
  background: #fffaf4;
}

.tt-notification-detail-list dt {
  color: #8b6a53;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tt-notification-detail-list dd {
  margin: 6px 0 0;
  color: #241607;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  word-break: break-word;
}

.tt-notification-image-card img {
  display: block;
  width: 100%;
  margin-top: 14px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(45, 25, 8, 0.1);
}

.notification-image-preview {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 16px;
  background: #fffaf4;
}

.notification-image-preview[hidden] {
  display: none;
}

.notification-image-preview img {
  width: 92px;
  height: 68px;
  border-radius: 12px;
  object-fit: cover;
}

.notification-image-preview button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  color: #9b3100;
  background: #fff0e6;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1180px) {
  .tt-notification-toolbar,
  .tt-notification-detail-layout,
  .tt-notification-detail-hero {
    grid-template-columns: 1fr;
  }

  .tt-notification-detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .tt-notification-kpis,
  .tt-notification-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-notification-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .tt-notification-hero,
  .tt-notification-detail-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .tt-notification-send {
    width: 100%;
  }

  .tt-notification-kpis,
  .tt-notification-detail-kpis,
  .tt-notification-detail-side,
  .tt-notification-filters {
    grid-template-columns: 1fr;
  }

  .tt-notification-toolbar {
    padding: 18px;
  }

  .tt-notification-subbar {
    flex-direction: column;
  }

  .tt-notification-alert {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   TourTobago Admin Settings redesign
   Scope: /admin/settings only
   ========================================================= */

.tt-settings-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(145, 242, 12, 0.62),
      transparent 18%
    ),
    radial-gradient(
      circle at 14% 100%,
      rgba(11, 143, 168, 0.72),
      transparent 30%
    ),
    linear-gradient(135deg, #ff5a00 0%, #f06a12 43%, #086d86 100%);
  box-shadow: 0 24px 58px rgba(255, 90, 0, 0.18);
}

.tt-settings-hero::before {
  content: "";
  position: absolute;
  width: 410px;
  height: 410px;
  right: -168px;
  top: -190px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 44% 56% 60% 40%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.036),
    0 0 0 118px rgba(255, 255, 255, 0.024);
  transform: rotate(24deg);
}

.tt-settings-hero > * {
  position: relative;
  z-index: 1;
}

.tt-settings-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-settings-hero h2 {
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.tt-settings-hero p {
  max-width: 720px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.7;
}

.tt-settings-hero-badges {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 190px;
}

.tt-settings-hero-badges span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  font-weight: 750;
  backdrop-filter: blur(12px);
}

.tt-settings-hero-badges b {
  color: #ffffff;
  font:
    700 22px/1 Georgia,
    serif;
}

.tt-settings-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.tt-settings-tabs a {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 90, 0, 0.13);
  border-radius: 18px;
  color: #76685d;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(45, 25, 8, 0.045);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tt-settings-tabs a::after {
  content: "";
  position: absolute;
  inset: auto -22px -28px auto;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(255, 90, 0, 0.08);
}

.tt-settings-tabs a:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.28);
  color: var(--tour-orange, #ff5a00);
  box-shadow: 0 18px 42px rgba(255, 90, 0, 0.09);
}

.tt-settings-tabs a span,
.tt-settings-tabs a strong {
  position: relative;
  z-index: 1;
}

.tt-settings-tabs a span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--tour-blue, #0b8fa8);
  background: #f1fcfe;
  font-size: 16px;
}

.tt-settings-tabs a strong {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tt-settings-tabs a.active {
  color: #ffffff;
  border-color: rgba(255, 90, 0, 0.18);
  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(145, 242, 12, 0.44),
      transparent 22%
    ),
    linear-gradient(135deg, #ff5a00, #087f9a);
  box-shadow: 0 18px 44px rgba(255, 90, 0, 0.18);
}

.tt-settings-tabs a.active span {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
}

.tt-settings-alert {
  margin-bottom: 18px;
}

.tt-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
}

.tt-settings-main,
.tt-settings-side {
  display: grid;
  gap: 18px;
}

.tt-settings-section {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.06);
}

.tt-settings-section-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.11);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.07), transparent 46%), #ffffff;
}

.tt-settings-section-head.with-status {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.tt-settings-section-head > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--tour-orange, #ff5a00),
    var(--tour-blue, #0b8fa8)
  );
  box-shadow: 0 14px 28px rgba(255, 90, 0, 0.18);
  font:
    700 15px/1 Georgia,
    serif;
}

.tt-settings-section-head h2 {
  margin: 2px 0 0;
  color: var(--tour-dark, #241607);
  font:
    650 23px/1.18 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.tt-settings-section-head small {
  display: block;
  margin-top: 6px;
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.55;
}

.tt-settings-form-grid,
.tt-fare-grid,
.tt-social-grid,
.tt-brand-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 24px;
}

.tt-fare-grid,
.tt-social-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tt-social-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tt-settings-form-grid .field,
.tt-fare-grid .field,
.tt-social-grid .field,
.tt-brand-upload-grid .field {
  padding: 14px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 16px;
  background: #fbfdfe;
}

.tt-settings-form-grid .field-full {
  grid-column: 1 / -1;
}

.tt-settings-form-grid .field label,
.tt-fare-grid .field label,
.tt-social-grid .field label,
.tt-brand-upload-card > label:first-child {
  color: #5f5146;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tt-settings-form-grid .field b,
.tt-fare-grid .field b,
.tt-social-grid .field b {
  color: var(--tour-orange, #ff5a00);
}

.tt-settings-form-grid input,
.tt-settings-form-grid select,
.tt-settings-form-grid textarea,
.tt-fare-grid input,
.tt-fare-grid select,
.tt-fare-grid textarea,
.tt-social-grid input,
.tt-social-grid select,
.tt-social-grid textarea {
  min-height: 46px;
  margin-top: 8px;
  border-color: rgba(11, 143, 168, 0.2);
  border-radius: 13px;
  background: #ffffff;
  color: var(--tour-dark, #241607);
  box-shadow: 0 8px 18px rgba(45, 25, 8, 0.035);
}

.tt-settings-form-grid textarea {
  min-height: 104px;
  resize: vertical;
}

.tt-settings-form-grid input:focus,
.tt-settings-form-grid select:focus,
.tt-settings-form-grid textarea:focus,
.tt-fare-grid input:focus,
.tt-social-grid input:focus {
  border-color: rgba(255, 90, 0, 0.48);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.09);
}

.tt-settings-form-grid small,
.tt-fare-grid small,
.tt-social-grid small {
  display: block;
  margin-top: 8px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  line-height: 1.55;
}

.tt-switch-line {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.tt-switch-line input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt-switch-line > span {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #eadfd5;
  transition: background 0.2s ease;
}

.tt-switch-line > span::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.tt-switch-line input:checked + span {
  background: linear-gradient(
    135deg,
    var(--tour-orange, #ff5a00),
    var(--tour-blue, #0b8fa8)
  );
}

.tt-switch-line input:checked + span::before {
  transform: translateX(22px);
}

.tt-switch-line em {
  font-style: normal;
}

.tt-switch-line strong {
  display: block;
  color: var(--tour-dark, #241607);
  font-size: 12px;
}

.tt-switch-line small {
  display: block;
  margin-top: 5px;
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.tt-settings-save-card {
  overflow: hidden;
  padding: 22px;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 0%, rgba(145, 242, 12, 0.3), transparent 28%),
    linear-gradient(180deg, #ffffff, #fff9f0);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.tt-settings-save-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #e6ff73);
  box-shadow: 0 14px 30px rgba(145, 242, 12, 0.25);
  font-size: 22px;
}

.tt-settings-save-card h3,
.tt-settings-integration-card h3 {
  margin: 4px 0 8px;
  color: var(--tour-dark, #241607);
  font:
    650 23px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.tt-settings-save-card p,
.tt-settings-integration-card p {
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  line-height: 1.65;
}

.tt-settings-save-card .admin-button {
  margin-top: 14px;
}

.tt-settings-integration-card {
  padding: 22px;
  border-color: rgba(11, 143, 168, 0.16);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.055);
}

.tt-settings-integration-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 90, 0, 0.1);
}

.tt-settings-integration-card > div span {
  color: var(--tour-dark, #241607);
  font-size: 11px;
  font-weight: 800;
}

.tt-brand-upload-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(11, 143, 168, 0.14);
  border-radius: 18px;
  background: #fbfdfe;
}

.tt-settings-upload-box {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  margin: 0;
  padding: 24px;
  border: 1.5px dashed rgba(255, 90, 0, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 90, 0, 0.12), transparent 28%),
    #fffaf4;
  color: var(--tour-dark, #241607);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.tt-settings-upload-box:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 143, 168, 0.44);
  background: #f3fcfd;
}

.tt-settings-upload-box span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--tour-orange, #ff5a00),
    var(--tour-blue, #0b8fa8)
  );
  font-size: 20px;
  font-weight: 900;
}

.tt-settings-upload-box strong {
  font-size: 13px;
}

.tt-settings-upload-box small {
  color: var(--admin-muted, #776b5f);
  font-size: 10px;
}

.tt-settings-upload-box.full-upload {
  min-height: 132px;
}

.tt-brand-preview {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 90, 0, 0.12);
  border-radius: 16px;
  background: #ffffff;
}

.tt-brand-preview img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.tt-brand-preview.favicon-preview img {
  max-width: 52px;
  max-height: 52px;
}

.tt-brand-preview em {
  color: var(--admin-muted, #776b5f);
  font-size: 11px;
  font-style: normal;
}

.tt-credential-success {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(145, 242, 12, 0.44);
  border-radius: 16px;
  background: #f4ffe8;
}

.tt-credential-success > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #315f04;
  background: linear-gradient(135deg, #91f20c, #d8ff63);
  font-weight: 900;
}

.tt-credential-success strong,
.tt-credential-success small {
  display: block;
}

.tt-credential-success strong {
  color: #315f04;
  font-size: 12px;
}

.tt-credential-success small {
  overflow: hidden;
  margin-top: 4px;
  color: #5b7447;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-settings-checklist {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.tt-settings-checklist p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 15px;
  color: var(--admin-muted, #776b5f);
  background: #fbfdfe;
  font-size: 11px;
  line-height: 1.55;
}

.tt-settings-checklist p span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tour-blue, #0b8fa8), #18b5ce);
  font-weight: 900;
}

.tt-settings-checklist code {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--tour-blue-dark, #06596a);
  background: #eefbfe;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .tt-settings-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tt-fare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .tt-settings-hero,
  .tt-settings-grid,
  .tt-settings-section-head.with-status {
    grid-template-columns: 1fr;
  }

  .tt-settings-hero-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-settings-side .sticky-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  .tt-settings-hero {
    padding: 28px 24px;
  }

  .tt-settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-settings-form-grid,
  .tt-brand-upload-grid,
  .tt-fare-grid,
  .tt-social-grid {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .tt-settings-section-head {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .tt-settings-hero-badges {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   TourTobago Owner Login Redesign
   Add this block at the bottom of public/assets/css/admin.css
   ========================================================= */

body.tt-owner-login-page {
  min-height: 100vh;
  color: #241607;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(11, 143, 168, 0.16),
      transparent 30%
    ),
    radial-gradient(circle at 92% 12%, rgba(255, 90, 0, 0.16), transparent 28%),
    radial-gradient(
      circle at 50% 100%,
      rgba(145, 242, 12, 0.12),
      transparent 34%
    ),
    linear-gradient(135deg, #effcff 0%, #fff7ec 54%, #fff1df 100%);
}

.tt-owner-login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(460px, 1fr) minmax(500px, 0.95fr);
}

.tt-owner-login-story {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px clamp(34px, 5vw, 82px);
  color: #ffffff;
  background:
    radial-gradient(
      circle at 25% 15%,
      rgba(145, 242, 12, 0.38),
      transparent 15%
    ),
    radial-gradient(
      circle at 88% 8%,
      rgba(255, 255, 255, 0.14),
      transparent 20%
    ),
    linear-gradient(145deg, #07586a 0%, #0b8fa8 48%, #ff5a00 100%);
}

.tt-owner-login-story::before {
  content: "";
  position: absolute;
  right: -170px;
  top: 72px;
  width: 560px;
  height: 330px;
  border-radius: 46% 54% 62% 38% / 51% 44% 56% 49%;
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    -42px 58px 0 rgba(255, 255, 255, 0.055),
    0 0 0 84px rgba(255, 255, 255, 0.035),
    0 0 0 160px rgba(255, 255, 255, 0.024);
  transform: rotate(-14deg);
}

.tt-owner-login-story::after {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -190px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 90, 0, 0.34) 0 22%, transparent 23%),
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 48%, transparent 49%);
}

.tt-owner-brand-row,
.tt-owner-story-copy,
.tt-owner-feature-grid {
  position: relative;
  z-index: 1;
}

.tt-owner-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
}

.tt-owner-brand-logo {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.74);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.tt-owner-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-owner-brand strong {
  display: block;
  font:
    750 26px/1.1 Georgia,
    serif;
  letter-spacing: -0.03em;
}

.tt-owner-brand small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tt-owner-login-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #fffdd7;
  background: rgba(0, 0, 0, 0.16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tt-owner-story-copy h1 {
  max-width: 720px;
  margin: 0;
  font:
    700 clamp(44px, 5vw, 74px)/0.98 Georgia,
    serif;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.tt-owner-story-copy p {
  max-width: 570px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.75;
}

.tt-owner-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 34px;
}

.tt-owner-feature-grid div {
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.tt-owner-feature-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  color: #91f20c;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.tt-owner-feature-grid strong {
  display: block;
  color: #ffffff;
  font:
    700 18px/1.1 Georgia,
    serif;
}

.tt-owner-feature-grid small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tt-owner-login-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(26px, 5vw, 62px);
}

.tt-owner-login-panel::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 34px;
  pointer-events: none;
}

.tt-owner-login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  padding: 38px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 70px rgba(45, 25, 8, 0.12);
  backdrop-filter: blur(18px);
}

.tt-owner-mobile-logo {
  display: none;
  width: 94px;
  height: 94px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 3px solid rgba(11, 143, 168, 0.22);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(11, 143, 168, 0.13);
}

.tt-owner-mobile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-owner-overline {
  margin: 0 0 8px;
  color: #0b8fa8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tt-owner-login-card h2 {
  margin: 0;
  color: #241607;
  font:
    700 44px/1.04 Georgia,
    serif;
  letter-spacing: -0.045em;
}

.tt-owner-intro {
  margin: 12px 0 28px;
  color: #776b5f;
  font-size: 13px;
  line-height: 1.65;
}

.tt-owner-login-form {
  display: grid;
}

.tt-owner-login-form label,
.tt-owner-label-row label {
  margin-bottom: 8px;
  color: #241607;
  font-size: 12px;
  font-weight: 850;
}

.tt-owner-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.tt-owner-label-row label {
  margin: 0;
}

.tt-owner-label-row span {
  color: #8c7c6c;
  font-size: 10px;
  font-weight: 700;
}

.tt-owner-field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 15px;
  background: #fffaf4;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.tt-owner-field:focus-within {
  border-color: rgba(11, 143, 168, 0.48);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(11, 143, 168, 0.09);
}

.tt-owner-field span {
  display: grid;
  place-items: center;
  color: #ff5a00;
  font-size: 13px;
  font-weight: 900;
}

.tt-owner-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px 0 0;
  border: 0;
  outline: 0;
  color: #241607;
  background: transparent;
  font-size: 13px;
}

.tt-owner-field input::placeholder {
  color: #b4a89b;
}

.tt-owner-submit {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #12a9c5);
  box-shadow: 0 17px 34px rgba(11, 143, 168, 0.25);
  font-size: 13px;
  font-weight: 900;
}

.tt-owner-submit:hover {
  background: linear-gradient(135deg, #07586a, #0b8fa8);
  transform: translateY(-1px);
}

.tt-owner-submit b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #241607;
  background: #91f20c;
  font-size: 14px;
}

.tt-owner-help-card {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px;
  border: 1px solid rgba(255, 90, 0, 0.24);
  border-radius: 15px;
  background: #fff3e7;
}

.tt-owner-help-card span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: #ff5a00;
  font-size: 12px;
  font-weight: 950;
}

.tt-owner-help-card p {
  margin: 0;
  color: #8a5530;
  font-size: 10px;
  line-height: 1.55;
}

.tt-owner-login-page .alert {
  border-radius: 14px;
}

.tt-owner-login-page .alert-error {
  color: #982d00;
  border-color: rgba(255, 90, 0, 0.26);
  background: #fff0e6;
}

.tt-owner-login-page .alert-success {
  color: #326109;
  border-color: rgba(145, 242, 12, 0.45);
  background: #f2ffe2;
}

@media (max-width: 1060px) {
  .tt-owner-login-shell {
    grid-template-columns: 1fr;
  }

  .tt-owner-login-story {
    min-height: auto;
    padding: 32px 26px;
  }

  .tt-owner-brand-row,
  .tt-owner-story-copy h1,
  .tt-owner-story-copy p,
  .tt-owner-feature-grid {
    display: none;
  }

  .tt-owner-mobile-logo {
    display: grid;
    place-items: center;
  }

  .tt-owner-login-panel {
    min-height: calc(100vh - 92px);
  }
}

@media (max-width: 560px) {
  .tt-owner-login-panel {
    padding: 18px;
  }

  .tt-owner-login-panel::before {
    display: none;
  }

  .tt-owner-login-card {
    padding: 26px 22px;
    border-radius: 22px;
  }

  .tt-owner-login-card h2 {
    font-size: 36px;
  }

  .tt-owner-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
/* =========================================================
   TourTobago Owner Dashboard Redesign
   Applies to: /owner/dashboard
   ========================================================= */

.owner-page .admin-content {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 90, 0, 0.07), transparent 28%),
    radial-gradient(
      circle at 90% 12%,
      rgba(11, 143, 168, 0.09),
      transparent 30%
    );
}

.owner-dashboard-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: stretch;
  gap: 22px;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(255, 90, 0, 0.18);
  border-radius: 28px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 84% 12%,
      rgba(145, 242, 12, 0.52),
      transparent 18%
    ),
    radial-gradient(
      circle at 12% 100%,
      rgba(11, 143, 168, 0.7),
      transparent 34%
    ),
    linear-gradient(135deg, #ff5a00 0%, #ed4f00 46%, #075e72 100%);
  box-shadow: 0 24px 60px rgba(255, 90, 0, 0.18);
}

.owner-dashboard-hero::before {
  content: "";
  position: absolute;
  inset: auto -110px -150px auto;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 42% 58% 52% 48%;
  box-shadow:
    0 0 0 52px rgba(255, 255, 255, 0.035),
    0 0 0 110px rgba(255, 255, 255, 0.022);
  transform: rotate(-18deg);
}

.owner-dashboard-hero::after {
  content: "";
  position: absolute;
  left: 46%;
  top: -100px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(2px);
}

.owner-hero-copy,
.owner-hero-card {
  position: relative;
  z-index: 1;
}

.owner-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.owner-hero-copy h2 {
  max-width: 760px;
  margin: 0;
  font:
    650 clamp(30px, 3.6vw, 48px)/1.02 Georgia,
    serif;
  letter-spacing: -0.045em;
}

.owner-hero-copy p {
  max-width: 660px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.75;
}

.owner-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

.owner-primary-action,
.owner-secondary-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.owner-primary-action {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #e0ff6a);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

.owner-secondary-action {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}

.owner-primary-action:hover,
.owner-secondary-action:hover {
  transform: translateY(-1px);
}

.owner-secondary-action:hover {
  background: rgba(255, 255, 255, 0.18);
}

.owner-hero-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 230px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
}

.owner-hero-avatar {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 19px;
  color: #241607;
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(255, 255, 255, 0.65),
      transparent 26%
    ),
    linear-gradient(135deg, #91f20c, #ffef74);
  font:
    700 24px Georgia,
    serif;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.14);
}

.owner-hero-card small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.owner-hero-card strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.3;
}

.owner-hero-card em {
  overflow: hidden;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-hero-meter,
.owner-progress-track {
  overflow: hidden;
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.owner-hero-meter {
  margin-top: 20px;
}

.owner-hero-meter span,
.owner-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #91f20c, #ffffff);
}

.owner-hero-card p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
}

.owner-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.owner-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: start;
  gap: 15px;
  padding: 21px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 38px rgba(45, 25, 8, 0.07);
}

.owner-metric-card::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -54px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  opacity: 0.1;
}

.owner-metric-card.orange::after {
  background: #ff5a00;
}
.owner-metric-card.blue::after {
  background: #0b8fa8;
}
.owner-metric-card.green::after {
  background: #91f20c;
}
.owner-metric-card.dark::after {
  background: #241607;
}

.owner-metric-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.owner-metric-card.orange .owner-metric-icon {
  background: linear-gradient(135deg, #ff5a00, #ff8b34);
}

.owner-metric-card.blue .owner-metric-icon {
  background: linear-gradient(135deg, #0b8fa8, #18bdd8);
}

.owner-metric-card.green .owner-metric-icon {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff67);
}

.owner-metric-card.dark .owner-metric-icon {
  background: linear-gradient(135deg, #241607, #583414);
}

.owner-metric-card small {
  display: block;
  color: #877365;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.owner-metric-card strong {
  display: block;
  margin-top: 8px;
  color: #241607;
  font:
    650 29px/1 Georgia,
    serif;
  letter-spacing: -0.03em;
}

.owner-metric-card p {
  margin: 8px 0 0;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.45;
}

.owner-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 365px;
  gap: 18px;
  align-items: start;
}

.owner-main-column,
.owner-side-column {
  display: grid;
  gap: 18px;
}

.owner-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(45, 25, 8, 0.07);
}

.owner-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 21px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.11);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.07), transparent 44%), #ffffff;
}

.owner-panel-heading.compact {
  padding-bottom: 17px;
}

.owner-panel-heading span {
  display: block;
  margin-bottom: 5px;
  color: #ff5a00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.owner-panel-heading h3 {
  margin: 0;
  color: #241607;
  font:
    650 22px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.owner-panel-heading a {
  flex: none;
  color: #0b8fa8;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.owner-panel-heading a:hover {
  color: #ff5a00;
}

.owner-activity-list {
  display: grid;
}

.owner-activity-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 24px;
  border-top: 1px solid rgba(255, 90, 0, 0.08);
  color: inherit;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.owner-activity-row:first-child {
  border-top: 0;
}

.owner-activity-row:hover {
  background: #fff9f2;
  transform: translateX(2px);
}

.owner-row-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  font:
    700 16px Georgia,
    serif;
  box-shadow: 0 12px 22px rgba(45, 25, 8, 0.08);
}

.owner-row-icon.booking {
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.owner-row-icon.order {
  background: linear-gradient(135deg, #0b8fa8, #19b7d0);
}

.owner-row-photo {
  overflow: hidden;
  background: #fff0e3;
}

.owner-row-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.owner-row-photo > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0b8fa8, #19b7d0);
}

.owner-row-main {
  min-width: 0;
}

.owner-row-main strong {
  overflow: hidden;
  display: block;
  color: #241607;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-row-main small {
  overflow: hidden;
  display: block;
  margin-top: 5px;
  color: #776b5f;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-status,
.owner-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.owner-status.approved {
  color: #376803;
  background: #efffdb;
}

.owner-status.pending {
  color: #9b4300;
  background: #fff0df;
}

.owner-price {
  color: #075e72;
  background: #eefbfe;
}

.owner-empty-state {
  display: grid;
  place-items: center;
  padding: 42px 20px;
  text-align: center;
}

.owner-empty-state span {
  font-size: 38px;
}

.owner-empty-state h4 {
  margin: 12px 0 6px;
  color: #241607;
  font:
    650 21px/1.2 Georgia,
    serif;
}

.owner-empty-state p {
  max-width: 380px;
  margin: 0;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.65;
}

.owner-progress-list {
  display: grid;
  gap: 17px;
  padding: 21px 24px 24px;
}

.owner-progress-item {
  display: grid;
  gap: 9px;
}

.owner-progress-item > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #241607;
}

.owner-progress-item strong {
  font-size: 11px;
}

.owner-progress-item small {
  color: #0b8fa8;
  font-size: 10px;
  font-weight: 900;
}

.owner-progress-track {
  height: 8px;
  background: #fff0df;
}

.owner-progress-track i {
  background: linear-gradient(90deg, #ff5a00, #0b8fa8, #91f20c);
}

.owner-shortcut-list {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.owner-shortcut-list a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 16px;
  color: inherit;
  background: #f8fcfd;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.owner-shortcut-list a:hover {
  border-color: rgba(255, 90, 0, 0.26);
  background: #fff9f2;
  transform: translateY(-1px);
}

.owner-shortcut-list span {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #18b7cf);
  font-weight: 900;
}

.owner-shortcut-list strong {
  display: block;
  color: #241607;
  font-size: 11px;
}

.owner-shortcut-list small {
  display: block;
  margin-top: 4px;
  color: #776b5f;
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .owner-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .owner-dashboard-hero {
    grid-template-columns: 1fr;
  }

  .owner-hero-card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .owner-dashboard-hero {
    padding: 24px;
    border-radius: 22px;
  }

  .owner-hero-actions,
  .owner-primary-action,
  .owner-secondary-action {
    width: 100%;
  }

  .owner-metric-grid {
    grid-template-columns: 1fr;
  }

  .owner-activity-row {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 15px 18px;
  }

  .owner-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .owner-status,
  .owner-price {
    grid-column: 2 / 3;
    justify-self: start;
  }

  .owner-panel-heading {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .owner-progress-list,
  .owner-shortcut-list {
    padding: 18px;
  }
}

/* =========================================================
   TourTobago Owner Listings + Owner Listing Edit screens
   Pages:
   /owner/listings
   /owner/listings/{id}/edit
   ========================================================= */

.owner-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.13);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owner-listings-hero,
.owner-edit-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 90, 0, 0.16);
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(145, 242, 12, 0.54),
      transparent 18%
    ),
    radial-gradient(
      circle at 13% 100%,
      rgba(11, 143, 168, 0.7),
      transparent 31%
    ),
    linear-gradient(135deg, #ff5a00 0%, #e84c00 48%, #086a7e 100%);
  box-shadow: 0 24px 60px rgba(255, 90, 0, 0.18);
}

.owner-listings-hero {
  grid-template-columns: minmax(0, 1fr) 190px;
  padding: 34px 36px;
}

.owner-listings-hero::before,
.owner-edit-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -170px;
  top: -210px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 46% 54% 58% 42%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.035),
    0 0 0 112px rgba(255, 255, 255, 0.025);
  transform: rotate(22deg);
}

.owner-listings-hero-copy,
.owner-listings-hero-card,
.owner-edit-hero-media,
.owner-edit-hero-copy,
.owner-edit-review-card {
  position: relative;
  z-index: 1;
}

.owner-listings-hero h2,
.owner-edit-hero h2 {
  margin: 0;
  font:
    650 clamp(28px, 3vw, 42px)/1.06 Georgia,
    serif;
  letter-spacing: -0.035em;
}

.owner-listings-hero p,
.owner-edit-hero p {
  max-width: 710px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.75;
}

.owner-listings-hero-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 165px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.owner-listings-hero-card span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 26px;
}

.owner-listings-hero-card strong {
  font:
    750 42px/1 Georgia,
    serif;
}

.owner-listings-hero-card small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.owner-listing-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.owner-listing-stat-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 40px rgba(45, 25, 8, 0.06);
}

.owner-listing-stat-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -55px auto;
  width: 125px;
  height: 125px;
  border-radius: 999px;
  opacity: 0.08;
  background: currentColor;
}

.owner-listing-stat-card > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}

.owner-listing-stat-card.orange > span {
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.owner-listing-stat-card.blue > span {
  background: linear-gradient(135deg, #0b8fa8, #20bdd8);
}

.owner-listing-stat-card.green > span {
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #d6ff5b);
}

.owner-listing-stat-card.dark > span {
  background: linear-gradient(135deg, #241607, #5a3517);
}

.owner-listing-stat-card strong {
  display: block;
  color: #241607;
  font:
    650 28px/1 Georgia,
    serif;
}

.owner-listing-stat-card small {
  display: block;
  margin-top: 6px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.owner-listings-panel {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 45px rgba(45, 25, 8, 0.07);
}

.owner-listings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 48%), #ffffff;
}

.owner-listings-toolbar h2 {
  margin: 2px 0 5px;
  color: #241607;
  font:
    650 24px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.owner-listings-toolbar span {
  color: #776b5f;
  font-size: 11px;
}

.owner-support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(11, 143, 168, 0.22);
  border-radius: 13px;
  color: #076172;
  background: #eefbfe;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.owner-support-link:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #16a8c2);
}

.owner-listings-empty {
  display: grid;
  place-items: center;
  padding: 58px 20px;
  text-align: center;
}

.owner-listings-empty > span {
  font-size: 44px;
}

.owner-listings-empty h3 {
  margin: 12px 0 6px;
  color: #241607;
  font:
    650 25px/1.2 Georgia,
    serif;
}

.owner-listings-empty p {
  max-width: 430px;
  margin: 0 0 18px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.7;
}

.owner-listing-premium-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
}

.owner-listing-card-pro {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 35px rgba(45, 25, 8, 0.055);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.owner-listing-card-pro:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 90, 0, 0.28);
  box-shadow: 0 22px 46px rgba(45, 25, 8, 0.1);
}

.owner-listing-media {
  position: relative;
  height: 190px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 78% 12%,
      rgba(145, 242, 12, 0.3),
      transparent 24%
    ),
    linear-gradient(135deg, #ff5a00, #0b8fa8);
}

.owner-listing-media img,
.owner-listing-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-listing-placeholder {
  display: grid;
  place-items: center;
}

.owner-listing-placeholder span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font:
    750 32px/1 Georgia,
    serif;
  backdrop-filter: blur(10px);
}

.owner-listing-badges {
  position: absolute;
  inset: 14px 14px auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.owner-mini-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.owner-mini-pill.booking {
  color: #241607;
  background: rgba(145, 242, 12, 0.88);
}

.owner-mini-pill.muted {
  color: #ffffff;
  background: rgba(36, 22, 7, 0.62);
}

.owner-listing-card-body {
  flex: 1;
  padding: 20px;
}

.owner-listing-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: start;
}

.owner-listing-title-row p {
  margin: 0 0 5px;
  color: #ff5a00;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.owner-listing-title-row h3 {
  margin: 0;
  color: #241607;
  font:
    650 21px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.owner-listing-title-row > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0b8fa8, #ff5a00);
  font:
    700 17px/1 Georgia,
    serif;
}

.owner-listing-excerpt {
  min-height: 58px;
  margin: 13px 0 15px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.65;
}

.owner-listing-meta-list {
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
}

.owner-listing-meta-list span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(11, 143, 168, 0.12);
  border-radius: 13px;
  color: #776b5f;
  background: #f8fcfd;
  font-size: 10px;
}

.owner-listing-meta-list b {
  color: #241607;
  font-weight: 850;
}

.owner-category-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.owner-category-chip-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #076172;
  background: #eefbfe;
  font-size: 9px;
  font-weight: 850;
}

.owner-category-chip-list.muted span {
  color: #8d6b4b;
  background: #fff0df;
}

.owner-listing-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255, 90, 0, 0.1);
  background: #fffaf4;
}

.owner-listing-card-footer small {
  color: #8d6b4b;
  font-size: 10px;
  font-weight: 700;
}

.owner-listing-card-footer .admin-button {
  min-height: 38px;
  padding: 0 14px;
  font-size: 10px;
  white-space: nowrap;
}

/* Owner listing edit */

.owner-edit-back-row {
  margin-bottom: 14px;
}

.owner-edit-back-row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(11, 143, 168, 0.18);
  border-radius: 12px;
  color: #076172;
  background: #eefbfe;
  font-size: 11px;
  font-weight: 850;
}

.owner-edit-back-row a:hover {
  color: #ffffff;
  background: #0b8fa8;
}

.owner-edit-hero {
  grid-template-columns: 164px minmax(0, 1fr) 190px;
  padding: 24px;
}

.owner-edit-hero-media {
  overflow: hidden;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.owner-edit-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-edit-hero-media > span {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  font:
    750 32px/1 Georgia,
    serif;
}

.owner-edit-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.owner-edit-hero-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fffbd6;
  background: rgba(0, 0, 0, 0.14);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.owner-edit-review-card {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.15);
  text-align: center;
  backdrop-filter: blur(12px);
}

.owner-edit-review-card span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #241607;
  background: linear-gradient(135deg, #91f20c, #dfff62);
  font-weight: 900;
}

.owner-edit-review-card strong {
  color: #ffffff;
  font-size: 13px;
}

.owner-edit-review-card small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  line-height: 1.5;
}

.owner-listing-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
  align-items: start;
}

.owner-listing-editor-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.owner-form-section {
  overflow: hidden;
  border-color: rgba(255, 90, 0, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(45, 25, 8, 0.06);
}

.owner-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 23px 24px;
  border-bottom: 1px solid rgba(255, 90, 0, 0.11);
  background:
    linear-gradient(90deg, rgba(255, 90, 0, 0.06), transparent 48%), #ffffff;
}

.owner-form-heading h2 {
  margin: 3px 0 5px;
  color: #241607;
  font:
    650 23px/1.15 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.owner-form-heading span {
  color: #776b5f;
  font-size: 11px;
  line-height: 1.5;
}

.owner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  padding: 24px;
}

.owner-form-grid .field-full,
.owner-media-section .field-full {
  grid-column: 1 / -1;
}

.owner-listing-editor .field label,
.owner-listing-editor .group-label {
  color: #241607;
  font-size: 11px;
  font-weight: 850;
}

.owner-listing-editor .field label b,
.owner-taxonomy-title-row b {
  color: #ff5a00;
}

.owner-listing-editor
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.owner-listing-editor select,
.owner-listing-editor textarea {
  border-color: rgba(11, 143, 168, 0.18);
  border-radius: 14px;
  background: #fbfdfe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.owner-listing-editor input:focus,
.owner-listing-editor select:focus,
.owner-listing-editor textarea:focus {
  border-color: rgba(255, 90, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.1);
}

.owner-form-errors {
  display: grid;
  gap: 6px;
}

.owner-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #076172;
  background: #eefbfe;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.owner-taxonomy-block {
  padding: 24px;
}

.owner-taxonomy-block + .owner-taxonomy-block {
  padding-top: 4px;
}

.owner-taxonomy-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.owner-taxonomy-title-row strong {
  display: block;
  color: #241607;
  font-size: 13px;
}

.owner-taxonomy-title-row small {
  display: block;
  margin-top: 4px;
  color: #776b5f;
  font-size: 10px;
}

.owner-category-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.owner-choice-card {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 18px;
  background: #fffaf4;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.owner-choice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 90, 0, 0.3);
  box-shadow: 0 14px 30px rgba(45, 25, 8, 0.08);
}

.owner-choice-card input,
.owner-amenity-card input,
.owner-booking-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.owner-choice-check {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: transparent;
  background: #ffffff;
  border: 1px solid rgba(11, 143, 168, 0.18);
  font-size: 13px;
  font-weight: 900;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.owner-choice-card.primary .owner-choice-check {
  border-color: rgba(255, 90, 0, 0.2);
}

.owner-choice-content {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.owner-choice-content strong {
  overflow: hidden;
  color: #241607;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-choice-content small {
  overflow: hidden;
  color: #776b5f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-choice-card input:checked + .owner-choice-check {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
}

.owner-choice-card input:checked ~ .owner-choice-content strong {
  color: #ff5a00;
}

.owner-choice-card:has(input:checked) {
  border-color: rgba(255, 90, 0, 0.38);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.16),
      transparent 28%
    ),
    #fff6ed;
  box-shadow: 0 16px 34px rgba(255, 90, 0, 0.1);
}

.owner-amenity-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.owner-amenity-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px 0 8px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 999px;
  color: #076172;
  background: #eefbfe;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.owner-amenity-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 143, 168, 0.32);
}

.owner-amenity-card span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.owner-amenity-card strong {
  font-size: 10px;
  font-weight: 850;
}

.owner-amenity-card:has(input:checked) {
  color: #241607;
  border-color: rgba(145, 242, 12, 0.58);
  background: linear-gradient(135deg, #91f20c, #dfff62);
}

.owner-amenity-card:has(input:checked) span {
  color: #ffffff;
  background: #241607;
}

.owner-media-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 24px 0;
}

.owner-upload-tile {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(255, 90, 0, 0.34);
  border-radius: 20px;
  color: #241607;
  background:
    radial-gradient(
      circle at top right,
      rgba(145, 242, 12, 0.16),
      transparent 26%
    ),
    #fffaf4;
  text-align: center;
  cursor: pointer;
}

.owner-upload-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owner-upload-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(36, 22, 7, 0.62) 100%
  );
  opacity: 0;
  transition: opacity 0.18s ease;
}

.owner-upload-tile:has(img)::after {
  opacity: 1;
}

.owner-upload-tile > span,
.owner-upload-tile strong,
.owner-upload-tile small {
  position: relative;
  z-index: 1;
}

.owner-upload-tile:has(img) strong,
.owner-upload-tile:has(img) small {
  color: #ffffff;
}

.owner-upload-tile > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5a00, #ff8730);
  font-size: 20px;
  font-weight: 900;
}

.owner-upload-tile strong {
  font-size: 12px;
}

.owner-upload-tile small {
  color: #776b5f;
  font-size: 10px;
}

.owner-booking-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(255, 90, 0, 0.15);
  border-radius: 18px;
  background: #fffaf4;
  cursor: pointer;
}

.owner-booking-toggle > span {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #ead8c5;
  transition: background 0.18s ease;
}

.owner-booking-toggle > span::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.owner-booking-toggle input:checked + span {
  background: linear-gradient(135deg, #91f20c, #bfff39);
}

.owner-booking-toggle input:checked + span::after {
  transform: translateX(22px);
}

.owner-booking-toggle strong {
  display: block;
  color: #241607;
  font-size: 12px;
}

.owner-booking-toggle small {
  display: block;
  margin-top: 4px;
  color: #776b5f;
  font-size: 10px;
}

.owner-listing-editor-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}

.owner-publish-card,
.owner-editor-help-card {
  border-color: rgba(255, 90, 0, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(45, 25, 8, 0.07);
}

.owner-publish-card {
  padding: 24px;
}

.owner-publish-card h3 {
  margin: 3px 0 9px;
  color: #241607;
  font:
    650 24px/1.12 Georgia,
    serif;
  letter-spacing: -0.025em;
}

.owner-publish-card p:not(.overline) {
  margin: 0 0 18px;
  color: #776b5f;
  font-size: 12px;
  line-height: 1.7;
}

.owner-publish-card .admin-button-wide {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

.owner-publish-card > a {
  display: flex;
  justify-content: center;
  margin-top: 13px;
  color: #776b5f;
  font-size: 11px;
  font-weight: 850;
}

.owner-publish-card > a:hover {
  color: #ff5a00;
}

.owner-editor-help-card {
  padding: 22px;
}

.owner-editor-help-card > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eefbfe;
  font-size: 22px;
}

.owner-editor-help-card h4 {
  margin: 13px 0 7px;
  color: #241607;
  font:
    650 19px/1.15 Georgia,
    serif;
}

.owner-editor-help-card p {
  margin: 0;
  color: #776b5f;
  font-size: 11px;
  line-height: 1.65;
}

/* Gallery/schedule component inside owner edit */
.owner-listing-editor .listing-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.owner-listing-editor .listing-gallery-item {
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 90, 0, 0.14);
  border-radius: 16px;
  background: #fffaf4;
}

.owner-listing-editor .listing-gallery-item img,
.owner-listing-editor .gallery-file-missing {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
}

.owner-listing-editor .gallery-file-missing {
  display: grid;
  place-items: center;
  color: #8d6b4b;
  background: #fff0df;
  font-size: 10px;
  text-align: center;
}

.owner-listing-editor .listing-gallery-item span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #776b5f;
  font-size: 10px;
  font-weight: 800;
}

.owner-listing-editor .listing-schedule {
  display: grid;
  gap: 11px;
  padding: 24px;
}

.owner-listing-editor .schedule-row {
  display: grid;
  grid-template-columns: 118px 110px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(11, 143, 168, 0.13);
  border-radius: 16px;
  background: #fbfdfe;
}

.owner-listing-editor .schedule-row strong {
  color: #241607;
  font-size: 12px;
}

.owner-listing-editor .schedule-row label {
  display: grid;
  gap: 5px;
  color: #776b5f;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.owner-listing-editor .schedule-closed {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: #8d6b4b !important;
  background: #fff0df;
}

@media (max-width: 1180px) {
  .owner-listing-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-listing-premium-grid {
    grid-template-columns: 1fr;
  }

  .owner-listing-editor,
  .owner-edit-hero {
    grid-template-columns: 1fr;
  }

  .owner-edit-hero-media {
    width: 100%;
    max-width: 260px;
  }

  .owner-listing-editor-side {
    position: static;
  }
}

@media (max-width: 760px) {
  .owner-listings-hero {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .owner-listing-stats-grid,
  .owner-form-grid,
  .owner-media-upload-grid,
  .owner-category-choice-grid {
    grid-template-columns: 1fr;
  }

  .owner-listings-toolbar,
  .owner-listing-card-footer,
  .owner-form-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .owner-support-link,
  .owner-listing-card-footer .admin-button {
    width: 100%;
    justify-content: center;
  }

  .owner-listing-premium-grid {
    padding: 14px;
  }

  .owner-edit-hero {
    padding: 20px;
  }

  .owner-edit-hero-media {
    height: 200px;
    max-width: none;
  }

  .owner-taxonomy-block,
  .owner-form-grid,
  .owner-media-upload-grid {
    padding: 18px;
  }

  .owner-listing-editor .listing-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-listing-editor .schedule-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Owner listing edit - category selection as amenity-style pills
   Page: /owner/listings/{id}/edit
   ========================================================= */

.owner-category-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.owner-category-pill {
  position: relative;
  display: inline-grid;
  grid-template-columns: 28px minmax(130px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  max-width: 100%;
  padding: 7px 9px 7px 8px;
  border: 1px solid rgba(11, 143, 168, 0.16);
  border-radius: 999px;
  color: #076172;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(145, 242, 12, 0.14),
      transparent 34%
    ),
    #eefbfe;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.owner-category-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 143, 168, 0.32);
  box-shadow: 0 12px 26px rgba(11, 143, 168, 0.08);
}

.owner-category-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.owner-category-pill-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #076172;
  background: #ffffff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(11, 143, 168, 0.1);
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.owner-category-pill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.owner-category-pill-copy strong {
  overflow: hidden;
  color: currentColor;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-category-pill-copy small {
  overflow: hidden;
  max-width: 190px;
  color: rgba(7, 97, 114, 0.68);
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-category-pill em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #8d6b4b;
  background: rgba(255, 255, 255, 0.72);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.owner-category-pill.primary {
  border-color: rgba(255, 90, 0, 0.18);
  color: #b44100;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 90, 0, 0.13), transparent 34%),
    #fff0e6;
}

.owner-category-pill.primary .owner-category-pill-check {
  color: #ff5a00;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.12);
}

.owner-category-pill.primary .owner-category-pill-copy small {
  color: rgba(180, 65, 0, 0.66);
}

.owner-category-pill.primary em {
  color: #b44100;
  background: #ffffff;
}

.owner-category-pill:has(input:checked) {
  color: #241607;
  border-color: rgba(145, 242, 12, 0.58);
  background: linear-gradient(135deg, #91f20c, #dfff62);
  box-shadow: 0 13px 28px rgba(145, 242, 12, 0.22);
}

.owner-category-pill:has(input:checked) .owner-category-pill-check {
  color: #ffffff;
  background: #241607;
  transform: rotate(45deg);
}

.owner-category-pill:has(input:checked) .owner-category-pill-copy small {
  color: rgba(36, 22, 7, 0.66);
}

.owner-category-pill:has(input:checked) em {
  color: #ffffff;
  background: rgba(36, 22, 7, 0.88);
}

@media (max-width: 620px) {
  .owner-category-pill {
    width: 100%;
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .owner-category-pill-copy small {
    max-width: 100%;
  }
}

.powered-by-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 24px;
  border-top: 1px solid var(--admin-line);
  background: var(--admin-paper);
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-muted);
  letter-spacing: 0.02em;
}

.powered-by-credit .powered-by-heart {
  display: inline-block;
  color: #ef4444;
  animation: powered-by-heartbeat 1.4s ease-in-out infinite;
}

.powered-by-credit a {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  color: var(--admin-coral);
  text-decoration: none;
  letter-spacing: 0.03em;
}

.powered-by-credit a:hover {
  text-decoration: underline;
}

@keyframes powered-by-heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  40% { transform: scale(1); }
  60% { transform: scale(1.22); }
}