/*!
 * TrueHelpers landing-page modern pass (Phase 1, CSS-only).
 * Loaded LAST in landing-page/partials/_head.blade.php — overrides the
 * Iqonic landing theme without touching its minified files.
 * Brand: primary #B52926, dark #0D222D, navy #374785.
 */

/* ============ Typography: Inter everywhere (Fiverr look) ============
   The theme's stacks name "Work Sans"/"Inter" but no font file was ever
   loaded — pages rendered in the browser's generic fallback. Inter is
   loaded in _head.blade.php; this makes it the actual landing font. */
body,
h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select,
.select2-container .select2-selection__rendered,
.select2-results__option {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============ Header: Fiverr-style hairline under the nav ============ */
header .navbar.header-hover-menu {
  border-bottom: 1px solid #e4e5e7;
}

/* ============ Categories strip: slim Fiverr row under the header ====== */
.cat-strip {
  background: #fff;
  border-bottom: 1px solid #e4e5e7;
}
.cat-strip-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.cat-strip-inner::-webkit-scrollbar {
  display: none;
}
.cat-strip-inner a {
  display: inline-block;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #62646a;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cat-strip-inner a:hover {
  color: #222325;
  border-bottom-color: #b52926;
}
/* Right arrow: white fade + chevron, shown by landing-brand.js while
   more items are off-screen */
.cat-strip-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; /* content edge — anchored by .cat-strip-wrap, inside the padding */
  width: 48px;
  border: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 55%);
  align-items: center;
  justify-content: flex-end;
  padding: 0 2px 0 0;
  color: #404145;
  cursor: pointer;
}

/* ============ Page width: content aligned with the header ============
   The header nav (.container-fluid.navbar-inner) is padded
   0 calc(--bs-gutter-x * 2) by the theme. Every landing page except
   home (class set in layouts/default) mirrors that formula, so content
   starts at the logo's left edge and ends at the user icon. */
@media (min-width: 768px) {
  /* ONE padding value stamped on all three surfaces (nav, strip, page
     content) so every row starts at exactly the same x — the theme gave
     each a different inset (nav 4rem via CDN css, containers 1rem). */
  header .navbar.header-hover-menu .navbar-inner,
  .cat-strip .container-fluid,
  .page-align-header .container,
  footer.footer .container {
    max-width: 100%;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}
/* First strip link hugs the shared left edge (its own padding pushed it
   10px right of the logo) */
.cat-strip-inner a:first-child {
  padding-left: 0;
}

/* ============ Service cards: white elevated, hover lift ============ */
.service-box-card {
  background: #fff !important; /* replaces the flat bg-light gray slab */
  border: 1px solid #eef0f3;
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-box-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13, 34, 45, 0.1);
}
.service-box-card .iq-image {
  overflow: hidden;
  border-radius: 12px;
}
.service-box-card .iq-image img.service-img {
  border-radius: 12px !important;
  transition: transform 0.35s ease;
}
.service-box-card:hover .iq-image img.service-img {
  transform: scale(1.04);
}
/* Wishlist heart: real tap target with depth */
.service-box-card .serv-whishlist {
  width: 2.25rem;
  height: 2.25rem;
  top: 0.75rem;
  right: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease;
}
.service-box-card .serv-whishlist:hover {
  transform: scale(1.1);
}
.service-box-card .serv-whishlist svg {
  width: 16px;
  height: 17px;
}
.service-box-card .service-user-name:hover {
  color: var(--bs-primary);
}

/* ============ Blog cards: editorial, no template noise ============ */
.iq-blog .blog-image,
.iq-blog .blog-image a {
  border-radius: 16px;
  overflow: hidden;
}
.iq-blog .blog-image img {
  border-radius: 16px !important;
  transition: transform 0.35s ease;
}
.iq-blog:hover .blog-image img {
  transform: scale(1.03);
}
/* Kill the view-count eye badge stamped on every cover image */
.iq-blog .blog-image > span.position-absolute {
  display: none !important;
}
/* Meta strip: quiet inline meta instead of a gray slab */
.iq-blog .blog-meta-data {
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
}
/* Close the dead vertical gap before the author/read-more row (mt-5 in the
   component) */
