/*
  MotoRent Beach Mode
  Loaded after page-level styles so it can restyle the system without
  changing existing PHP, layout, or behavior.
*/

:root {
  --beach-deep: #064955;
  --beach-ocean: #087a8f;
  --beach-lagoon: #17a7b8;
  --beach-foam: #eefcff;
  --beach-shell: #fffdf7;
  --beach-sun: #fcbf49;
  --beach-coral: #ff6b5f;
  --beach-coral-dark: #e6534f;
  --beach-palm: #2a9d8f;
  --beach-ink: #173642;
  --beach-muted: #5f767d;
  --beach-border: #bfe6ec;
  --beach-shadow: 0 12px 32px rgba(6, 73, 85, .11);
  --beach-hero: linear-gradient(135deg, #064955 0%, #087a8f 48%, #fcbf49 160%);
  --beach-page: linear-gradient(180deg, #e7fbff 0%, #f7fdfd 42%, #fff8e9 100%);

  --primary: var(--beach-deep) !important;
  --accent: var(--beach-coral) !important;
  --accent2: var(--beach-ocean) !important;
  --bg: var(--beach-foam) !important;
  --white: var(--beach-shell) !important;
  --text: var(--beach-ink) !important;
  --muted: var(--beach-muted) !important;
  --border: var(--beach-border) !important;
  --success: var(--beach-palm) !important;
  --warning: #a15c00 !important;
  --danger: #c84a4a !important;
  --shadow: var(--beach-shadow) !important;

  --dark: #063f4e !important;
  --dark2: #07586a !important;
  --dark3: #f7fdfd !important;
  --card: rgba(255, 253, 247, .96) !important;
  --red: var(--beach-coral) !important;
  --cyan: var(--beach-lagoon) !important;
}

html {
  background: var(--beach-foam);
}

body,
body *:not(i):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(code):not(pre):not(kbd):not(samp):not(.hash-mono) {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}

body {
  background: var(--beach-page) !important;
  color: var(--beach-ink) !important;
}

::selection {
  background: rgba(255, 107, 95, .28);
}

/* Shell navigation */
.sidebar,
.header,
.top-header {
  background: var(--beach-hero) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(6, 73, 85, .2) !important;
}

.sidebar-logo,
.sidebar-footer,
.sidebar .brand {
  border-color: rgba(255, 255, 255, .22) !important;
}

.sidebar-logo h1,
.sidebar-logo p,
.sidebar-user,
.sidebar-user strong,
.sidebar .brand,
.logo-name,
.logo-text,
.logo-sub,
.header .logo,
.top-header .logo-text {
  color: #fff !important;
}

.sidebar-logo p,
.sidebar-user,
.logo-sub {
  opacity: .78;
}

.nav-section {
  color: rgba(255, 255, 255, .58) !important;
}

.nav-item,
.sidebar a,
.nav-link {
  color: rgba(255, 255, 255, .82) !important;
}

.nav-item:hover,
.sidebar a:hover,
.nav-link:hover {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}

.nav-item.active,
.sidebar a.active {
  background: var(--beach-coral) !important;
  color: #fff !important;
}

.sidebar-footer a:not(.btn-logout) {
  display: block;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 8px;
}

/* Page surfaces */
.main,
.main-content,
.wrap,
.container {
  color: var(--beach-ink) !important;
}

.card,
.stat-card,
.moto-card,
.pay-opt,
.booking-id-box,
.alert-light,
.bg-light,
.bg-white,
.swal2-popup {
  background: rgba(255, 253, 247, .96) !important;
  border-color: var(--beach-border) !important;
  box-shadow: var(--beach-shadow) !important;
}

.card,
.stat-card,
.moto-card,
.pay-opt {
  border: 1px solid var(--beach-border) !important;
}

.card-header,
.table-light,
thead tr {
  background: #e5f8fb !important;
  border-color: var(--beach-border) !important;
}

th,
td,
.divider,
.detail-row,
.detail-section-title {
  border-color: var(--beach-border) !important;
}

tr:hover td,
.table-hover tbody tr:hover td {
  background: #f1fbfb !important;
}

.stat-card:hover,
.moto-card:hover,
.pay-opt:hover,
.card:hover {
  box-shadow: 0 16px 36px rgba(6, 73, 85, .14) !important;
}

/* Hero and dark summary panels */
.hero,
.summary-dark,
.total-box,
#durationBox,
div[style*="#1a1a2e"],
div[style*="#0f3460"],
div[style*="var(--primary)"] {
  background: var(--beach-hero) !important;
  color: #fff !important;
}

.summary-dark .sum-row,
.total-box,
#durationBox {
  border-color: rgba(255, 255, 255, .24) !important;
}

.sum-row.total .val,
.total-box .amount,
#estTotal {
  color: var(--beach-sun) !important;
}

