/* ==========================================================================
   Custom Fixes CSS - Accredible / British Council
   Layout Overrides, Typography, Certificate Margins, and Responsive Styles
   ========================================================================== */

/* 1. Official Local Fonts */
@font-face {
  font-family: 'British Council Sans';
  font-weight: 400;
  font-style: normal;
  src: url('../assets/British Council Sans - 400.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'British Council Sans';
  font-weight: 700;
  font-style: normal;
  src: url('../assets/British Council Sans - 700.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Accredible-icon-font';
  font-weight: 400;
  font-style: normal;
  src: url('../assets/Accredible-icon-font.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Material Icons';
  font-weight: 400;
  font-style: normal;
  src: url('../assets/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
  font-display: block;
}

body {
  font-family: 'British Council Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 2. Header Layout */
header accredible-base-header .content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

accredible-base-header .content > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 72px !important;
}

[identitysection] {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

[navigationsection] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
}

header rp-header-menu,
header accredible-base-header-menu,
header accredible-responsive-menu,
header accredible-responsive-menu nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

header .responsive-menu-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 3. Credential Actions Menu (Desktop) */
.menu-container {
  display: block !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  width: 100% !important;
}

.menu-container accredible-responsive-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.menu-container accredible-responsive-menu nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
}

.menu-container .responsive-menu-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.menu-container button,
.menu-container button .mdc-button__label,
.menu-container button span:not([class*="icon-"]):not([class*="material-icons"]) {
  font-family: 'British Council Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.25px !important;
  text-transform: uppercase !important;
}

.menu-container button [class^="icon-"],
.menu-container button [class*=" icon-"],
.menu-container button [class^="icon-"]:before,
.menu-container button [class*=" icon-"]:before {
  font-family: 'Accredible-icon-font' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 14px !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #000000 !important;
}

.menu-container button mat-icon,
.menu-container button .material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 18px !important;
  font-size: 18px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

.menu-container button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0px !important;
  background: transparent !important;
  border: none !important;
  color: #23085a !important;
  cursor: pointer !important;
  height: 36px !important;
  padding: 0 15px !important;
  border-radius: 4px !important;
  transition: background-color 0.15s, color 0.15s !important;
}

.menu-container button .mdc-button__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.menu-container button[data-cy="btn-export"] {
  width: 132.546875px !important;
  min-width: 132.546875px !important;
  padding: 0 15px !important;
}

.menu-container button#rmi-help {
  width: 89.015625px !important;
  min-width: 89.015625px !important;
  padding: 0 15px !important;
}

.menu-container button#credentialMenuTriggerButton {
  width: 81.390625px !important;
  min-width: 81.390625px !important;
  padding: 0 8px !important;
}

.menu-container button[data-cy="btn-export"]:hover,
.menu-container button#credentialMenuTriggerButton:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.menu-container button#rmi-help:hover {
  background-color: transparent !important;
}

.menu-container button#rmi-help .mat-mdc-button-persistent-ripple::before,
.menu-container button#rmi-help:hover .mat-mdc-button-persistent-ripple::before {
  display: none !important;
  opacity: 0 !important;
}

.menu-container button:hover .mdc-button__label,
.menu-container button:hover span:not([class*="icon-"]):not([class*="material-icons"]) {
  color: rgb(255, 0, 200) !important;
}

.menu-container button#credentialMenuTriggerButton:hover mat-icon,
.menu-container button#credentialMenuTriggerButton:hover .material-icons {
  color: rgb(255, 0, 200) !important;
}

.menu-container button[data-cy="btn-export"]:hover accredible-icon,
.menu-container button[data-cy="btn-export"]:hover [class*="icon-"],
.menu-container button#rmi-help:hover accredible-icon,
.menu-container button#rmi-help:hover [class*="icon-"] {
  color: #000000 !important;
}

.menu-container button accredible-icon {
  color: #000000 !important;
  font-size: 14px !important;
  width: 14.25px !important;
  height: 14px !important;
  line-height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.menu-container button#credentialMenuTriggerButton mat-icon {
  color: #23085a !important;
  font-size: 18px !important;
  width: 12.390625px !important;
  min-width: 12.390625px !important;
  height: 18px !important;
  line-height: 18px !important;
  margin: 0 8px 0 0 !important;
  display: block !important;
}