.iq-blog .iq-blog-meta-bottom {
  margin-top: 1rem !important;
}

/* ============ Restaurant cards: hover response ============ */
.restaurant-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.restaurant-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13, 34, 45, 0.12) !important;
}

/* ============ Filter chips (pill outline buttons) ============ */
.btn-outline-secondary.rounded-pill {
  border-color: #e2e6ea;
  color: #39465f;
}
.btn-outline-secondary.rounded-pill:hover {
  background: rgba(181, 41, 38, 0.06);
  border-color: rgba(181, 41, 38, 0.35);
  color: #b52926;
}

/* ============ Filter controls ============ */
.form-select,
.select2-container--default .select2-selection--single {
  border-radius: 10px;
  border-color: #e2e6ea;
}

/* ============ Blog detail: 80% article column + editorial typography ==== */
.blog-detail > .blog-image {
  max-width: 80%;
  margin: 28px auto 0;
  border-radius: 20px;
  overflow: hidden;
}
.blog-detail > .blog-image img {
  max-height: 480px;
  object-fit: cover;
}
.blog-detail .blog-heading-part .container,
.blog-detail .blog-content-part .container {
  max-width: 80%;
}
@media (max-width: 991px) {
  .blog-detail > .blog-image,
  .blog-detail .blog-heading-part .container,
  .blog-detail .blog-content-part .container {
    max-width: 100%;
  }
  .blog-detail > .blog-image {
    border-radius: 0;
    margin-top: 0;
  }
}
.blog-detail .blog-detail-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  color: #1d2630;
}
.blog-detail .blog-meta {
  padding-top: 1.25rem !important;
}

/* Article body: rich HTML from the editor */
.blog-detail .description {
  font-size: 17px;
  line-height: 1.8;
  color: #39465f;
}
.blog-detail .description h1,
.blog-detail .description h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1d2630;
  line-height: 1.35;
  margin: 2rem 0 0.75rem;
}
.blog-detail .description h3 {
  font-size: 21px;
  font-weight: 700;
  color: #1d2630;
  margin: 1.75rem 0 0.6rem;
}
.blog-detail .description h4,
.blog-detail .description h5 {
  font-size: 18px;
  font-weight: 600;
  color: #1d2630;
  margin: 1.5rem 0 0.5rem;
}
.blog-detail .description p {
  margin-bottom: 1rem;
}
.blog-detail .description ul,
.blog-detail .description ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.blog-detail .description li {
  margin-bottom: 0.5rem;
}
.blog-detail .description a {
  color: #374785;
  text-decoration: underline;
}
.blog-detail .description a:hover {
  color: #b52926;
}
.blog-detail .description img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1rem 0;
}
.blog-detail .description blockquote {
  border-left: 4px solid #b52926;
  background: #faf7f7;
  padding: 1rem 1.25rem;
  border-radius: 0 12px 12px 0;
  margin: 1.5rem 0;
}
.blog-detail .description table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 15px;
}
.blog-detail .description table th {
  background: #f4f6f8;
  color: #1d2630;
  font-weight: 600;
  text-align: left;
}
.blog-detail .description table th,
.blog-detail .description table td {
  border: 1px solid #e7eaee;
  padding: 10px 14px;
}
.blog-detail .description table tr:nth-child(even) td {
  background: #fafbfc;
}

/* ============ Service card: rating chip, provider row, heart state ===== */
.rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(229, 138, 0, 0.12);
  color: #b56d00;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.rating-chip:hover {
  background: rgba(229, 138, 0, 0.2);
  color: #b56d00;
}
.rating-chip .rating-chip-count {
  font-weight: 500;
  opacity: 0.75;
}
.service-box-card .provider-row {
  border-top: 1px solid #f0f2f5;
}
/* Filled heart when favourited (toggled by landing-brand.js) */
.js-fav-toggle .fav-heart-body {
  fill: transparent;
  transition: fill 0.15s ease;
}
.js-fav-toggle.is-fav .fav-heart-body {
  fill: currentColor;
}