/* Buttons and links */
a,
.breadcrumb a,
.breadcrumb-item a,
a[style*="#e94560"],
a[style*="var(--accent)"],
.right-side a,
.login-link a,
.back-link:hover {
  color: var(--beach-coral) !important;
}

.btn,
.action-btn,
.btn-submit,
.guest-btn,
.btn-logout,
button {
  border-radius: 10px !important;
}

.btn-danger,
.btn-primary,
.btn-submit,
.btn-new,
.btn-logout,
.btn-sm.btn-primary,
button[type="submit"] {
  background: var(--beach-coral) !important;
  border-color: var(--beach-coral) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(255, 107, 95, .24) !important;
}

.btn-danger:hover,
.btn-primary:hover,
.btn-submit:hover,
.btn-new:hover,
.btn-logout:hover,
button[type="submit"]:hover {
  background: var(--beach-coral-dark) !important;
  border-color: var(--beach-coral-dark) !important;
  color: #fff !important;
}

.btn-success,
.btn-approve:hover {
  background: var(--beach-palm) !important;
  border-color: var(--beach-palm) !important;
  color: #fff !important;
}

.btn-info,
.btn-view:hover {
  background: var(--beach-lagoon) !important;
  border-color: var(--beach-lagoon) !important;
  color: #fff !important;
}

.btn-warning,
.btn-sm.btn-warning {
  background: var(--beach-sun) !important;
  border-color: var(--beach-sun) !important;
  color: #4b3100 !important;
}

.btn-dark {
  background: var(--beach-deep) !important;
  border-color: var(--beach-deep) !important;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-primary,
.btn-outline {
  background: transparent !important;
  border-color: var(--beach-ocean) !important;
  color: var(--beach-ocean) !important;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-primary:hover,
.btn-outline:hover {
  background: var(--beach-ocean) !important;
  border-color: var(--beach-ocean) !important;
  color: #fff !important;
}

.header .btn-outline-light,
.top-header .btn-outline-light,
.header .btn-outline-light:hover,
.top-header .btn-outline-light:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  color: #fff !important;
}

.text-danger,
.text-primary,
.moto-price,
.booking-total,
.step-item.active .step-label {
  color: var(--beach-coral) !important;
}

.text-muted,
.booking-sub,
.booking-dates,
.booking-notes,
.input-hint,
.hint {
  color: var(--beach-muted) !important;
}

/* Forms */
input,
textarea,
select,
.form-control,
.form-select {
  background: #fff !important;
  border-color: var(--beach-border) !important;
  color: var(--beach-ink) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--beach-coral) !important;
  box-shadow: 0 0 0 .25rem rgba(255, 107, 95, .18) !important;
}

input::placeholder,
textarea::placeholder {
  color: #8aa0a6 !important;
}

label,
.form-label,
.card-title {
  color: var(--beach-ink) !important;
}

code {
  color: var(--beach-ocean) !important;
  background: rgba(23, 167, 184, .08);
  border-radius: 4px;
  padding: 1px 4px;
}

/* Booking flow */
.step-item:not(:last-child)::after {
  background: var(--beach-border) !important;
}

.step-item.active:not(:last-child)::after,
.step-item.done:not(:last-child)::after,
.step-item.active .step-num,
.selected-tick {
  background: var(--beach-coral) !important;
}

.step-item.active .step-num {
  box-shadow: 0 0 0 4px rgba(255, 107, 95, .2) !important;
}

.step-item.done .step-num {
  background: var(--beach-palm) !important;
}

