@import url("/css/pages/catalog-base.css");
@import url("/css/pages/catalog-pricing-panel.css");

/* QA request (Sep 16, 2026): "i want you to put a back button here" - same
   outline-pill treatment as provider/jobs/details.blade.php's
   .ok-back-link (see provider-jobs-details.css), reused here for the
   service detail page's own back-to-category link above the breadcrumb. */
.ok-back-link{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 12px;border-radius:999px;border:1.5px solid rgba(11,11,12,.15);background:#fff;font-size:13px;font-weight:700;color:var(--ok-black);margin-bottom:14px;transition:background .15s,border-color .15s,transform .08s}
.ok-back-link:hover{background:#FAFAF8;border-color:rgba(11,11,12,.3);color:var(--ok-orange-text)}
.ok-back-link:active{transform:scale(.96)}
.ok-back-link-arrow{font-size:14px;transition:transform .15s}
.ok-back-link:hover .ok-back-link-arrow{transform:translateX(-2px)}

.ok-pill-group{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 28px}
.ok-pill-choice{position:relative}
.ok-pill-choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.ok-pill-choice span{display:inline-block;padding:11px 20px;border-radius:999px;border:1.5px solid rgba(11,11,12,.15);background:#fff;font-size:14px;font-weight:600;color:var(--ok-ink);transition:all .15s}
.ok-pill-choice input:checked + span{background:linear-gradient(120deg,var(--ok-orange-text),var(--ok-orange-2));border-color:transparent;color:#fff}
.ok-detail-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8a887f;margin-bottom:4px}
.ok-service-hero{width:100%;max-height:480px;object-fit:contain;background:#fff;border:1px solid rgba(11,11,12,.08);border-radius:16px;margin-bottom:24px}

/* QA request (Sep 12, 2026) - "What service do you need?" dropdown,
   replacing the pill-button group above for a service's job-type choice
   (teko.ph/pricing's own dropdown is the visual reference). .ok-pill-*
   above is left in place rather than removed, in case a future page
   still wants the pill style.

   QA follow-up (Sep 18, 2026): "update the ui button" - was a plain
   native <select> (OS-drawn popup, couldn't be restyled); swapped in
   catalog/show.blade.php for the shared .ok-select component, so this
   is now just the width/spacing override for it, same treatment as
   .ok-device-type-select right below. */
.ok-service-type-select{display:block;max-width:360px;margin:10px 0 28px}
.ok-service-type-select .ok-select-trigger{box-shadow:0 6px 16px -10px rgba(11,11,12,.25)}

/* QA follow-up (Sep 12, 2026) - "make image 1 look like image 2": for a
   service with only one real job type that isn't Repair (e.g. Cabinet
   making's only option is "Custom"), catalog/show.blade.php shows this
   static badge instead of the dropdown above - same look as the
   .ok-pill-choice input:checked + span state, just without the radio
   input since there's nothing else to pick. */
.ok-pill-static{display:inline-block;padding:11px 20px;border-radius:999px;background:linear-gradient(120deg,var(--ok-orange-text),var(--ok-orange-2));font-size:14px;font-weight:600;color:#fff;box-shadow:0 8px 18px -8px rgba(154,52,18,.55)}

/* QA request (Sep 16, 2026): "make it modern design" - width/spacing for
   the shared .ok-select component (base look + behavior in
   layouts-marketing.css/.js) when used as this page's device-type field,
   same max-width as .ok-select-wrap above so it lines up with the
   job-kind dropdown right above it. */
.ok-device-type-select{display:block;max-width:360px;margin:10px 0 28px}
.ok-device-type-select .ok-select-trigger{box-shadow:0 6px 16px -10px rgba(11,11,12,.25)}

/* QA follow-up (Sep 16, 2026): "put the image 2 beside the image 3" - the
   "What kind of job is this?"/"What service do you need?" block and the
   "What is the device type?" dropdown now sit in a row
   (catalog/show.blade.php's .ok-fields-row/.ok-fields-col) instead of
   stacked full-width, when both are present. Each column keeps its own
   field's existing 360px cap (.ok-select-wrap/.ok-device-type-select
   above), so this only changes how they're arranged, not their own size. */
.ok-fields-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start;margin-bottom:18px}
.ok-fields-col{flex:1 1 220px;min-width:200px}
.ok-fields-col .ok-pill-group,.ok-fields-col .ok-service-type-select,.ok-fields-col .ok-device-type-select{margin-top:10px;margin-bottom:0}

@media (max-width: 480px){
  .ok-fields-row{flex-direction:column;gap:0}
}