/* ============ Equal-height cards: footer pinned, price emphasized ====== */
.service-box-card .iq-image {
  flex-shrink: 0;
}
.service-box-card .card-footer-row .text-primary {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* ============ Card CTA button + restaurant chips/placeholder ============ */
.card-cta {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  white-space: nowrap;
}
.card-cta.w-100 {
  text-align: center;
}
.cuisine-chip {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #0d222d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.resto-placeholder {
  background: linear-gradient(135deg, #374785 0%, #0d222d 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 44px;
  font-weight: 700;
}

/* ============ Food cards: Signature-Dishes style (pastel tints) ======== */
.food-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(13, 34, 45, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.food-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(13, 34, 45, 0.12);
}
.food-tint-0 { background: #fdf1e7; } /* peach */
.food-tint-1 { background: #f3edfd; } /* lavender */
.food-tint-2 { background: #e9f6f2; } /* mint */

.food-card-img {
  flex-shrink: 0;
  overflow: hidden;
}
.food-card-img img,
.food-card-img .resto-placeholder {
  height: 215px;
  object-fit: cover;
  display: flex;
  transition: transform 0.35s ease;
}
.food-card:hover .food-card-img img {
  transform: scale(1.04);
}
.food-card-body {
  padding: 16px 18px 18px;
}
.food-card-body .service-title,
.food-card-body .service-title:hover {
  color: #1d2630;
}
.food-meta {
  font-size: 13px;
  color: #5b6b79;
  margin-bottom: 14px;
}
.food-chip {
  position: absolute;
  top: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #0d222d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.food-chip-left { left: 10px; }
.food-chip-right { right: 10px; }
.food-chip-dark {
  background: rgba(13, 34, 45, 0.85);
  color: #fff;
}

/* CTA colors rotate with the card tint (orange / purple / teal) */
.food-cta {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  color: #fff !important;
  border: none;
  text-align: center;
}
.food-cta-0 { background: #f97316 !important; }
.food-cta-0:hover { background: #ea6a0c !important; }
.food-cta-1 { background: #7c3aed !important; }
.food-cta-1:hover { background: #6d31d4 !important; }
.food-cta-2 { background: #0f9d8f !important; }
.food-cta-2:hover { background: #0c8a7e !important; }

/* ============ Restaurants (/restaurants): foodpanda-style card ========
   Reference: cover image, white panel with logo + bold name + amber star
   rating, cuisine line, then "clock 20-30 min | bike fee" meta row with
   red "Free Delivery". Page shares the /service-list architecture
   (service-list-section white canvas, service-filter-bar search, chips). */
.resto-card {
  position: relative; /* anchors the stretched-link */
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(13, 34, 45, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.resto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(13, 34, 45, 0.12);
}
.resto-card-img {
  flex-shrink: 0;
  overflow: hidden;
}
.resto-card-img img,
.resto-card-img .resto-placeholder {
  height: 180px; /* 4-across grid */
  object-fit: cover;
  display: flex;
}
.resto-card-body {
  padding: 14px 16px 16px;
}
.resto-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #eef0f3;
  background: #fff;
}
.resto-logo-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #374785;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resto-name {
  font-size: 18px;
  font-weight: 700;
  color: #222325;
  line-height: 1.3;
}
.resto-card a:hover .resto-name {
  color: #b52926;
}
.resto-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #222325;
  line-height: 1;
}
.resto-rating svg {
  color: #f5a623; /* amber star, like the reference */
}
.resto-rating .rating-count {
  font-weight: 400;
  color: #95979d;
}
.resto-cuisine-line {
  font-size: 14.5px;
  color: #62646a;
  margin-top: 10px;
}
.resto-meta {
  margin-top: 12px;
  padding-top: 2px;
  font-size: 14.5px;
  color: #62646a;
  gap: 12px;
}
.resto-meta .meta-divider {
  width: 1px;
  height: 18px;
  background: #e4e5e7;
  flex-shrink: 0;
}
.resto-meta .free-delivery {
  color: #b52926;
  font-weight: 600;
}

/* Fiverr-style filter chips (quick filters + cuisines) */
.chip-btn {
  border: 1px solid #c5c6c9;
  background: #fff;
  color: #404145;
  font-weight: 600;
  font-size: 14px;
  padding-top: 7px;
  padding-bottom: 7px;
  transition: background 0.15s ease;
}
.chip-btn:hover {
  background: #f5f5f5;
  border-color: #74767e;
  color: #222325;
}
.chip-btn-active,
.chip-btn-active:hover {
  background: #222325;
  border-color: #222325;
  color: #fff;
}
/* Scrollable chip rows: hidden scrollbar + round right arrow */
.chip-scroll {
  scrollbar-width: none; /* Firefox */
}
.chip-scroll::-webkit-scrollbar {
  display: none;
}
.chip-arrow {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e4e5e7;
  background: #fff;
  color: #222325;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.chip-arrow:hover {
  background: #f5f5f5;
}

/* ============ Blog card: quiet meta line ============ */
.blog-meta-line {
  font-size: 13px;
  color: #6c757d;
}
.blog-meta-line .meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c6ccd2;
  display: inline-block;
}

/* ============ Blog cards (list page): editorial white card ============ */
.blog-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13, 34, 45, 0.1);
}
.blog-card-img {
  overflow: hidden;
  flex-shrink: 0;
}
.blog-card-img img,
.blog-img-placeholder {
  height: 190px;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.03);
}
.blog-img-placeholder {
  background: linear-gradient(135deg, #374785 0%, #0d222d 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 40px;
  font-weight: 700;
}
.blog-card-body {
  padding: 16px 18px 18px;
}
.blog-cat-chip {
  align-self: flex-start;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  margin-top: -30px; /* overlaps the image bottom edge, like the reference */
  position: relative;
  z-index: 1;
}
.blog-cat-0 { background: #22b8cf; } /* cyan */
.blog-cat-1 { background: #6366f1; } /* indigo */
.blog-cat-2 { background: #ec4899; } /* pink */
.blog-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #1d2630;
  line-height: 1.4;
}
.blog-card a:hover .blog-card-title {
  color: #b52926;
}
.blog-card-excerpt {
  font-size: 14px;
  color: #5b6b79;
  line-height: 1.6;
}
.blog-card-footer {
  border-top: 1px solid #f0f2f5;
}
.blog-card-author {
  font-size: 14px;
  font-weight: 600;
  color: #1d2630;
}
.blog-card-date {
  font-size: 12.5px;
  color: #8a94a0;
}

/* ============ Headings on dark imagery stay white ============
   brand-theme.css colors h1-h6 dark directly, which outranks the
   inherited color from a .text-white parent. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

/* ============ Restaurant detail: white canvas + menu polish ============ */
.resto-detail {
  background: #fff;
}
.resto-detail .resto-name {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.resto-detail .menu-nav-link {
  color: #39465f;
  font-size: 15px;
  transition: background 0.15s ease, color 0.15s ease;
}
.resto-detail .menu-nav-link:hover {
  background: rgba(181, 41, 38, 0.06) !important;
  color: #b52926;
}
.resto-detail .menu-cat-title {
  font-size: 21px;
  color: #1d2630;
  border-color: #eef0f3 !important;
}
.resto-detail .menu-item {
  border-radius: 12px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-color: #f0f2f5 !important;
  transition: background 0.15s ease;
}
.resto-detail .menu-item:hover {
  background: #fafbfc;
}
.resto-detail .card {
  border: 1px solid #eef0f3;
  box-shadow: 0 8px 24px rgba(27, 46, 94, 0.08);
  border-radius: 16px;
}

/* ============ Service detail: sticky booking card + mobile bar ========== */
.booking-sticky {
  position: sticky;
  top: 96px;
}
.service-detail .booking-card {
  border: 1px solid #eef0f3;
  box-shadow: 0 8px 24px rgba(27, 46, 94, 0.08);
}
.booking-price {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}
.mobile-book-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1029;
  background: #fff;
  border-top: 1px solid #e7eaee;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -6px 20px rgba(13, 34, 45, 0.08);
}
@media (max-width: 991px) {
  .service-detail {
    padding-bottom: 84px; /* clear the fixed booking bar */
  }
}

/* ============ Service detail: Fiverr-style page anatomy ============
   Breadcrumb → title → seller strip → gallery → about + meta grid →
   add-ons → provider card → packages → FAQ → reviews w/ star bars →
   related. Sticky card: price + off-badge, feature checklist, breakdown. */
.sd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  color: #74767e;
  margin-bottom: 10px;
}
.sd-breadcrumb a {
  color: #74767e;
}
.sd-breadcrumb a:hover {
  color: #222325;
  text-decoration: underline;
}
.sd-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: #222325;
  line-height: 1.35;
  margin-bottom: 14px;
}
.service-detail .sd-seller-row {
  font-size: 14px;
  color: #62646a;
  margin-bottom: 20px;
}
.sd-seller-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.sd-seller-name {
  font-weight: 700;
  color: #222325;
}
.sd-seller-link:hover .sd-seller-name {
  text-decoration: underline;
}
.sd-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e8f7f0;
  color: #1a7f54;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
}
.sd-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c5c6c9;
  display: inline-block;
}
.sd-rating-val {
  font-weight: 700;
  color: #222325;
}
.sd-section {
  margin-top: 44px;
}
.sd-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #222325;
  margin-bottom: 16px;
}
.sd-desc {
  color: #404145;
  font-size: 15px;
  line-height: 1.7;
}
.sd-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e4e5e7;
}
.sd-meta-label {
  font-size: 13px;
  color: #74767e;
  margin-bottom: 2px;
}
.sd-meta-value {
  font-size: 14px;
  color: #222325;
  font-weight: 600;
}
.sd-card {
  border: 1px solid #e4e5e7;
  border-radius: 12px;
  padding: 24px;
}
.sd-hr {
  border-color: #e4e5e7;
  opacity: 1;
  margin: 20px 0;
}
.sd-provider-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}
.sd-provider-name {
  font-weight: 700;
  color: #222325;
}
.sd-provider-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 24px;
}
.btn-view-profile {
  display: inline-block;
  border: 1px solid #222325;
  color: #222325;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  background: #fff;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-view-profile:hover {
  background: #222325;
  color: #fff;
}
.sd-addon {
  border: 1px solid #e4e5e7;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.sd-addon:hover {
  border-color: #b5b6ba;
}
.sd-addon-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}
.sd-addon-name {
  font-size: 15px;
  font-weight: 600;
  color: #222325;
}
.sd-addon-price {
  font-size: 14px;
  color: #62646a;
}
.sd-addon .form-check-input {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.sd-rating-big {
  font-size: 44px;
  font-weight: 700;
  color: #222325;
  line-height: 1.1;
}
.sd-review-summary {
  font-size: 14px;
  color: #74767e;
}
.sd-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #404145;
  margin-bottom: 8px;
}
.sd-bar-label {
  width: 52px;
  flex-shrink: 0;
}
.sd-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #efeff0;
  overflow: hidden;
}
.sd-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #e58a00;
}
.sd-bar-count {
  min-width: 36px;
  text-align: right;
  color: #74767e;
  font-size: 13px;
}
.sd-review-item {
  padding: 20px 0;
  border-bottom: 1px solid #efeff0;
  list-style: none;
}
.sd-review-item:last-child {
  border-bottom: none;
}
.sd-review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.sd-review-date {
  font-size: 13px;
  color: #74767e;
}
.sd-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sd-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #404145;
  padding: 5px 0;
}
.sd-feature-list svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: #1a7f54;
}
.sd-price-old {
  color: #b5b6ba;
  text-decoration: line-through;
  font-size: 17px;
  font-weight: 600;
}
.sd-off-badge {
  background: #e8f7f0;
  color: #1a7f54;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}
.sd-breakdown {
  font-size: 14px;
}
.sd-breakdown .row-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  color: #404145;
}
.sd-breakdown .row-total {
  border-top: 1px solid #e4e5e7;
  margin-top: 6px;
  padding-top: 11px;
  font-weight: 700;
  color: #222325;
  font-size: 15px;
}
.sd-side-box {
  background: #fafafa;
  border: 1px solid #efeff0;
  border-radius: 12px;
  padding: 20px;
}
.sd-side-box h6 {
  font-size: 15px;
  font-weight: 700;
  color: #222325;
}
.sd-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid #dadbdd;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  color: #404145;
}
@media (max-width: 575px) {
  .sd-section {
    margin-top: 32px;
  }
  .sd-card {
    padding: 18px;
  }
}