.moto-card:hover,
.moto-card.selected,
.pay-opt:hover,
.pay-opt.selected {
  background: #eefcfd !important;
  border-color: var(--beach-coral) !important;
}

.tag,
.badge.bg-light,
.booking-id-box {
  background: #e7f8fb !important;
  color: var(--beach-deep) !important;
}

/* Login and registration screens */
.bg-blobs {
  background:
    linear-gradient(180deg, rgba(231, 251, 255, .98) 0%, rgba(183, 237, 243, .92) 48%, rgba(255, 248, 233, .98) 49%, rgba(255, 253, 247, .98) 100%) !important;
}

.blob {
  display: none !important;
}

.logo-title,
.ptitle h2,
.empty h3,
.page-header h1,
.page-header h2,
.page-header h3 {
  color: var(--beach-ink) !important;
}

.logo-title span,
.brand-name span,
.tab-btn.active {
  color: var(--beach-coral) !important;
}

.tabs {
  background: var(--beach-deep) !important;
}

.tab-btn {
  color: rgba(255, 255, 255, .68) !important;
}

.tab-btn.active {
  border-bottom-color: var(--beach-coral) !important;
}

.guest-btn {
  background: #eefcfd !important;
  border-color: var(--beach-border) !important;
  color: var(--beach-deep) !important;
}

.guest-btn:hover {
  background: #dff7fb !important;
}

.admin-hint {
  background: rgba(252, 191, 73, .14) !important;
  border-color: rgba(252, 191, 73, .45) !important;
  color: #7a4b00 !important;
}

.left {
  background: var(--beach-hero) !important;
}

.left::before {
  background:
    linear-gradient(150deg, transparent 0 55%, rgba(252, 191, 73, .32) 56% 70%, rgba(255, 253, 247, .22) 71% 100%) !important;
}

.tracks span {
  background: linear-gradient(90deg, transparent, rgba(255, 253, 247, .65), transparent) !important;
}

.right {
  background: #f7fdfd !important;
  border-left-color: var(--beach-border) !important;
}

.right .ptitle h2,
.right label {
  color: var(--beach-ink) !important;
}

.right input {
  background: #fff !important;
  color: var(--beach-ink) !important;
}

.back-link,
.login-link {
  color: var(--beach-muted) !important;
}

.perk {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

.perk-text,
.brand-tag {
  color: rgba(255, 255, 255, .82) !important;
}

.perk-text strong,
.brand-name {
  color: #fff !important;
}

.big-moto,
.brand-icon,
.logo-icon {
  filter: drop-shadow(0 14px 26px rgba(6, 73, 85, .2)) !important;
}

/* Alerts and badges */
.alert-warning,
.badge-pending,
.badge-missing {
  background: #fff2cf !important;
  border-color: #f8d989 !important;
  color: #714600 !important;
}

.alert-success,
.badge-active,
.badge-ok,
.badge-user,
.bg-success {
  background: #d9f4ec !important;
  color: #12634f !important;
}

.alert-danger,
.badge-cancelled,
.badge-tampered,
.btn-delete {
  background: #ffe1df !important;
  color: #9f302c !important;
}

.btn-delete:hover {
  background: #c84a4a !important;
  color: #fff !important;
}

.badge-returned,
.bg-info {
  background: #d9f7fb !important;
  color: #075f6d !important;
}

.badge-admin {
  background: #ffe7d5 !important;
  color: #88441e !important;
}

.bg-secondary,
.badge.bg-secondary {
  background: #557984 !important;
  color: #fff !important;
}

.bg-danger,
.badge.bg-danger {
  background: var(--beach-coral) !important;
}

.table-warning,
.table-warning > * > * {
  background: #fff2cf !important;
}

/* SweetAlert */
.swal2-popup {
  color: var(--beach-ink) !important;
}

.swal2-title {
  color: var(--beach-deep) !important;
}

.swal2-confirm {
  background: var(--beach-coral) !important;
}

.swal2-cancel {
  background: #557984 !important;
}

@media (max-width: 768px) {
  .header,
  .top-header {
    min-height: 60px;
    height: auto !important;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px !important;
  }
}