/* Effra Arabic faces — woff2 (parkin.ae uses these family names for bold/medium Arabic glyphs) */
@font-face {
  font-display: swap;
  font-family: Effra-Regular;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/effra/Effra-Regular.woff2) format('woff2');
}

@font-face {
  font-display: swap;
  font-family: EffraMedium-Regular;
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/effra/EffraMedium-Regular.woff2) format('woff2');
}

/* Match parkin.ae: Arabic glyphs → Effra-Bold; Latin/digits @700 → Effra */
@font-face {
  font-display: swap;
  font-family: Effra-Bold;
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/effra/Effra-Bold.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Full-page loader: blur + Parkin car Lottie only (~3s) */
html.parkin-loader-active {
  overflow: hidden;
}

.pay-parking-fines-page .loader-overlay .parkin-loader-lottie svg {
  height: auto !important;
  width: 120px !important;
}

/* Pay parking fines — inquiry form (match parkin.ae spacing & field chrome) */

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group.mb-3 {
  margin-bottom: 0 !important;
}

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group {
  background: transparent !important;
  padding: 0 !important;
}

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group label,
.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group .form-label {
  color: var(--gray);
  display: block;
  font-family: Effra-Bold, Effra, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.375rem;
  padding: 0 1rem;
}

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .custom-select-picker {
  display: block;
  width: 100%;
}

/* Select2 chrome (saved HTML) — gray pill + compact text like parkin.ae */
.pay-parking-fines-page
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container {
  display: block !important;
  width: 100% !important;
}

.pay-parking-fines-page
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container--default
  .select2-selection--single {
  background-color: #f6f6f7 !important;
  border: 1px solid #dbdbdd !important;
  border-radius: 1.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
}

.pay-parking-fines-page
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #005060 !important;
  font-family: Effra-Bold, Effra, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 2.5rem !important;
  padding-inline: 1rem 2rem !important;
}

.pay-parking-fines-page
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #92949a !important;
  font-weight: 600 !important;
}

.pay-parking-fines-page
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 2.5rem !important;
  right: 0.75rem !important;
  top: 0 !important;
  width: 1.25rem !important;
}

.pay-parking-fines-page
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #005060 transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
}

.pay-parking-fines-page.is-ar
  .fine-details
  .fines-cardbox
  .fine-inquiry-content
  .custom-select-picker
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  left: 0.75rem !important;
  right: auto !important;
}

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group input.form-control {
  appearance: none;
  background: #fff !important;
  border: 0.0938rem solid #000 !important;
  border-radius: 1.75rem;
  box-shadow: none !important;
  color: #000;
  font-family: Effra-Bold, Effra, sans-serif;
  font-size: 0.875rem !important;
  font-weight: 700;
  height: 2.5rem !important;
  min-height: 0 !important;
  padding-inline: 1rem;
  width: 100%;
}

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group input.form-control::placeholder {
  color: var(--gray4);
  font-weight: var(--font-weight-normal);
}

.pay-parking-fines-page .fine-details .fines-cardbox .fine-inquiry-content .form-group input.form-control:focus {
  box-shadow: none;
  outline: none;
}