/* ============ Provider detail: Fiverr seller-profile ============
   White sticky profile card (avatar, verified, rating, stats) + about,
   inline why-choose-me checklist, /service-list fiv-cards, review bars. */
.provider-detail .pd-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.provider-detail .pd-name {
  font-size: 20px;
  font-weight: 700;
  color: #222325;
}
.provider-detail .pd-designation {
  font-size: 14px;
  color: #62646a;
}
.provider-detail .pd-city {
  font-size: 14px;
  color: #74767e;
}
.provider-detail .pd-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  padding: 6px 0;
}
.provider-detail .pd-stat-label {
  color: #74767e;
}
.provider-detail .pd-stat-value {
  font-weight: 600;
  color: #222325;
  text-align: right;
}

/* ============ Service list: Fiverr-style cards ============
   datatable-card.blade.php (.fiv-card): flat, borderless card on a white
   page — the image IS the card, text sits directly on the page below it
   (exact Fiverr gig-card anatomy). */
/* SITE STANDARD: white canvas on every landing page (this file never
   loads in the admin dashboard) — beats brand-theme's #f4f7fa */
body:not(.dark) {
  background: #fff !important;
}
/* Standard page rhythm: tight top/bottom on every section (theme had
   8.125rem), zero sides — the container owns the horizontal inset */
