/*
 * Styling for template-dga-service-page.blade.php (checklist criterion #8).
 * Built on the same DGA token layer as everything else (dga-tokens.css /
 * dga-typography.css) plus the .dga-card treatment already established in
 * dga-cards.css for the Service Details Card.
 */

/* Client report (confirmed via a real test page): the main content column
   and the Service Details Card sidebar never actually sat side-by-side on
   desktop -- `lg:flex-row`, `lg:w-8/12`, and `lg:w-4/12` are all missing
   from this project's static Tailwind bundle (confirmed via grep, same
   recurring gotcha fixed elsewhere on this project), so the layout stayed
   stacked full-width even on wide screens, and the empty main column left
   the card floating oddly beneath the page header. Real CSS restores the
   intended two-column split. */
@media (min-width: 1024px) {
  .dga-service-layout {
    flex-direction: row;
  }
  .dga-service-layout__main {
    width: 66.6667%;
  }
  .dga-service-layout__aside {
    width: 33.3333%;
  }
}

.dga-service-heading {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
  margin-bottom: var(--spacing-lg);
}

.dga-service-prose {
  font-family: var(--font-family-arabic);
  color: var(--text-primary-paragraph);
}

.dga-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.dga-service-list li {
  position: relative;
  padding-inline-start: var(--spacing-xl);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--text-primary-paragraph);
}
.dga-service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--colors-primary-sa-flag-600-primary);
}
:is(html[lang=ar], html[dir=rtl]) .dga-service-list li::before {
  left: auto;
  right: 0;
}

.dga-service-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}
.dga-service-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.dga-service-steps__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--colors-primary-sa-flag-600-primary);
  color: var(--text-oncolor-primary);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  font-weight: var(--font-weight-semibold);
}
.dga-service-steps__text {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--text-primary-paragraph);
  padding-top: var(--spacing-xxs);
}

/* Service Details Card -- adds row/label/value styling on top of the base
   .dga-card treatment from dga-cards.css */
.dga-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  position: sticky;
  top: var(--spacing-4xl);
}
/* Client feedback (2026-09-09): matched against the real DGA reference
   component, which uses icon+title+description rows here instead of plain
   stacked label:value text -- same underlying fields, restyled as a row
   with a circular icon chip (same convention as
   .dga-verification-banner__icon) beside the label/value pair. */
.dga-service-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-neutral-primary);
}
.dga-service-card__row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.dga-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-full);
  color: var(--colors-primary-sa-flag-600-primary);
}
.dga-service-card__icon svg {
  width: 20px;
  height: 20px;
}
.dga-service-card__label {
  display: block;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  color: var(--text-secondary-paragraph);
}
.dga-service-card__value {
  display: block;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.dga-service-card__faq-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--colors-primary-sa-flag-600-primary);
  text-decoration: underline;
}
.dga-service-card__faq-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Service Page rating widget (partials/service-feedback.blade.php).
   Default state is the collapsed summary bar below; clicking "Rate this
   service" reveals the .dga-feedback__panel form (real submit, see
   mu-plugins/dga-feedback.php). */
.dga-feedback-section {
  border-top: 1px solid var(--border-neutral-secondary);
}
.dga-service-rating-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-block: var(--spacing-6);
}
.dga-service-rating-summary__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}
.dga-service-rating-summary__text {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  color: var(--text-default);
}
.dga-service-rating-summary__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dga-service-rating-summary__star {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.dga-service-rating-summary__star-bg,
.dga-service-rating-summary__star-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.dga-service-rating-summary__star-bg {
  color: var(--border-neutral-primary);
}
.dga-service-rating-summary__star-fg {
  color: var(--colors-primary-sa-flag-600-primary);
}
.dga-service-rating-summary__star-bg svg,
.dga-service-rating-summary__star-fg svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}
:is(html[lang=ar], html[dir=rtl]) .dga-service-rating-summary__star-fg {
  right: 0;
  left: auto;
}
.dga-service-rating-summary__count {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  color: var(--text-secondary-paragraph);
}
.dga-feedback-container {
  padding-block: var(--spacing-xl);
}
/* Match .dga-page-helpful__btn's exact box model (components/page-meta-
   footer.blade.php) -- the manual `px-5 py-3` Tailwind classes here were
   noticeably bigger (20px/12px) than the token-based padding used
   everywhere else this same Yes/No button appears (4px/16px). */
.dga-feedback-btn-label {
  padding: var(--spacing-xs) var(--spacing-xl) !important;
}
.dga-feedback-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
/* Rating + Feedback now render as two rows inside one box (see the note in
   template-dga-service-page.blade.php) -- space them apart the same way
   .dga-page-meta__modified is spaced from the question row above it,
   without a divider line, so it still reads as one cohesive box. */
.dga-feedback-card + .dga-feedback-card {
  margin-top: var(--spacing-md);
}
.dga-feedback-question {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  margin: 0;
}
.dga-feedback-thanks {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  color: var(--colors-primary-sa-flag-600-primary);
  margin: 0;
}

/* Rating section (partials/service-feedback.blade.php) -- per the real DGA
   guideline docs (guidelines/components/feedback/rating,
   guidelines/templates/rating-section), Rating is a distinct 5-star
   selector, not the same Yes/No widget as Feedback. */
.dga-rating-stars {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.dga-rating-star {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--border-neutral-primary);
  cursor: pointer;
  line-height: 0;
}
.dga-rating-star svg {
  width: 28px;
  height: 28px;
}
.dga-rating-star:hover,
.dga-rating-star--filled {
  color: var(--colors-primary-sa-flag-600-primary);
}
.dga-rating-star:focus-visible {
  outline: 2px solid var(--colors-primary-sa-flag-600-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.dga-service-rating__disclaimer {
  margin-bottom: var(--spacing-6);
}
.dga-service-rating__hint {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  color: var(--text-secondary-paragraph);
}
.dga-service-rating .dga-feedback__thanks {
  padding-inline: var(--spacing-6);
}