/* ==========================================================================
 * SERVICES
 * ==========================================================================
 * Service cards, offcanvas order drawer, and responsive helpers.
 * Bootstrap 5 compatible; keep business selectors stable.
 * ========================================================================== */

/* =================================================================== */
/* IMEI Order Page - Service Card System                              */
/* =================================================================== */

/* IMEI layout helpers */
.imei-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.imei-title .btn {
  margin: 0;
}

/* Service list layout and heights */
.service-list {
  height: calc(100vh - 340px);
}
.service-list.service-list-box {
  height: auto;
}
.service-list .border-bottom {
  padding-left: 0 !important;
}
/* Service information container (AJAX details) */
.service-information {
  overflow: auto;
}

/* Toggle service/order blocks (used by JS show/hide) */
.imeiservices .service,
.serverservices .service,
.orderdetail {
  display: none;
}

.imeiservices .service.active,
.serverservices .service.active,
.orderdetail.active {
  display: block;
}

/* Service category group filtering (used by JS category toggle) */
.group:not(.active) {
  display: none !important;
}
.service:not(.active) {
  display: none !important;
}

/* Order total styling */
.order-total {
  font-size: 35px;
}

/* =================================================================== */
/* Modern Service Cards (Grid/Offcanvas Layout)                       */
/* =================================================================== */

/* Core service card */
.modern-service-card {
  border-radius: var(--radius-card); /* Custom design, not Bootstrap default */
  overflow: hidden;
  background: #fff;
}
.modern-service-card:hover {
  box-shadow: var(--shadow-lg, var(--shadow-md));
  transform: translateY(-3px);
}
.modern-service-card:active {
  transform: translateY(-1px) scale(0.998);
}
.modern-service-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(232, 112, 30, 0.12);
}

/* Compact variant */
.compact-view .modern-service-card .card-title {
  font-size: 0.9rem;
}
.compact-view .modern-service-card .price {
  font-size: 0.95rem;
}
.compact-view .modern-service-card .time {
  font-size: 0.95rem;
}

/* Service logo container */
.modern-service-card .modern-service-logo {
  width: var(--service-logo-size);
  height: var(--service-logo-size);
  min-width: var(--service-logo-size);
  min-height: var(--service-logo-size);
  flex: 0 0 var(--service-logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.modern-service-card .service-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-logo); /* Custom radius for logos */
  display: block;
}

/* =================================================================== */
/* Service Logo & Badge Elements                                      */
/* =================================================================== */