.section-padding {
  padding: 2.25rem 0 3rem;
}
.section-padding-top {
  padding: 2.25rem 0 0;
}
.section-padding-bottom {
  padding: 0 0 3rem;
}
/* Kill the theme's 8.125rem section padding: tight gap below the sticky
   header and above the footer, like Fiverr's results page. Zero side
   padding — the inner .container handles it (header-aligned). */
.section-padding.service-list-section {
  padding: 2.25rem 0 3rem;
}
.service-list-head {
  margin-bottom: 1.5rem;
}
.service-list-head .service-list-title {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  color: #222325;
  margin-bottom: 0.25rem;
}
.service-list-head .service-list-subtitle {
  font-size: 15px;
  color: #62646a;
}
/* Blogs / Categories / Providers list pages: heading (Blade-rendered slot)
   + search share one flex row inside the Vue section — same architecture as
   the food RestaurantsPage header. Here we only collapse the datatable's
   double wrapper padding (py-4 outer + my-3 inner) under that header row. */
.list-page-compact .table-responsive.rounded.py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.list-page-compact .table-responsive.my-3 {
  margin-top: 0.75rem !important;
}
.service-card-table .service-box-card.fiv-card {
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0.25rem;
  margin-bottom: 1.5rem !important; /* beats the mb-5 utility (3rem) — Fiverr-tight row gap */
}
.service-card-table tbody tr td .service-box-card.fiv-card {
  height: calc(100% - 1.5rem); /* keep equal-height math in sync with the tighter margin */
}
/* Blade card grids ONLY (.sd-section wrapper on service/provider detail,
   .sd-grid on the home page): columns stretch equally and the price row is
   pinned to the card bottom so every price sits on one line. Scoped because
   the list pages' datatable stamps `row row-cols-*` on the tbody itself —
   unscoped .row rules would leak there and re-create dead space. */