.menu-container button#credentialMenuTriggerButton .mdc-button__label {
  width: 45px !important;
  min-width: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sign-in-more-options {
  margin-top: 8px !important;
  margin-bottom: 0px !important;
  line-height: 24px !important;
  height: 24px !important;
}

.sign-in-more-options a {
  color: #23085a !important;
  text-decoration: underline !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

/* 4. Banner Container and Certificate */
.banner-container {
  padding: 32px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background-color: #f4f5fa !important;
  box-sizing: border-box !important;
}

.banner-container .content {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.certificate.portrait {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  background-color: rgb(238, 238, 238) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.banner.portrait {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 1px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}

/* 5. Private Chip Positioning & Sizing */
@media (min-width: 992px) {
  .banner-container .content {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  .chip-wrapper {
    position: absolute !important;
    top: 0px !important;
    right: 16px !important;
    width: 100.938px !important;
    height: 40px !important;
    display: flex !important;
    align-items: flex-end !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
  }
  accredible-chip.private, .private-chip-btn {
    margin: 0 0 8px 0 !important;
  }
}

@media (max-width: 991.98px) {
  .banner-container {
    padding: 32px 0 !important;
  }
  .banner-container .content {
    flex-direction: column-reverse !important;
    align-items: center !important;
    padding: 0 16px !important;
  }
  .chip-wrapper {
    position: relative !important;
    width: 108.938px !important;
    height: 40px !important;
    display: flex !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
  }
  accredible-chip.private, .private-chip-btn {
    margin: 0 8px 8px 0 !important;
  }
}

accredible-chip.private, .private-chip-btn {
  display: block !important;
  width: 100.938px !important;
  min-width: 100.938px !important;
  max-width: 100.938px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  background-color: rgb(232, 232, 232) !important;
  border-radius: 4px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #000000 !important;
  font-family: 'British Council Sans', sans-serif !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: background-color 0.2s !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
}

accredible-chip.private:hover, .private-chip-btn:hover {
  background-color: #dedede !important;
}

accredible-chip.private .mat-mdc-tooltip-trigger,
.private-chip-btn .mat-mdc-tooltip-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: normal !important;
  width: 100.938px !important;
  height: 32px !important;
  padding: 0 12px !important;
  gap: normal !important;
  box-sizing: border-box !important;
  line-height: 24px !important;
  letter-spacing: 0.25px !important;
  white-space: nowrap !important;
}

accredible-chip.private accredible-icon,
.private-chip-btn accredible-icon,
accredible-chip.private .trailing-margin-narrow,
.private-chip-btn .trailing-margin-narrow {
  display: flex !important;
  align-items: normal !important;
  justify-content: normal !important;
  margin-right: 4px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

accredible-chip.private mat-icon,
accredible-chip.private .material-icons,
.private-chip-btn mat-icon,
.private-chip-btn .material-icons {
  font-family: 'Material Icons' !important;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  color: #000000 !important;
  display: block !important;
  align-items: normal !important;
  justify-content: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

accredible-chip.private span,
.private-chip-btn span {
  display: block !important;
  margin: 0 !important;
  padding: 5px 5px 7px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.25px !important;
  color: #000000 !important;
  box-sizing: border-box !important;
}

/* 6. Lower Content Layout and Typography */
body .content.with-vertical-padding {
  box-sizing: border-box !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 48px 16px 0px !important;
}

@media (max-width: 768px) {
  body .content.with-vertical-padding {
    padding: 32px 16px 0px !important;
  }
}

.main-panel .issuer-info {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

.main-panel .issuer-info .issuer-link {
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #23085a !important;
  text-decoration: underline !important;
}

.credential-name h1, h1.mat-h1 {
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
  margin: 0 0 16px 0 !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

.main-panel .recipient-issuer {
  margin: 0 0 32px 0 !important;
}

.main-panel .recipient-issuer .name {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
  letter-spacing: 0.15px !important;
  margin: 0 !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

.main-panel .recipient-issuer .subtitle a {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #23085a !important;
  text-decoration: underline !important;
}

.main-panel .description,
.description.accredible-rich-text-wrapper {
  font-family: 'British Council Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0.25px !important;
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 32px 0 !important;
  white-space: pre-line !important;
}

.main-panel .dates.row {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 853.609px !important;
  gap: 0px !important;
  margin: 32px 0 !important;
  padding: 0 !important;
}

.dates .issued-on,
.dates .expires-on {
  flex: 1 0 1px !important;
  width: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.dates .issued-on h3,
.dates .expires-on h3,
.dates h3.mat-h4 {
  font-family: 'British Council Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.1px !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.dates .issued-on div:not(.mat-h4) {
  font-family: 'British Council Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.25px !important;
  text-transform: none !important;
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dates .expires-on .mat-subtitle-2,
.dates .expires-on div:not(.mat-h4) {
  font-family: 'British Council Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0.25px !important;
  text-transform: none !important;
  color: rgba(0, 0, 0, 0.87) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar section.widget {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  padding: 20px !important;
  box-shadow: none !important;
  margin-bottom: 32px !important;
}

.sidebar section.widget h2 {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.87) !important;
  margin-bottom: 16px !important;
}

.sidebar section.widget .verify-button,
.sidebar section.widget .btn-issuer-action {
  height: 36px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #23085a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  transition: background-color 0.15s !important;
}

.sidebar section.widget .verify-button:hover,
.sidebar section.widget .btn-issuer-action:hover {
  background-color: rgba(35, 8, 90, 0.04) !important;
}

@media (min-width: 992px) {
  .sidebar {
    width: 360px !important;
    flex-shrink: 0 !important;
    margin: 0 0 0 54.4px !important;
  }
}

/* 7. Responsive Cookies Banner - Desactivado completamente */
accredible-cookies-banner,
.cookies-banner {
  display: none !important;
}

@media (min-width: 576px) {
  accredible-cookies-banner .cookies-banner {
    top: auto !important;
    bottom: 0 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15) !important;
  }
}

@media (max-width: 575.98px) {
  accredible-cookies-banner .cookies-banner {
    top: 0 !important;
    bottom: auto !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
    padding: 12px 16px !important;
  }
}

accredible-cookies-banner .cookies-banner .content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

accredible-cookies-banner .cookies-banner a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

accredible-cookies-banner .cookies-banner button {
  background-color: rgb(0, 166, 163) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  flex-shrink: 0 !important;
}

accredible-cookies-banner .cookies-banner button:hover {
  background-color: rgb(0, 145, 142) !important;
}

/* 8. Desktop vs Mobile Actions Menu */
@media (min-width: 576px) {
  .menu-container {
    display: block !important;
  }
  .mobile-menu-buttons {
    display: none !important;
  }
  .expand-button-container {
    display: none !important;
  }
  .main-panel-expand-container {
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media (max-width: 575.98px) {
  .menu-container {
    display: none !important;
  }
  .main-panel .mobile-menu-buttons,
  .mobile-menu-buttons {
    display: flex !important;
    justify-content: space-around !important;
    gap: normal !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .main-panel .mobile-menu-buttons .mobile-popup-trigger,
  .mobile-popup-trigger {
    align-items: center !important;
    flex: 1 1 0% !important;
    justify-content: space-evenly !important;
    padding: 0 32px 2px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    height: 36px !important;
    box-sizing: border-box !important;
    font-family: "British Council Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: rgb(35, 8, 90) !important;
    letter-spacing: 0.25px !important;
    transition: background-color 0.2s, border-color 0.2s !important;
  }
  .main-panel .mobile-menu-buttons .mobile-popup-trigger.trailing-margin,
  .mobile-popup-trigger.trailing-margin {
    margin: 0 8px 0 0 !important;
  }
  .mobile-popup-trigger .mdc-button__label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-popup-trigger .trailing-margin,
  .mobile-popup-trigger span {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: rgb(35, 8, 90) !important;
    font-family: "British Council Sans", sans-serif !important;
    letter-spacing: 0.25px !important;
  }
  .mobile-popup-trigger .trailing-margin {
    margin-right: 8px !important;
  }
  .mobile-popup-trigger .material-icons,
  .mobile-popup-trigger mat-icon {
    font-family: 'Material Icons' !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 8px 0 -4px !important;
    color: rgb(35, 8, 90) !important;
    vertical-align: middle !important;
  }
  .mobile-popup-trigger:active {
    background-color: rgba(35, 8, 90, 0.08) !important;
  }
  .main-panel .sign-in-more-options {
    margin: 8px 0 0 0 !important;
  }
  .main-panel .sign-in-more-options a {
    color: #23085a !important;
    text-decoration: underline !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }
  .main-panel-expand-container {
    margin-top: 32px !important;
  }
  .credential-container {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }
  .content-container {
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  accredible-cookies-banner .cookies-banner .content {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  accredible-cookies-banner .cookies-banner button {
    align-self: flex-end !important;
  }

  /* Collapsible container in mobile */
  .main-panel-expand-container {
    position: relative !important;
    transition: max-height 0.50225s cubic-bezier(0.9, 0.1, 0.83, 0.67);
  }
  .main-panel-expand-container.collapsed {
    max-height: 60px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, transparent 8%, black 56%);
    mask-image: linear-gradient(to top, transparent 8%, black 56%);
  }
  .main-panel-expand-container.expanded {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .expand-button-container {
    display: flex !important;
    justify-content: center !important;
    margin-top: 14px !important;
  }
  #toggleShowMoreBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    color: rgb(35, 8, 90) !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-family: "British Council Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    position: relative !important;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  #toggleShowMoreBtn:hover {
    background-color: rgba(35, 8, 90, 0.04) !important;
  }
  #toggleShowMoreBtn:active,
  #toggleShowMoreBtn.btn-highlight-active {
    background-color: rgba(35, 8, 90, 0.12) !important;
  }
  #toggleShowMoreBtn span {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(35, 8, 90) !important;
  }
  #toggleShowMoreBtn #showMoreIcon {
    font-size: 20px !important;
    line-height: 20px !important;
    color: rgb(35, 8, 90) !important;
  }

  /* Mobile Credential Verification Modal - Full Width & Centered Loading Columns */
  #modalVerifyContainer {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    max-height: 600px !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-inner-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-surface {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    max-height: 600px !important;
  }
  #modalVerifyContainer .header {
    width: 100% !important;
    padding: 5px 0px 0px !important;
    box-sizing: border-box !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-title {
    padding: 0px 50px 9px 24px !important;
    font-size: 20px !important;
    line-height: 32px !important;
  }
  #modalVerifyContainer .close-dialog {
    position: absolute !important;
    top: 15px !important;
    right: 10px !important;
  }
  #modalVerifyContainer .close-dialog button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #modalVerifyContainer .close-dialog button.close-btn-focus-ring {
    background: transparent !important;
    box-shadow: none !important;
  }
  #modalVerifyContainer .close-dialog button:hover:not(.close-btn-focus-ring) {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-content {
    padding: 20px 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-content::-webkit-scrollbar {
    width: 4px !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-content::-webkit-scrollbar-track {
    background: transparent !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.28) !important;
    border-radius: 4px !important;
    border: none !important;
  }
  #modalVerifyContainer .mat-mdc-dialog-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.45) !important;
  }
  #modalVerifyContainer .verify-dialog {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
  }

  /* Mobile Loading States - Item 1 */
  #modalVerifyContainer .verify-dialog > .verifying {
    padding: 20px 0px !important;
    margin: 0px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  /* Item 2 */
  #modalVerifyContainer .verify-dialog .issuer .verifying {
    margin: 0px 0px 15px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  /* Item 3 - Blockchain (centered column, spinner on top, text underneath) */
  #modalVerifyContainer .verify-dialog .blockchain .verifying,
  #modalVerifyContainer .verify-dialog .verifying.verifying-stacked {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0px 0px 15px !important;
    gap: 8px !important;
  }
  #modalVerifyContainer .verify-dialog .blockchain .verifying span,
  #modalVerifyContainer .verify-dialog .verifying.verifying-stacked span {
    text-align: center !important;
  }
  /* Item 4 */
  #modalVerifyContainer .verify-dialog .recipient .verifying {
    margin: 0px 0px 15px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  /* Item 5 - Credential Status (centered column, spinner on top, text underneath) */
  #modalVerifyContainer .verify-dialog .credential-details .verifying {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0px 0px 15px !important;
    gap: 8px !important;
  }
  #modalVerifyContainer .verify-dialog .credential-details .verifying span {
    text-align: center !important;
  }
}