/* Frontend widget and button edge accents.
   Palette: Golden Sunstone, Aquamarine Blue, Rosebud Pink, Soft Violet, Pale Lavender. */
:root {
  --edge-golden-sunstone: #D9B104;
  --edge-aquamarine-blue: #69C1D1;
  --edge-rosebud-pink: #C5778A;
  --edge-soft-violet: #978FB9;
  --edge-pale-lavender: #D1C3DB;
  --edge-accent-line: linear-gradient(135deg, #D9B104 0%, #69C1D1 24%, #C5778A 48%, #978FB9 68%, #D1C3DB 84%, #D9B104 100%);
  --edge-accent-soft: linear-gradient(135deg, rgba(217, 177, 4, .66), rgba(105, 193, 209, .54) 28%, rgba(197, 119, 138, .46) 54%, rgba(151, 143, 185, .42) 72%, rgba(209, 195, 219, .48) 88%, rgba(217, 177, 4, .42));
  --edge-accent-focus: 0 0 0 1px rgba(217, 177, 4, .18), 0 0 0 3px rgba(151, 143, 185, .24), 0 8px 22px rgba(197, 119, 138, .10);
  --edge-accent-hover: 0 0 0 1px rgba(105, 193, 209, .16), 0 3px 10px rgba(31, 22, 0, .07);
  --edge-accent-inset: inset 0 1px 0 rgba(255, 255, 255, .35);
  --edge-accent-width: 1px;
  --edge-accent-radius: inherit;
}

.edge-accent,
.widget,
.dashboard-widget,
.widget-container,
.widget-body,
.panel,
.panel-body,
.box,
.box-body,
.card,
.card-body,
.content-card,
.service-card,
.profile-card,
.booking-card,
.payment-card,
.wallet-card,
.trip-card,
.order-card,
.store-card,
.listing-card,
.event-card,
.section-card,
.account-box,
.form-box,
.content-box,
.info-box,
.summary-box,
.inner,
.container-inner,
.content-wrapper,
.section-block,
.content-block,
.well,
.jumbotron,
.modal-content,
.dropdown-menu,
.popover,
.list-group,
.list-group-item,
.table,
.data-table,
.grid,
.pagination > li > a,
.pagination > li > span,
.page-link,
.nav-tabs > li > a,
.nav-pills > li > a,
.tab-link,
.input-group,
.select2-container .select2-selection {
  border: var(--edge-accent-width) solid transparent !important;
  background-image: linear-gradient(var(--edge-surface, var(--surface, #fff)), var(--edge-surface, var(--surface, #fff))), var(--edge-accent-soft) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: var(--edge-accent-inset) !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-default,
.button,
.button-primary,
.button-secondary,
.button-outline,
.action-button,
.quick-action,
.widget-action-btn,
a.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border: var(--edge-accent-width) solid rgba(105, 193, 209, .42) !important;
  border-image-source: var(--edge-accent-line) !important;
  border-image-slice: 1 !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  box-shadow: var(--edge-accent-inset) !important;
}

.btn-link {
  border-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.edge-accent:hover,
.widget:hover,
.dashboard-widget:hover,
.widget-container:hover,
.panel:hover,
.box:hover,
.card:hover,
.content-card:hover,
.service-card:hover,
.profile-card:hover,
.booking-card:hover,
.payment-card:hover,
.wallet-card:hover,
.trip-card:hover,
.order-card:hover,
.store-card:hover,
.listing-card:hover,
.event-card:hover,
.section-card:hover,
.account-box:hover,
.form-box:hover,
.content-box:hover,
.info-box:hover,
.summary-box:hover,
.list-group-item:hover,
.btn:hover,
.button:hover,
.action-button:hover,
.quick-action:hover,
.widget-action-btn:hover,
a.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  box-shadow: var(--edge-accent-inset), var(--edge-accent-hover) !important;
}

.edge-accent:focus-within,
.widget:focus-within,
.panel:focus-within,
.box:focus-within,
.card:focus-within,
.content-card:focus-within,
.service-card:focus-within,
.profile-card:focus-within,
.booking-card:focus-within,
.payment-card:focus-within,
.wallet-card:focus-within,
.trip-card:focus-within,
.order-card:focus-within,
.store-card:focus-within,
.listing-card:focus-within,
.event-card:focus-within,
.form-box:focus-within,
.content-box:focus-within,
.info-box:focus-within,
.summary-box:focus-within,
.btn:focus,
.button:focus,
.action-button:focus,
.quick-action:focus,
.widget-action-btn:focus,
a.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.select2-container.select2-container--open .select2-selection {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: var(--edge-accent-inset), var(--edge-accent-focus) !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background-image: linear-gradient(var(--edge-input-surface, #fff), var(--edge-input-surface, #fff)), var(--edge-accent-line) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

.alert,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.notification {
  border-left: 3px solid var(--edge-aquamarine-blue) !important;
  box-shadow: inset 1px 0 0 rgba(151, 143, 185, .34) !important;
}

.progress,
.badge,
.label,
.tag {
  border: 1px solid rgba(105, 193, 209, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.progress-bar {
  background-image: linear-gradient(90deg, #D9B104 0%, #69C1D1 30%, #C5778A 54%, #978FB9 72%, #D1C3DB 88%, #D9B104 100%) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.data-table th,
.data-table td,
.grid th,
.grid td {
  border-color: rgba(105, 193, 209, .24) !important;
}

.is-active,
.active.edge-accent,
.widget.active,
.panel.active,
.box.active,
.card.active,
.list-group-item.active,
.nav-tabs > li.active > a,
.nav-pills > li.active > a,
.tab-link.active,
.pagination > li.active > a,
.pagination > li.active > span,
.page-link.active {
  border-color: transparent !important;
  background-image: linear-gradient(var(--edge-active-surface, var(--edge-surface, #fff)), var(--edge-active-surface, var(--edge-surface, #fff))), var(--edge-accent-line) !important;
  box-shadow: var(--edge-accent-inset), 0 0 0 1px rgba(217, 177, 4, .24), 0 8px 20px rgba(197, 119, 138, .10) !important;
}

.btn:disabled,
button:disabled,
input:disabled,
.disabled,
[aria-disabled="true"] {
  box-shadow: inset 0 0 0 1px rgba(151, 143, 185, .18) !important;
  opacity: .65;
}

@media (max-width: 768px) {
  :root {
    --edge-accent-hover: 0 0 0 1px rgba(105, 193, 209, .16);
    --edge-accent-focus: 0 0 0 1px rgba(217, 177, 4, .16), 0 0 0 3px rgba(151, 143, 185, .18);
  }
}

/* Calm hover motion: keep inline icons anchored while preserving a quiet hover state. */
.btn:hover i,
.btn:focus i,
.button:hover i,
.button:focus i,
.action-button:hover i,
.action-button:focus i,
.quick-action:hover i,
.quick-action:focus i,
.widget-action-btn:hover i,
.widget-action-btn:focus i,
a.btn:hover i,
a.btn:focus i,
button:hover i,
button:focus i,
.navmenu-links a:hover i,
.navmenu-links a:focus i,
.site-nav a:hover i,
.site-nav a:focus i {
  transform: none !important;
}

/* No-hover responsive utility safeguards. */
.d-flex.align-center.flex-start:hover,
.d-flex.align-center.flex-start:focus,
.d-flex.align-center.flex-start:focus-within,
.d-flex.align-center.flex-start:active,
.icon-question-sign:hover,
.icon-question-sign:focus,
.icon-question-sign:active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  outline: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.d-flex.align-center.flex-start:hover *,
.d-flex.align-center.flex-start:focus *,
.d-flex.align-center.flex-start:focus-within *,
.d-flex.align-center.flex-start:active *,
.icon-question-sign:hover::before,
.icon-question-sign:focus::before,
.icon-question-sign:active::before {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transform: none !important;
}

.icon-question-sign,
.icon-question-sign:hover,
.icon-question-sign:focus,
.icon-question-sign:active {
  color: var(--text-muted, #433300) !important;
  cursor: help;
}

@media (max-width: 768px) {
  .d-flex.align-center.flex-start {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .d-flex.align-center.flex-start > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .d-flex.align-center.flex-start label,
  .d-flex.align-center.flex-start span,
  .d-flex.align-center.flex-start p,
  .d-flex.align-center.flex-start strong {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .icon-question-sign {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 18px !important;
    justify-content: center !important;
    line-height: 18px !important;
    margin-inline: 4px !important;
    max-width: 18px !important;
    min-width: 18px !important;
    vertical-align: middle !important;
    width: 18px !important;
  }
}

/* Mobile responsive hardening: final frontend safety layer. */
@media (max-width: 1024px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  img,
  video,
  canvas,
  svg,
  iframe {
    height: auto !important;
    max-width: 100% !important;
  }

  .container,
  .container-fluid,
  .wrapper,
  .main-wrapper,
  .page-wrapper,
  .content-wrapper,
  .content-container,
  .section,
  section,
  .row,
  .grid,
  .grid-container,
  .dashboard,
  .dashboard-grid,
  .booking-request-inner {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .row,
  .grid,
  .grid-container,
  .dashboard,
  .dashboard-grid,
  .form-row,
  .button-group,
  .button-container,
  .action-buttons,
  .booking-request-inner .booking-heading,
  .booking-request-inner .booking-footer {
    flex-wrap: wrap !important;
  }

  .widget,
  .card,
  .panel,
  .box,
  .section,
  .booking-request-inner .booking-block,
  .modal-content {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .table-responsive,
  .table-wrapper,
  .table-container,
  .dataTables_wrapper,
  .driver-trip-table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 768px) {
  .container,
  .container-fluid,
  .wrapper,
  .main-wrapper,
  .page-wrapper,
  .content-wrapper,
  .content-container,
  .section,
  section {
    padding-left: clamp(12px, 4vw, 18px) !important;
    padding-right: clamp(12px, 4vw, 18px) !important;
  }

  .row,
  .form-row,
  .grid-row,
  .flex-row {
    flex-direction: column !important;
    gap: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .col,
  [class*="col-"],
  .column,
  .grid-col,
  .flex-col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .widget,
  .card,
  .panel,
  .box,
  .content-card,
  .service-card,
  .profile-card,
  .booking-card,
  .payment-card,
  .wallet-card,
  .modal-content {
    border-radius: 12px !important;
    padding: clamp(14px, 4vw, 18px) !important;
  }

  .widget-header,
  .card-header,
  .panel-heading,
  .widget-footer,
  .card-footer,
  .panel-footer,
  .form-actions,
  .button-group,
  .button-container,
  .action-buttons {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .button-group > .btn,
  .button-container > .btn,
  .action-buttons > .btn,
  .form-actions > .btn,
  .button-group > button,
  .button-container > button,
  .action-buttons > button,
  .form-actions > button,
  .booking-request-inner .booking-footer button,
  .booking-request-inner .booking-footer .submitbtn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  input,
  select,
  textarea,
  .form-control,
  .select2-container,
  .select-wrapper {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .table-responsive table,
  .table-wrapper table,
  .table-container table,
  .dataTables_wrapper table,
  .driver-trip-table table {
    min-width: 640px !important;
  }

  .modal-dialog {
    margin: 12px auto !important;
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 480px) {
  h1,
  .h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.12 !important;
  }

  h2,
  .h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.16 !important;
  }

  .widget,
  .card,
  .panel,
  .box,
  .section,
  section,
  .booking-request-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}