.sd-section .service-card-table .row > [class*="col-"] > .service-box-card.fiv-card,
.sd-grid.service-card-table .row > [class*="col-"] > .service-box-card.fiv-card {
  height: calc(100% - 1.5rem);
}
.sd-section .service-card-table .row .fiv-card .fiv-price-row,
.sd-grid.service-card-table .row .fiv-card .fiv-price-row {
  margin-top: auto;
}
.service-card-table .service-box-card.fiv-card:hover {
  transform: none;
  box-shadow: none;
}
.fiv-card .iq-image {
  margin: 0;
  border-radius: 8px;
  flex-shrink: 0;
}
.fiv-card .iq-image img.service-img {
  border-radius: 8px !important;
}
.service-box-card.fiv-card:hover .iq-image img.service-img {
  transform: none; /* Fiverr thumbs don't zoom */
}
/* Kill Bootstrap/DataTables cell striping + hover shading — BS5 paints
   rows via inset box-shadow (--bs-table-accent-bg), which showed as a
   gray slab behind the card on hover. Fiverr hover = underlined title. */
.service-card-table,
.service-card-table tbody tr,
.service-card-table tbody tr td {
  background: transparent !important;
  box-shadow: none !important;
}
.fiv-card a.service-heading:hover .service-title {
  color: #222325;
  text-decoration: underline;
}
.service-card-table .fiv-card .service-img {
  height: 11.25rem;
}
/* Job type chip stamped on the image — the fixed/hourly signal */
.job-type-chip {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 1;
  pointer-events: none;
}
.job-type-fixed { background: rgba(55, 71, 133, 0.95); } /* navy */
.job-type-hourly { background: rgba(15, 157, 143, 0.95); } /* teal */