@media (max-width: 767.98px) {
  .pay-parking-fines-page .fine-details .fines-cardbox .title-search {
    margin-bottom: 0.75rem !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    > .nav.nav-pills {
    display: none !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .mobile-tab-slider {
    display: flex !important;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
    width: 100%;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap {
    margin-bottom: 0.25rem;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .mobile-tab-slider
    .nav-pills {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: stretch;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: 100% !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .mobile-tab-slider
    .nav-item {
    flex: 1 1 100% !important;
    max-width: 100%;
    width: 100% !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .mobile-tab-slider
    .nav-link {
    align-items: center;
    border: none;
    border-radius: 1.875rem;
    box-sizing: border-box;
    color: var(--white);
    display: flex;
    font-size: var(--small-font);
    font-weight: var(--font-weight-medium);
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    padding: 0 1rem;
    text-align: center;
    white-space: nowrap;
    width: 100%;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .mobile-tab-slider
    .nav-link.active {
    background: var(--white);
    color: var(--primary-theme);
    font-weight: var(--font-weight-bold);
    width: 100%;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .slider-arrow {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.65rem 0.65rem;
    flex: 0 0 2rem;
    font-size: 0;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .slider-arrow:first-of-type {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M6.5 2L3 5l3.5 3' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .slider-arrow:last-of-type {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L7 5l-3.5 3' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .slider-arrow:disabled {
    opacity: 0.45;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .nav-pills-wrap
    .slider-arrow
    i {
    display: none;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .tab-content
    .tab-pane
    .plate-detail-form,
  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .tab-content
    .tab-pane
    .licence-number-form,
  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .tab-content
    .tab-pane
    .traffic-code-number-form,
  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .tab-content
    .tab-pane
    .fine-number-form {
    margin-top: 1.25rem !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .tab-content
    .tab-pane
    form {
    column-gap: 0 !important;
    row-gap: 1rem !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .tab-content
    .tab-pane
    form
    .form-group {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .number-plate-section {
    flex: 0 0 100% !important;
    flex-direction: column !important;
    row-gap: 1rem !important;
    width: 100% !important;
  }

  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .number-plate-section
    .form-group.plate-code,
  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-inquiry-content
    .number-plate-section
    .form-group.plate-number {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

.pay-parking-fines-page .grecaptcha-badge {
  display: none !important;
}

.pay-parking-fines-page .menu-button {
  pointer-events: none !important;
  opacity: 0.45;
  cursor: not-allowed !important;
}

.pay-parking-fines-page .language-btn {
  cursor: pointer;
}

/* Arabic: same stack as parkin.ae (Speedee Arabic body + Effra for Latin/digits in mixed text) */
@font-face {
  font-display: swap;
  font-family: 'Speedee Arabic';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/speedee-arabic/SpeedeeArabic-Regular.woff2) format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Speedee Arabic';
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/speedee-arabic/SpeedeeArabic-Regular.woff2) format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Speedee Arabic';
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/speedee-arabic/SpeedeeArabic-Bold.woff2) format('woff2');
}

/* Step 2 — empty state */
.pay-parking-fines-page[data-wizard-step='2'] .parkin-empty-state {
  padding: 2rem 1rem 2.5rem;
  text-align: center;
}

.pay-parking-fines-page[data-wizard-step='2'] .parkin-no-fines-sub {
  color: var(--gray, #6b7280);
  font-size: var(--small-font, 0.875rem);
  line-height: 1.5;
  margin: 0.75rem auto 0;
  max-width: 22rem;
}

.pay-parking-fines-page[data-wizard-step='2'] .fines-cardbox.parkin-step2-empty .parkin-step2-payment-bar {
  display: none !important;
}

.pay-parking-fines-page[data-wizard-step='2'] .parkin-step2-next[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* Step 2 — typography (parkin.ae): EN = Effra, AR = Speedee Arabic + Effra digits */
.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar) .fine-details .fines-cardbox {
  font-family: Effra, sans-serif;
}

.pay-parking-fines-page[data-wizard-step='2'].is-ar .fine-details .fines-cardbox {
  font-family: 'Speedee Arabic', Effra, sans-serif;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .title-search
  .fines-cardbox-title {
  font-family: Effra-Bold, Effra, sans-serif;
  font-weight: 700;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .title-search
  .fines-cardbox-title
  span,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .title-search
  .fines-cardbox-title
  .parkin-fine-count-label {
  color: var(--gray7, #505050);
  display: block;
  font-family: Effra-Regular, Effra, sans-serif;
  font-size: var(--regular-font, 1rem);
  font-weight: 400;
  margin-top: 0.5rem;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label {
  font-family: Effra-Bold, Effra, sans-serif;
  font-weight: 700;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label
  .parkin-selected-count,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label
  .small {
  font-weight: var(--font-weight-normal, 400);
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  .form-check-label,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  .form-check-label,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  .form-check-label
  span,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  .form-check-label
  span {
  font-family: Effra-Bold, Effra, sans-serif;
  font-weight: 700;
}

.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label,
.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label,
.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar)
  .fine-details
  .fines-cardbox
  .vehicle-details-listing
  .list
  > label {
  color: var(--gray, #4a4c57);
  font-family: Effra, sans-serif;
  font-size: var(--small-font, 0.875rem);
  font-weight: 500;
  margin-bottom: 0;
}

.pay-parking-fines-page[data-wizard-step='2'].is-ar
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label,
.pay-parking-fines-page[data-wizard-step='2'].is-ar
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label,
.pay-parking-fines-page[data-wizard-step='2'].is-ar
  .fine-details
  .fines-cardbox
  .vehicle-details-listing
  .list
  > label {
  color: var(--gray, #4a4c57);
  font-family: 'Speedee Arabic', Effra, sans-serif;
  font-size: var(--small-font, 0.875rem);
  font-weight: 500;
  margin-bottom: 0;
}

.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span,
.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span {
  align-items: center;
  color: var(--gray3, #3b3d46);
  column-gap: 0.25rem;
  display: flex;
  font-family: Effra, sans-serif !important;
  font-size: var(--regular-font, 1rem);
  font-weight: 700 !important;
  font-synthesis: none;
  line-height: 1.35;
  padding: 0;
  text-align: inherit;
  text-transform: none;
  width: auto;
}

.pay-parking-fines-page[data-wizard-step='2'].is-ar
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span,
.pay-parking-fines-page[data-wizard-step='2'].is-ar
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span {
  align-items: center;
  color: var(--gray3, #3b3d46);
  column-gap: 0.25rem;
  display: flex;
  font-family: 'Speedee Arabic', Effra, sans-serif !important;
  font-size: var(--regular-font, 1rem);
  font-weight: 700 !important;
  font-synthesis: none;
  line-height: 1.35;
  padding: 0;
  text-align: inherit;
  text-transform: none;
  width: auto;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span.unpaid {
  color: #f34041;
  text-transform: capitalize;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span.paid {
  color: #319e60;
  text-transform: capitalize;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span.cancelled {
  color: #f34041;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-actions
  .mobile-title-fees
  .parkin-payment-confirm-title {
  font-family: Effra-Bold, Effra, sans-serif;
  font-size: calc(var(--large-font, 1.125rem) - 0.125rem);
  font-weight: 700;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-actions
  .mobile-title-fees
  .total-fees {
  color: var(--gray3, #3b3d46);
  font-family: Effra-Bold, Effra, sans-serif;
  font-weight: 700;
  margin-top: 0.75rem;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-actions
  .mobile-title-fees
  .total-fees
  .parkin-total-label {
  font-family: Effra-Regular, Effra, sans-serif;
  font-weight: 400;
  padding-top: 0.125rem;
}

.pay-parking-fines-page[data-wizard-step='2']:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-actions
  .mobile-title-fees
  .total-fees
  .parkin-total-amount {
  font-family: Effra, sans-serif !important;
  font-weight: 700 !important;
  font-synthesis: none;
}

.pay-parking-fines-page[data-wizard-step='2'].is-ar
  .fine-details
  .fines-cardbox
  .fine-actions
  .mobile-title-fees
  .total-fees
  .parkin-total-amount {
  font-family: 'Speedee Arabic', Effra, sans-serif !important;
  font-weight: 700 !important;
  font-synthesis: none;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .plate-structure
  .plate-code,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .plate-structure
  .plate-number {
  font-family: Effra-Bold, Effra, sans-serif !important;
  font-weight: 700 !important;
}

.pay-parking-fines-page.is-ar .title-steps h1,
.pay-parking-fines-page.is-ar .fine-details .fines-cardbox-title {
  font-family: Effra-Bold, Effra, sans-serif;
  font-weight: 700;
}

/* Fine card — no divider above buttons on mobile (match parkin.ae) */
@media (max-width: 991.98px) {
  .pay-parking-fines-page
    .fine-details
    .fines-cardbox
    .fine-listing
    .fine-list
    .vehicle-details-listing {
    border-top: none !important;
    display: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Step 2 — selection checkboxes + card highlight (parkin.ae) */
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label
  span.small:before,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label
  span.small:after,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label
  .parkin-selected-count:before,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  .form-check-label
  .parkin-selected-count:after {
  display: none !important;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  input[type='checkbox'],
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  input[type='checkbox'] {
  appearance: none;
  float: none;
  height: 1.5rem;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  z-index: 1;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  input[type='checkbox']:checked
  + span:after,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  input[type='checkbox']:checked
  + span:after {
  background-image: url(/images/resources/checkmark.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 0.625rem;
  left: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.625rem;
}

html:lang(ar)
  .pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .selectall
  .form-check
  input[type='checkbox']:checked
  + span:after,
html:lang(ar)
  .pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .pay-fine-checkbox
  .form-check
  input[type='checkbox']:checked
  + span:after {
  left: auto;
  right: 5px;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list.selected,
.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list.selected {
  border: 0.125rem solid var(--primary-dark-theme, #005060);
}

/* Fine card values — bold (official uses font-weight-bold on spans) */
.pay-parking-fines-page:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span,
.pay-parking-fines-page:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span {
  font-family: Effra, sans-serif !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: auto;
}

.pay-parking-fines-page.is-ar
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span,
.pay-parking-fines-page.is-ar
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > span {
  font-family: 'Speedee Arabic', Effra, sans-serif !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: auto;
}

.pay-parking-fines-page:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label,
.pay-parking-fines-page:not(.is-ar)
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label {
  font-family: Effra, sans-serif !important;
  font-weight: 500 !important;
}

.pay-parking-fines-page.is-ar
  .fine-details
  .fines-cardbox
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label,
.pay-parking-fines-page.is-ar
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .fine-details-listing
  .list
  > label {
  font-family: 'Speedee Arabic', Effra, sans-serif !important;
  font-weight: 500 !important;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .button-group {
  pointer-events: auto;
  position: static;
  z-index: auto;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .button-group
  .theme-button:not(:disabled) {
  background: var(--primary-dark-theme, #005060);
  border-color: var(--primary-dark-theme, #005060);
  color: var(--white, #fff);
  cursor: pointer;
  pointer-events: auto;
}

.pay-parking-fines-page[data-wizard-step='2']
  .fine-details
  .fines-cardbox
  .fine-list-content
  .fine-listing
  .fine-list
  .button-group
  .theme-button-border:not(:disabled) {
  cursor: pointer;
  pointer-events: auto;
}

/* Step 2 — view fines (filter bar + mobile slider) */
@media (max-width: 767.98px) {
  /* Fixed Back/Next bar — keep above scrolling fine cards (pay/dispute stay in card flow) */
  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox
    .fine-actions.parkin-step2-actions {
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.08);
    left: 0;
    right: 0;
    z-index: 40;
  }

  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox:not(.parkin-step2-empty)
    .fine-list-content {
    padding-bottom: calc(13rem + env(safe-area-inset-bottom, 0px));
  }

  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox:not(.parkin-step2-empty)
    .selectall {
    margin-bottom: 0.5rem;
  }

  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox
    .fine-filters
    .mobile-tab-slider.parkin-fine-filter-slider {
    display: flex !important;
  }

  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox
    .fine-filters
    .fine-filter-list {
    display: none !important;
  }

  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox
    .fine-filters
    .parkin-fine-filter-slider
    .parkin-filter-mobile-label {
    align-items: center;
    background: var(--white);
    border-radius: 1.875rem;
    color: var(--primary-theme);
    display: flex;
    flex: 1 1 auto;
    font-size: var(--small-font);
    font-weight: var(--font-weight-bold);
    height: 2.25rem;
    justify-content: center;
    margin: 0;
    min-width: 0;
    width: 100%;
  }

  .pay-parking-fines-page[data-wizard-step='2']
    .fine-details
    .fines-cardbox
    .title-search
    .filter-search
    .filter {
    cursor: pointer;
  }
}

/* Wizard steps — horizontal scroll to active step on mobile */
.pay-parking-fines-page .title-steps .steps-list {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.pay-parking-fines-page .title-steps .steps-list::-webkit-scrollbar {
  display: none;
}

.pay-parking-fines-page .title-steps .steps-list ol {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
  min-width: min-content;
  padding: 0.15rem 0.25rem 0.35rem;
}

.pay-parking-fines-page .title-steps .steps-list .list {
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
}

.pay-parking-fines-page .title-steps .steps-list ol {
  scroll-snap-type: x proximity;
}

/* —— Step 3: Summary — fines in scrollable glass panel, terms below —— */
.pay-parking-fines-page[data-wizard-step='3'] .fine-summary-content {
  margin-bottom: 0;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-fines-panel {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(0, 80, 96, 0.16);
  border-radius: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  padding: 0.875rem 1rem 1rem;
  position: relative;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-fines-panel .fine-listing {
  margin: 0;
}

.pay-parking-fines-page[data-wizard-step='3']
  .parkin-summary-fines-panel:not(.is-compact-unnecessary):not(.is-expanded) {
  max-height: 17.5rem;
  overflow: hidden;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-fines-panel.is-expanded {
  max-height: min(70vh, 28rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pay-parking-fines-page[data-wizard-step='3']
  .parkin-summary-fines-panel:not(.is-compact-unnecessary):not(.is-expanded)::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(237, 244, 246, 0.92) 72%,
    rgba(237, 244, 246, 0.98) 100%
  );
  border-radius: 0 0 0.75rem 0.75rem;
  bottom: 0;
  content: '';
  height: 3.25rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.pay-parking-fines-page[data-wizard-step='3'] .selected-fines .title-link .parkin-summary-show-all {
  background: transparent;
  border: none;
  color: var(--primary-theme);
  cursor: pointer;
  font-size: var(--extra-small-font);
  font-weight: var(--font-weight-medium);
  padding: 0.625rem 0.75rem;
  white-space: nowrap;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-fine-compact {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 80, 96, 0.08);
  border-radius: 0.5rem;
  margin-bottom: 0.625rem;
  padding: 0.75rem 0.875rem;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-fine-compact:last-child {
  margin-bottom: 0;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-row {
  align-items: flex-start;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-label {
  color: var(--primary-dark-theme);
  font-size: var(--extra-small-font);
  font-weight: var(--font-weight-medium);
  opacity: 0.75;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-id {
  color: var(--primary-dark-theme);
  font-size: var(--small-font);
  font-weight: var(--font-weight-bold);
  word-break: break-word;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-amount {
  align-items: center;
  color: var(--primary-dark-theme);
  display: flex;
  flex-shrink: 0;
  font-size: var(--small-font);
  font-weight: var(--font-weight-bold);
  gap: 0.15rem;
  white-space: nowrap;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-meta {
  color: var(--primary-dark-theme);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--extra-small-font);
  gap: 0.35rem;
  opacity: 0.88;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-meta .unpaid {
  color: var(--danger-theme, #c0392b);
  font-weight: var(--font-weight-medium);
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-compact-meta .paid {
  color: var(--success-theme, #198754);
  font-weight: var(--font-weight-medium);
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-terms-wrap {
  margin-top: 0.25rem;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-terms-wrap .terms-condition-checkbox {
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-terms-inline .parkin-terms-label {
  align-items: flex-start;
  column-gap: 0.625rem;
  display: flex;
  margin: 0;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-terms-inline .parkin-terms-check {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-terms-inline .parkin-terms-copy {
  color: var(--primary-dark-theme);
  font-size: var(--small-font);
  line-height: 1.45;
}

.pay-parking-fines-page[data-wizard-step='3'] .parkin-terms-inline .parkin-terms-plain {
  font-weight: var(--font-weight-medium);
}

.pay-parking-fines-page[data-wizard-step='3'] .fine-summary-content .total-fees.parkin-summary-total-desktop {
  margin-top: 1.25rem;
}

@media (max-width: 767.98px) {
  .pay-parking-fines-page[data-wizard-step='3']
    .parkin-summary-fines-panel:not(.is-compact-unnecessary):not(.is-expanded) {
    max-height: 15.5rem;
  }

  .pay-parking-fines-page[data-wizard-step='3'] .parkin-summary-terms-wrap .terms-condition-checkbox {
    margin-bottom: 0.5rem;
    margin-top: 1rem;
  }
}

/* Login / staff side drawers from scraped HTML — not used */
.pay-parking-fines-page .sidebar-navigation.switch-account,
.pay-parking-fines-page .sidebar-navigation.logout-menu-listing,
.pay-parking-fines-page div.switch-account {
  display: none !important;
}

.pay-parking-fines-page section.sidebar-navigation.parkin-dispute-drawer {
  display: block !important;
  visibility: visible !important;
  z-index: 1240;
}

.pay-parking-fines-page .parkin-dispute-backdrop {
  background: rgba(0, 0, 0, 0.45);
  inset: 0;
  position: fixed;
  z-index: 1235;
}

.pay-parking-fines-page section.sidebar-navigation.parkin-dispute-drawer.is-open {
  box-shadow: 0 0.75rem 2.75rem rgba(24, 39, 75, 0.18);
}

html[dir='rtl'] .pay-parking-fines-page section.sidebar-navigation.parkin-dispute-drawer.is-open {
  left: 0 !important;
  right: auto !important;
}

html[dir='ltr'] .pay-parking-fines-page section.sidebar-navigation.parkin-dispute-drawer.is-open {
  left: auto !important;
  right: 0 !important;
}

.pay-parking-fines-page .parkin-dispute-drawer .dispute-checklist-info-body {
  font-size: 0.875rem;
  line-height: 1.45;
}

.pay-parking-fines-page .parkin-dispute-drawer .parkin-dispute-fee-copy {
  margin: 0.5rem 0 0;
}

.pay-parking-fines-page .parkin-dispute-drawer .parkin-dispute-fine-meta {
  margin: 0.75rem 0 0;
  opacity: 0.92;
}

.pay-parking-fines-page .parkin-dispute-drawer .parkin-dispute-check-item {
  margin-bottom: 0.875rem;
}

.pay-parking-fines-page .parkin-dispute-drawer .parkin-dispute-check-item .form-check-label {
  align-items: flex-start;
  column-gap: 0.625rem;
  display: flex;
  font-size: 0.875rem;
  line-height: 1.4;
}

.pay-parking-fines-page .parkin-dispute-drawer .dispute-checklist-listing {
  margin: 1rem 0 1.25rem;
}

/* Step-2 date filter drawer only; hide on summary/payment so it cannot peek in */
.pay-parking-fines-page:not([data-wizard-step='2']) .pay-parking-fine-filter {
  display: none !important;
}

.pay-parking-fines-page .footer-app-download .store-icons a {
  cursor: default;
}