/* Service logo fallback */
.modern-service-card .service-logo-fallback,
.modern-service-card .service-logo-fallback .bg-primary {
  width: var(--service-logo-size);
  height: var(--service-logo-size);
  border-radius: var(--radius-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.service-logo-fallback svg {
  width: 70%;
  height: 70%;
  display: block;
}

/* Service card text elements */
.modern-service-card .card-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}
.modern-service-card .card-text {
  font-size: 0.8rem;
  color: var(--muted-color, var(--color-text-secondary, #6b7280));
  margin-top: 0.125rem;
  margin-bottom: 0;
}
.modern-service-card .price {
  font-size: 1rem;
  color: var(--accent-color);
  font-weight: 700;
  margin-top: 0;
  text-align: right;
}
.modern-service-card .time {
  font-size: 1rem;
  color: var(--muted-color, var(--color-text-secondary, #6b7280));
}
.modern-service-card .badge-new {
  background: var(--color-danger-base);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.2rem 0.44rem;
}
.modern-service-card[role="button"] {
  -webkit-tap-highlight-color: transparent; /* Remove blue flash on tap (mobile) */
}

/* Service list flex behavior (stretch cards) */
.service-list .row.align-items-stretch > [class*="col-"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.service-list .row.align-items-stretch > [class*="col-"] .modern-service-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.modern-service-card:focus {
  outline: 2px solid rgba(232, 112, 30, 0.14); /* Custom focus outline */
  outline-offset: 1px;
}

/* =================================================================== */
/* IMEI Order Page Layout                                             */
/* =================================================================== */

/* Service placeholder shown before user selects a service */
.service-placeholder {
  color: #cbd5e1;
  font-weight: 300;
  padding: 1rem !important;
  margin-top: 1rem !important;
}

/* Loading overlay for AJAX requests */
.loader-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
}

.loader-overlay-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Page-level sizing for IMEI order layout */
.imei-order-form {
  min-height: calc(100vh - 140px);
}
.service-layout-row {
  flex: 1 1 auto;
  min-height: 0;
  gap: 1.5rem;
}

/* =================================================================== */
/* Offcanvas Order Drawer (Mobile/Desktop)                            */
/* =================================================================== */

@media (max-width: 991.98px) {
  .imei-order-form {
    min-height: auto;
  }
  .service-layout-row {
    gap: 1rem;
  }
}

/* Offcanvas styling - minimal custom overrides */
.order-drawer-offcanvas.offcanvas-end {
  width: clamp(320px, 92vw, 460px);
  background: var(--bs-offcanvas-bg, var(--bs-body-bg, var(--bg-light, #fff)));
}

@media (min-width: 768px) {
  .order-drawer-offcanvas.offcanvas-end {
    width: 500px;
  }
}

@media (min-width: 1200px) {
  .order-drawer-offcanvas.offcanvas-end {
    width: 600px;
  }
}

.order-drawer-offcanvas .offcanvas-header {
  background: var(--primary-color, #1c2533);
  color: #fff;
}

.order-drawer-offcanvas .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.order-drawer-offcanvas .btn-close:hover,
.order-drawer-offcanvas .btn-close:focus {
  opacity: 1;
}

.order-drawer-offcanvas .offcanvas-title {
  color: #fff !important;
}

.order-drawer-offcanvas .offcanvas-body {
  background: var(--bs-offcanvas-bg, var(--bs-body-bg, var(--bg-light, #fff)));
}

/* Remove padding from cards inside offcanvas to prevent double padding */
.order-drawer-offcanvas .card-place-retail-order {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Order drawer sections (dynamic AJAX content) */
.order-drawer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.order-drawer-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-drawer-fields {
  flex: 0 0 auto;
}

/* Force single-column layout inside drawer */
.order-drawer-offcanvas .order-drawer-fields-inner .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Full-width fields inside drawer */
.order-drawer-offcanvas .form-control,
.order-drawer-offcanvas .form-select,
.order-drawer-offcanvas textarea,
.order-drawer-offcanvas select {
  width: 100% !important;
}

/* Summary row for price/ETA */
.order-drawer-summary {
  padding: 0.75rem;
  background: var(--bg-neutral, #e2e8f0);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
}
.order-drawer-summary:empty {
  display: none;
}

/* Fixed footer CTA for offcanvas */
.order-drawer-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0) 0%,
    var(--bg-light, #f8fafc) 30%
  );
  padding: 0.85rem 1rem 1.05rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.12);
}
.order-drawer-footer .btn,
.order-drawer-footer button,
.order-drawer-footer input[type="button"],
.order-drawer-footer input[type="submit"],
.order-drawer-footer a.btn,
.order-drawer-footer .d-actionbar-mobile {
  width: 100% !important;
}
.order-drawer-footer .btn,
.order-drawer-footer .btn-primary,
.order-drawer-footer .placeorder,
.order-drawer-footer .d-actionbar-mobile .btn {
  color: var(--text-light, #fff) !important;
}
.order-drawer-footer .d-actionbar-mobile {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  position: static;
}

/* Service info section */
.order-drawer-info {
  padding-top: 0.25rem;
}
.order-drawer-info:empty {
  display: none;
}

/* Neutralize global mobile actionbar behavior when inside the order drawer */
.order-drawer-offcanvas .d-actionbar-mobile {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
}
.order-drawer-offcanvas .d-actionbar-mobile.is-hidden {
  transform: none !important;
}

/* IMEI paired inputs */
.order-drawer-offcanvas .input-imei .imei1,
.input-imei .imei1 {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.order-drawer-offcanvas .input-imei .imei2,
.input-imei .imei2 {
  flex: 0 0 auto;
  width: 60px !important;
  max-width: 80px;
}

@media (max-width: 575.98px) {
  .order-drawer-offcanvas.offcanvas-end {
    width: 100vw;
  }
  .order-drawer-offcanvas .offcanvas-body {
    padding: 0.85rem;
    padding-bottom: 5.5rem;
    overflow-y: auto;
  }
}

/* CTA visibility on small screens */
.imei-order-form .h-100.flex-column {
  height: auto !important;
  min-height: 0;
}

/* =================================================================== */
/* Sidebar Service List & Filter Bar                                  */
/* =================================================================== */

/* Service filter bar */
.service-filter-bar .service-group-select {
  min-width: 260px;
}

/* =================================================================== */
/* Responsive Breakpoints                                             */
/* =================================================================== */

/* Tablet and below */
@media (max-width: 991.98px) {
  .service-filter-bar .service-group-select {
    min-width: 100%;
  }
}

/* Mobile landscape and below */
@media (max-width: 767.98px) {
  .modern-service-card {
    min-height: 180px;
  }
  .modern-service-card .card-title {
    font-size: 0.85rem;
  }
}

/* Small mobile portrait */
@media (max-width: 575.98px) {
  /* Mobile card adjustments */
  .modern-service-card {
    min-height: var(--service-card-min-height);
    border-radius: var(--radius-card-mobile);
  }
  .modern-service-card .card-title {
    font-size: 0.9rem;
  }
  .service-list .modern-service-card {
    border-radius: var(--radius-card-mobile) !important;
    overflow: hidden;
  }
  .modern-service-logo .service-logo-fallback {
    width: var(--service-logo-size);
    height: var(--service-logo-size);
  }
}

/* =================================================================== */
/* Dynamic Responsive Variables (uses :root from base.css)            */
/* =================================================================== */
/* Note: --service-card-min-height, --service-logo-size, --service-card-padding
   are defined in base.css and automatically adjust per breakpoint */