.fiv-card .seller-row {
  margin-top: 0.75rem;
}
.fiv-card .seller-row .avatar-24 {
  width: 24px;
  height: 24px;
}
.fiv-card .seller-row .service-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #222325; /* Fiverr primary text */
}
.fiv-card a.service-heading {
  padding-top: 0.45rem;
  padding-bottom: 0.4rem;
}
/* Fiverr gig titles are 16px REGULAR weight — that's the signature look */
.fiv-card .service-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #222325;
}
/* Rating: dark star + bold score, gray count (Fiverr look) */
.fiv-card .fiv-rating {
  min-height: 20px;
}
.fiv-card .fiv-rating a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #222325;
  line-height: 1;
}
.fiv-card .fiv-rating a:hover {
  color: #b52926;
}
.fiv-card .fiv-rating .rating-count {
  font-weight: 400;
  color: #95979d; /* Fiverr tertiary text */
}
.fiv-card .fiv-rating-new {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #0f9d8f;
  background: rgba(15, 157, 143, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}
/* Price flows right under the rating (Fiverr top-aligned content —
   NOT pinned to the card bottom, which left a hole on short cards) */
.fiv-card .fiv-price-row {
  margin-top: 0;
  padding-top: 0.45rem;
}
.fiv-card .fiv-price {
  font-size: 16px;
  font-weight: 700;
  color: #222325;
  line-height: 1.2;
}
.fiv-card .price-unit {
  font-size: 13px;
  font-weight: 500;
  color: #62646a; /* Fiverr secondary text */
}

/* ============ Service list: Fiverr-style filter bar ============
   Restyles the select2 controls inside ServicesPage.vue's
   .service-filter-bar as compact WHITE bordered buttons (Fiverr look).
   The theme skins select2 as 54px gray slabs with !important on every
   property (landing-page.min.css ~16482), so every override here needs
   !important + higher specificity to actually win. */
.service-filter-bar {
  margin-bottom: 0.25rem;
}
.service-filter-bar .select2-container {
  width: auto !important;
  min-width: 0;
  max-width: 230px;
}
.service-filter-bar .select2-container .select2-selection--single {
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid #c5c6c9 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  transition: background-color 0.15s ease;
}
.service-filter-bar .select2-container .select2-selection--single:hover {
  background-color: #f5f5f5 !important;
}
.service-filter-bar .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding: 0 34px 0 16px !important;
  color: #222325 !important;
  font-weight: 600;
  font-size: 15px;
}
.service-filter-bar .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 14px;
}
.service-filter-bar .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #222325 transparent transparent transparent !important;
}
.service-filter-bar .search-form .form-control {
  height: 44px;
  border: 1px solid #c5c6c9;
  border-radius: 8px !important;
  padding-left: 16px;
  padding-right: 54px;
  font-size: 15px;
  background: #fff;
}
/* Fiverr search: dark square button fused to the input's right edge */
.service-filter-bar .search-form .search-icon {
  background: #222325 !important;
  color: #fff !important;
  border: none !important;
  width: 44px;
  height: 44px;
  right: 0 !important;
  top: 0;
  border-radius: 0 8px 8px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.service-filter-bar .filter-reset {
  height: 44px;
  padding: 0 18px;
  font-weight: 600;
  border-radius: 8px !important;
}

/* Second row, Fiverr-style: "1,234 results" left, borderless
   "Sort by: Recommended v" right */
.results-row .results-count {
  font-size: 15px;
  color: #62646a;
}
.results-row .sort-label {
  font-size: 15px;
  color: #74767e;
  flex-shrink: 0;
}
.results-row .sort-plain .select2-container {
  width: auto !important;
  min-width: 0;
}
.results-row .sort-plain .select2-container .select2-selection--single {
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.results-row .sort-plain .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 20px 0 6px !important;
  color: #222325 !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}
.results-row .sort-plain .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 0;
}
.results-row .sort-plain .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #222325 transparent transparent transparent !important;
}

/* ============ select2 closed buttons: site standard ============
   The Fiverr white bordered button is the standard for every select2 on
   the landing site (blogs/providers filters, forms), not just the
   service filter bar. Theme's 54px gray slab is fully overridden. */
.select2-container .select2-selection--single {
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid #c5c6c9 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  transition: background-color 0.15s ease;
}
.select2-container .select2-selection--single:hover {
  background-color: #f5f5f5 !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding: 0 34px 0 16px !important;
  color: #222325 !important;
  font-weight: 600;
  font-size: 15px;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 14px;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #222325 transparent transparent transparent !important;
}

/* ============ select2 dropdown panel: Fiverr white card ============
   The theme paints dropdowns gray-300 with a primary border + navy
   highlight (all !important) — replaced with a white rounded panel,
   soft shadow, light-gray hover. Applies landing-wide (dropdowns
   attach to <body>, so they can't be scoped to one page). */
.select2-container .select2-dropdown {
  background-color: #fff !important;
  border: 1px solid #e4e5e7 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.select2-container.select2-container--open .select2-dropdown--below,
.select2-container.select2-container--open .select2-dropdown--above {
  border-radius: 8px !important;
}
.select2-container .select2-results__option {
  padding: 10px 16px;
  font-size: 15px;
  color: #404145;
}
.select2-container.select2-container--default .select2-results__option--highlighted,
.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f5f5f5 !important;
  color: #222325 !important;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #fff;
  font-weight: 600;
  color: #222325;
}
.select2-container .select2-search--dropdown {
  padding: 10px 12px 6px;
}
.select2-container .select2-search--dropdown .select2-search__field {
  border: 1px solid #dadbdd !important;
  border-radius: 6px;
  height: 36px;
  padding: 0 10px;
  outline: none;
}

/* ============ SweetAlert: brand colors, not demo purple ============
   The Vue components hardcode iconColor '#5F60B9' as an inline style;
   !important author rules outrank non-important inline styles. */
.swal2-styled.swal2-confirm {
  background-color: #b52926 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(181, 41, 38, 0.25) !important;
}
.swal2-icon.swal2-success {
  border-color: #218f6c !important;
  color: #218f6c !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: #218f6c !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(33, 143, 108, 0.3) !important;
}