/* Apply font to entire site */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
li,
td,
th,
blockquote,
label {
  font-family: Roboto !important;
}

/* ============================
Common for all pages 
========================== */

@media (min-width: 1400px) {
  .row.sectionBlockLayout .container {
    max-width: 1100px !important;
  }

}

.container {
  justify-content: left;
}

h2 {
  margin-top: 1px !important;
}

/* ===========================
  HEADER STYLING
=========================== */
.navbar-nav .weblink img {
  height: 60px;
  object-fit: contain;
  vertical-align: middle;
}

.static-top.navbar-dark {
  background-color: #0a1c5c;
}

.navbar-dark .navbar-nav>li>a:focus,
.navbar-dark .navbar-nav>li>a:focus-visible {
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
}

/* Navbar links */
#navbar a.nav-link {
  background: transparent;
  text-decoration: none;
  outline: none;
  box-shadow: none;
  /*  font-family: Roboto; */
  align-self: center;
}

/* Colors */
#navbar a.nav-link:has(img) {
  color: #0a1c5c;
}

#navbar a.nav-link:not(:has(img)) {
  color: white;
  /*  font-family: Roboto; */
}

/* Logo */
.xrm-attribute-value a img {
  height: 110px !important;
  width: auto;
  margin: 0 10px;
}

/* Desktop: icons only */
@media (min-width: 1200px) {
  .navbar-nav .weblink a .weblink-title {
    display: none;
  }

  .navbar-nav .weblink a img {
    display: inline-block;
  }

  .navbar-nav .nav-item:last-child {
    align-self: center;
  }

}

/* Mobile: titles only */
@media (max-width: 1199.98px) {
  .navbar-nav .weblink a img {
    display: none;
  }

  .navbar-nav .weblink a .weblink-title {
    display: inline;
    color: #dfe3ec;
  }
}

/* ----- Home weblinks ---- - */



/* Align header tabs to same width as main header */
.header-tabs-fullrow {
  background: #dfe3ec;
}

.header-tabs-fullrow .header-tabs-nav {
  max-width: 1100px;
  /* matches your header */
  margin: 0 auto;
  padding: 10px 0;
}


/* Push the last item ("Sign in") to the right */
.nav.header-tabs .nav-item:last-child {
  margin-left: auto;
}

/* Remove extra space from the next item after Application Progress */
.nav.header-tabs li:has(> a[href="/My-Order-History/"])+li {
  margin-left: 0 !important;
}

/* Push Application Progress to the  right */
.nav.header-tabs li:has(> a[href="/My-Order-History/"]) {
  margin-left: auto !important;
}

/* Default link style */
.nav.header-tabs a.nav-link {
  color: #0a1c5c;
  font-size: 16px;
  text-decoration: none;
  /* remove underline */
}

/* Hover styling for nav links */
.nav.header-tabs a.nav-link:hover {
  background-color: #0a1c5c;
  color: #ffffff !important;
  text-decoration: none !important;
  /* remove underline on hover */
}

/* Dropdown items hover */
.nav.header-tabs .dropdown-menu .dropdown-item:hover {
  background-color: #0a1c5c;
  color: #ffffff !important;
}

.wrapper-body {
  background: #dfe3ec !important;
  min-height: unset !important;
}

body {
  background: #dfe3ec !important;
}



/* ===========================
   FOOTER STYLING
=========================== */

.footer-container {
  width: 100%;
  box-sizing: border-box;
  /*  font-family: Roboto; */
  color: #0a1c5c;
  font-size: 12px;
  padding-top: 20px
}

/* Top Section */
.footer-links-section {
  background: #f1f2f6;
  padding: 5px 10vw;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.footer-column {
  flex: 1 1 220px;
  min-width: 220px;
}

.footer-heading {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 12px;
  color: #0a1c5c
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li {
  margin-bottom: 6px;
}

.footer-list a {
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  /*  font-family: Roboto; */
}

.footer-list a:hover {
  text-decoration: underline;
}

/* Bottom Section */
.footer-bottom-section {
  background: #fff;
  padding: 25px 5vw;
}

/* Social Icons */
.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-icons img {
  max-height: 30px;
  width: auto;
}

/* Legal Links */
.footer-legal {
  text-align: center;
  font-weight: bold;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  margin: 0 6px;
  font-weight: bold;
  /*  font-family: Roboto; */
  font-size: 12px
}

.footer-legal a:hover {
  text-decoration: underline;
}


/* ===========================
   Home Page STYLING
=========================== */
/* Remove focus outlines globally */
.navbar a:focus,
.navbar a img:focus,
.nav-item .nav-link:focus,
.nav-item img:focus,
a:focus,
img:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Outer wrapper */
.tsy-home-wrapper {
  max-width: 1100px;
  margin: 30px auto 60px;
  font-family: "Segoe UI", sans-serif;
  text-align: center;
}

/* Heading */
.tsy-home-wrapper h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #1a1a1a;
}

/* Card container */
.tsy-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}


.tsy-cards a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none !important;

  width: 350px;
  min-height: 230px;

  background: #ffffff;
  border-radius: 14px;
  padding: 32px 24px;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border-top: 7px solid #0a1c5c;

  text-decoration: none;
  color: inherit;

  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover */
.tsy-cards a:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  text-decoration: none !important;
}

/* Icon */
.tsy-cards a img {
  height: 50px;
}

/* Content below icon  */
.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}

/* Title */
.tsy-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
}

/* Description */
.tsy-card-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.4;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .tsy-cards a {
    width: 100%;
  }
}


/* ===========================
   Cases List Table Alignment
=========================== */
.columnBlockLayout {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  /* max-width: 75%; */
}





.tab-column,
.crmEntityFormView,
.modal-content,
.popover-content,
.list-group-item,
.card-body {
  background-color: #dfe3ec !important;
  border: 1px solid #dfe3ec !important;
}

.crmEntityFormView label {
  background-color: #dfe3ec !important;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-block;
}

/* ==========================================
   
CASE SUBMISSION DETAILS  

========================================== */
/* Page scope wrapper */
.case-submission-details {
  min-height: auto;
  padding: 8px;
}

.case-submission-details .container {
  display: flex;
  flex-wrap: wrap;
}

/* Card */
.case-submission-details .success-card {
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 30px;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
}

/* Heading */
.case-submission-details .success-heading {
  color: #0a1c5c;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 15px;
}

/* Intro text */
.case-submission-details .success-intro {
  margin-bottom: 16px;
}

/* Labels */
.case-submission-details .case-label {
  margin: 10px 0 2px;
  font-weight: 500;
}

/* Title */
.case-submission-details .case-title {
  font-size: 18px;
  color: #333;
}

/* Reference Number */
.case-submission-details .case-number {
  font-size: 22px;
  color: #0a1c5c;
  margin-top: 10px;
}

/* Back link button */
.case-submission-details .back-to-cases {
  display: inline-block;
  color: #0a1c5c;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #0a1c5c;
  padding: 10px 18px;
  border-radius: 6px;
  transition: 0.2s ease;
  margin-top: 20px;
}

.case-submission-details .back-to-cases:hover {
  background: #0a1c5c;
  color: #ffffff;
  text-decoration: none !important;
}

/* Error message */
.case-submission-details .case-error {
  color: #b30000;
  font-weight: 500;
}


/* ==========================================
   
CONCESSIONS 

========================================== */

/* ================================
   HEADING
================================ */
.concessions-page .concessions-header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

.concessions-page .concessions-heading {
  text-align: center;
  color: #0a1c5c;
}

/* ================================
   GRID LAYOUT
================================ */
.concessions-page .concessions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 990px;
  margin: 0 auto;
  padding: 24px 0;
}

/* ================================
   CARD
================================ */
.concessions-page .concession-card {
  display: block;
  text-decoration: none !important;
  color: inherit;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.concessions-page .concession-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.concessions-page .concession-card,
.concessions-page .concession-card * {
  text-decoration: none !important;
}

/* ================================
   IMAGE CONTAINER
================================ */
.concessions-page .card-image {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.concessions-page .card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* NO CROPPING */
}

/* ================================
   TITLE & PRICE
================================ */
.concessions-page .card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2a44;
  margin: 8px 0 4px;
  min-height: 38px;
}

.concessions-page .card-price {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 1200px) {
  .concessions-page .concessions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .concessions-page .concessions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .concessions-page .concessions-grid {
    grid-template-columns: 1fr;
  }
}



/* ==========================================
   
MY SUPPORT CASES  

========================================== */


/* Icon spacing */
.mobile-raise-btn i {
  margin-right: 6px;
}



/* ==========================================
   CARD WRAPPER
========================================== */
.case-card-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 20px 20px 0 20px;
  border: 1px solid #e2e6f0;
}

/* Remove Power Pages padding */
.entitylist,
.entitylist .entity-grid,
.entitylist .table-responsive {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: none !important;
}

.entitylist .view-toolbar {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================
   HEADER (TITLE + DESCRIPTION + BUTTON)
========================================== */
.case-list-header {
  padding-bottom: 10px;
}

.case-list-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case-list-title {
  font-size: 26px;
  font-weight: 600;
  color: #0a1c5c;
  margin: 0;
}

.case-list-description {
  font-size: 15px;
  color: #555;
  margin-top: 6px;
}

/* Button style */
.grid-actions a.btn.action.create-action {
  background-color: #0a1c5c !important;
  color: white !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  border: none !important;
}

a.create-action::before {
  font-family: "FontAwesome";
  content: "\f055";
  margin-right: 6px;
}

/* ==========================================
   TABLE HEADERS — EXACT EXPECTED UI
========================================== */
table.entity-grid {
  width: 100%;
  border-collapse: collapse !important;
}

table.entity-grid thead tr,
table.entity-grid thead th {
  background-color: #f3f6ff !important;
}

table.entity-grid thead tr th {
  font-weight: 600 !important;
  color: #0a1c5c !important;
  padding: 14px 12px !important;
  border-bottom: 1px solid #D9DEEA !important;
  font-size: 15px !important;
}

/* Remove underline from header links */
table.entity-grid thead tr th a {
  text-decoration: none !important;
  color: #0a1c5c !important;
}

table.entity-grid thead tr th a:hover {
  opacity: 0.85;
}

/* ==========================================
   BODY ROWS
========================================== */
table.entity-grid tbody tr td {
  padding: 12px 10px !important;
  background: white !important;
  border-bottom: 1px solid #E4E8F3 !important;
}

table.entity-grid tbody tr:last-child td {
  border-bottom: none !important;
}

/* Remove ALL Bootstrap inset shadows on table cells */
.entitylist table.entity-grid> :not(caption)>*>* {
  box-shadow: none !important;
  --bs-table-accent-bg: transparent !important;
}

/* ==========================================
   DROPDOWN BUTTON
========================================== */
.entity-grid .btn {
  border-radius: 6px !important;
  border: 1px solid #d7dce5 !important;
  height: 32px !important;
  padding: 4px 8px !important;
}

/* ==========================================
   STATUS PILL STYLES
========================================== */
.case-status-pill {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  min-width: 90px;
  text-align: center;
}

.case-pill-open {
  background: #E8F7ED;
  color: #0A8043;
}

.case-pill-resolved {
  background: #E8F0FF;
  color: #2456D0;
}

.case-pill-cancelled {
  background: #FFECEC;
  color: #C62828;
}


/* Force Case Status column to center-align pills */
td[data-attribute="statecode"] {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Make all pills exactly the same width for perfect alignment */
.case-status-pill {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 140px;
  padding: 6px 0 !important;
  border: 3px solid rgba(0, 0, 0, 0.1);
}

/* HIDE mobile duplicate button by default (desktop/tablet) */
.mobile-raise-btn-wrapper {
  display: none;
}

/* Style new mobile button */
.mobile-raise-btn {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background-color: #0a1c5c;
  color: white !important;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 12px;
}

.mobile-raise-btn-wrapper a.mobile-raise-btn {
  text-decoration: none !important;
}


/* Case Status column – align left */
.entitylist table td[data-th="Case Status"] {
  text-align: left !important;
}


/* ===============================
   MY SUPPORT CASES – HEADER ROW
================================ */

/* Header row background */
.entitylist table thead tr {
  background-color: #f6f8fc;
  border-bottom: 1px solid #d6dbea;
}

/* Header cells */
.entitylist table thead th {
  padding: 14px 12px;
  vertical-align: middle;
}

/* Header links (THIS is the key fix) */
.entitylist table thead th a {
  text-decoration: none !important;
  /* remove underline */
  text-transform: none !important;
  /* remove ALL CAPS */
  font-size: 14px;
  /* clearer */
  font-weight: 600;
  color: #0a1c5c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hover state (still clickable, not shouty) */
.entitylist table thead th a:hover {
  text-decoration: underline;
  color: #0a1c5c;
}

/* Remove default focus outline ugliness */
.entitylist table thead th a:focus {
  outline: none;
  box-shadow: none;
}


/* ==============================================
   MOBILE RESPONSIVE CASE LIST (≤ 1199px)
================================================= */
@media screen and (max-width: 1199.98px) {


  /* Action column – align arrow to bottom */
  .view-grid table tr td:last-child {
    vertical-align: bottom !important;
  }

  /* Ensure dropdown button sits at bottom */
  .view-grid table tr td:last-child .dropdown {
    display: flex;
    align-items: flex-end;
    height: 100%;
  }


  /* Hide original toolbar-injected button */
  .view-toolbar.grid-actions {
    display: none !important;
  }

  /* Show mobile button */
  .mobile-raise-btn-wrapper {
    display: block !important;
    width: 100% !important;
  }

  /* Remove table visuals */
  .entitylist table thead {
    display: none !important;
  }

  table.table-striped>tbody>tr>* {
    background: transparent !important;
  }

  /* Make row a 2-column grid */
  .entitylist table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 16px;
    row-gap: 10px;

    background: #fff !important;
    border-radius: 12px;
    padding: 8px;
    border: 1px solid #0a1c5c;
    margin-bottom: 18px;
  }

  /* Default cell behavior */
  .entitylist table tbody tr td {
    display: block !important;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .entitylist table tbody tr td::before {
    content: attr(data-th);
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-bottom: 3px;
  }

  /* ---------------------------
       EXPLICIT GRID PLACEMENTS
    --------------------------- */

  /* Row 1 */
  td[data-attribute="ticketnumber"] {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  td[data-attribute="statuscode"] {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  td[data-attribute="statuscode"]::before {
    content: "" !important;
  }

  /* Row 2 → Case Type + Category side-by-side */
  td[data-attribute="casetypecode"] {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }

  td[data-attribute="symca_category"] {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    justify-self: start !important;

  }

  /* Row 3 → Subcategory full width */
  td[data-attribute="symca_subcategory"] {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  /* Row 4 → Created On + Actions */
  td[data-attribute="createdon"] {
    grid-column: 1 / 2 !important;
    grid-row: 4 !important;
  }

  td[aria-label="action menu"],
  td[data-th="Actions"] {
    grid-column: 2 / 3 !important;
    grid-row: 4 !important;
    justify-self: end !important;
  }

  /* Status pill styling */
  .case-status-pill {
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    display: inline-block !important;
  }

  /* Align mobile header (title, caption, button) */
  .case-list-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #case-action-btn {
    width: 100% !important;
    margin-top: 12px !important;
  }

  #case-action-btn .create-action {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  /* Kill striped backgrounds */
  table.table-striped>tbody>tr:nth-of-type(odd)>*,
  table.table-striped>tbody>tr:nth-of-type(even)>* {
    background: transparent !important;
    --bs-table-accent-bg: transparent !important;
  }

  .case-card-wrapper {
    margin: 0px !important;
  }
}














/* ===========================
   Page - 9 Order Summary 
=========================== */

.order-confirmation-section {
  padding: 8px;
}

.order-confirmation-wrapper {

  padding: 20px;
  background: #ffffff;
  border-radius: 6px;

}

.order-confirmation-title {
  font-size: 28px;
  margin-bottom: 20px;
}

.order-success-message {
  background: #e6f4e1;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 25px;
  font-size: 14px !important;
}

.order-number {
  font-size: 18px;
  margin-bottom: 15px;
}

.order-items {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

.order-item-row.header {
  background: #f5f5f5;
  font-weight: 600;
}

.order-item-row.total {
  font-weight: 700;
  background: #fafafa;
}

.order-item-row:last-child {
  border-bottom: none;
}

.order-success-message p {
  font-size: 16px;
}

.order-number span {
  font-weight: 800;
}

/*===========================
    OS Address styling
=========================== */
#symca_localauthority,
#symca_localauthority_label {
  display: none;
}

.autocomplete-wrapper {
  position: relative;
}

.autocomplete-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 40px;

  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;

  display: none;
}

.autocomplete-results-visible {
  display: block;
}

.text-muted {
  display: none;
}

#symca_addresssearch_results {
  gap: 0px;
}

/*===========================
    My Cards Page 
======================*/
/* Card wrapper */
.pass-card {
  display: flex;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* max-width: 750px; */
  overflow: hidden;
  margin-bottom: 18px;
}


/* LEFT PANEL */
.pass-card-left {
  width: 40%;
  text-align: center;
  background: white;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 10px;
}

.pass-card-logo {
  background: #0a1c5c;
  padding: 8px;
}

.pass-card-logo img {
  width: 100px;
  display: block;
}

.pass-card-profile {

  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  /* right align */
}

.pass-card-profile img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.pass-card-number {
  font-weight: 600;
  padding: 6px;
  font-size: 14px;
  margin-top: 6px;
  text-align: left;
}

/* RIGHT PANEL */
.pass-card-right {
  flex: 1;
  padding: 18px 22px;
}

.pass-row {
  margin-bottom: 6px;
  font-size: 14px;
}

.pass-row strong {
  font-weight: 600;
}

/* Button */
.pass-replace-btn {
  margin-top: 12px;
  background: #0a1c5c;
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
}

.pass-replace-btn:hover {
  background: #081648;
}


/* Header area containing logo + profile */
.pass-card-header {
  background: #f7f9fc;
  border: 1px solid #dcdcdc;
  /* NEW border */
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}

.pass-replace-btn.btn-disabled {
  background: #b5b5b5;
  cursor: not-allowed;
  opacity: 0.8;
}

.card-status-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
}

/* Active */
.card-pill-active {
  background: #e7f6ed;
  color: #0f7b3e;
  border: 2px solid #ccead9;
}

/* Inactive */
.card-pill-inactive {
  background: #FFECEC;
  color: #c91919;
  border: 2px solid #ddb1b1;
}


/* ===== MOBILE RESPONSIVE LAYOUT ===== */
@media (max-width: 768px) {

  /* Stack left + right vertically */
  .pass-card {
    flex-direction: column;
    max-width: 100%;
  }

  /* Left mini-card full width */
  .pass-card-left {
    width: 90% !important;
  }

  /* Right panel full width */
  .pass-card-right {
    padding: 12px 18px 20px 18px;
  }

  /* Center content on mobile */
  .pass-card-number {
    text-align: center;
  }

  /* Make logo slightly smaller */
  .pass-card-logo img {
    width: 90px;
  }

  .pass-card-profile img {
    width: 85px;
  }

  /* Center Replace button */
  .pass-replace-btn {
    width: 100%;
    text-align: center;
  }

}



/*==============
Pass Replacemenrt Page 
==================*/
.card-form {
  display: none
}

#customerDeskForm .actions {
  display: none
}

#customerDeskForm .tab-title {
  display: none
}


#customerDeskForm fieldset,
#customerDeskForm table,
#customerDeskForm tbody,
#customerDeskForm tr,
#customerDeskForm td {
  margin: 0 !important;
  padding: 0 !important;
}

/* Align entity form content with the top text */
#customerDeskForm .crmEntityFormView,
#customerDeskForm .entity-form,
#customerDeskForm table.section {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border: none !important;
}


.radio-option input[type="radio"] {
  transform: scale(1.3);
  margin-right: 6px;
}

/* Radio layout */
.radio-option {
  margin-right: 30px;
}

/* Required star */
.radio-group legend span {
  color: red;
  position: relative;
}


#replacementMessages>div {
  margin-top: 12px;
  padding: 14px;
  background: #e9f6ff;
  border-radius: 6px;
  border: 1px solid #cce5ff;
}

/* Layout */
.replacement-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
}

.replacement-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 16px;
  margin: 60px 0;
}

/* Messages */
.replacement-message {
  display: none;
  margin-top: 12px;
  padding: 14px;
  background: #e9f6ff;
  border-radius: 6px;
  border: 1px solid #cce5ff;
}

/* Crime reference */
.crime-reference {
  display: none;
  margin-top: 15px;
}

.required {
  color: red;
}

.field-error {
  color: red;
  display: none;
}

/* Buttons */
.replacement-actions {
  margin-top: 20px;
}

#btnHome {
  display: none;
}

/* Global Loader Styles */
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #ddd;
  border-top: 5px solid #0a1c5c;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loader overlay */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: inherit;
}

#loadingOverlay .loading-text {
  margin-top: 14px;
  font-size: 16px;
}



/* ================================
   Page -6
   
   Checkout Page 
   ================================ */

/* Hide pass protection row initially */
#passProtectionRow {
  display: none;
}

/* Hide offer section initially */
#passProtectionSection {
  display: none;
  margin-top: 30px;
}

/* Keep table full width */
.basket-table {
  width: 100%;
}

/* Right align totals + button */
.basket-summary {
  text-align: right;
  margin-top: 10px;
  font-weight: 600;
}

.basket-submit {
  text-align: right;
  margin-top: 15px;
}

/* Improve remove button spacing */
#removePPBtn {
  padding: 4px 10px;
}

/* Loader overlay */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: inherit;
}

#loadingOverlay .loading-text {
  margin-top: 14px;
  font-size: 16px;
}

.qty-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  overflow: hidden;
  height: 28px;
}

.qty-label {
  background: #f2f2f2;
  padding: 0 8px;
  font-weight: bold;
  border-right: 1px solid #c9c9c9;
  font-size: 14px;
}

.qty-input {
  width: 32px;
  text-align: center;
  border: none;
  outline: none;
  font-size: 14px;
  background: #fff;
}


/* Match standard Power Pages section spacing */
.basket-section {
  margin: 0;
  padding: 8px;
}

.basket-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 16px;
  margin: 60px 0;
}

/* Divider */
.section-divider {
  border: none;
  border-top: 1px solid #dcdcdc;
  margin: 10px 0 20px;
}

/* Tables */
.basket-table {
  width: 100%;
}

/* Quantity box */
.qty-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  overflow: hidden;
  height: 28px;
}

.qty-label {
  background: #f2f2f2;
  padding: 0 8px;
  font-weight: bold;
  border-right: 1px solid #c9c9c9;
  font-size: 14px;
}

.qty-input {
  width: 32px;
  text-align: center;
  border: none;
  outline: none;
  font-size: 14px;
  background: #fff;
}

/* Pass protection row hidden initially */
#passProtectionRow {
  display: none;
}

/* Pass protection offer hidden initially */
#passProtectionSection {
  display: none;
  margin-top: 30px;
}

/* Summary + submit alignment */
.basket-summary {
  text-align: right;
  margin-top: 10px;
  font-weight: 600;
}

.basket-submit {
  text-align: right;
  margin-top: 15px;
}



/* ===== Confirmation Modal Styling ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 20, 60, 0.55);
  /* brand tinted overlay */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 26px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: modalPop 0.18s ease-out;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #0a1c5c;
  /* TSY brand navy */
  margin-bottom: 10px;
}

.modal-text {
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Buttons */
.modal-btn-danger {
  background: #e63946;
  border: none;
  color: #fff;
  padding: 6px 16px;
  border-radius: 4px;
}

.modal-btn-danger:hover {
  background: #c92d39;
}

.modal-btn-secondary {
  background: #ffffff;
  border: 1px solid #0a1c5c;
  color: #0a1c5c;
  padding: 6px 16px;
  border-radius: 4px;
}

.modal-btn-secondary:hover {
  background: #f2f4fa;
}

/* Pop animation */
@keyframes modalPop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .modal-card {
    padding: 22px;
  }

  .modal-actions {
    flex-direction: column;
  }
}


/* ================================
   Mobile full-width Checkout button
   ================================ */
@media (max-width: 768px) {

  /* Mobile fix: prevent table overflow */
  .basket-table th,
  .basket-table td {
    font-size: 14px;
    padding: 6px;
  }

  .qty-box {
    height: 24px;
  }

  #removePPBtn {
    white-space: nowrap;
  }

  #submitOrderBtn {
    font-weight: 600;
    letter-spacing: 0.3px;
    width: 100%;
    display: block;
    font-size: 1rem;
    padding: 14px 16px;
    border-radius: 8px;
  }

  .basket-submit {
    width: 100%;
    padding: 0;
  }

}

/* ===================
   Order Details Page 
   =================== */
/* Section layout base font size */
.OrderDetailsSection.sectionBlockLayout {
  font-size: 14px;
}

.OrderDetailsSection.sectionBlockLayout p,
.OrderDetailsSection.sectionBlockLayout span,
.OrderDetailsSection.sectionBlockLayout strong {
  font-size: inherit;
}

/* Card Layout */
.OrderDetailsSection .card-style {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* min-width: 250px;
  max-width: 900px;
  margin: 40px auto; */
  padding: 24px;
  border-radius: 8px;
}

.order-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  height: 33px;
}

/* Active */
.order-pill-active {
  background: #e7f6ed;
  color: #0f7b3e;
  border: 2px solid #ccead9;
}

/* Fulfilled */
.order-pill-fulfilled {
  background: #e8f1ff;
  color: #003087;
  border: 2px solid #cfdfff;
}

/* Cancelled */
.order-pill-cancelled {
  background: #fdeaea;
  color: #c91919;
  border: 2px solid #f6caca;
}

.product-block {
  margin-bottom: 24px;
  border: 2px solid #0c1c5c;
  border-radius: 6px;
  overflow: hidden;
}

.product-block .row-1 {
  background-color: #f5f5f5;
  border-bottom: 2px solid #e0e4ec;
  padding: 8px 12px;
}

.product-block .row-2 {
  background-color: #e0f4dc;
  padding: 8px 12px;
}

.addon-row {
  background-color: #f5f5f5;
  border-bottom: 2px solid #e0e4ec;
  padding: 8px 12px;
}

.product-name,
.total-label {
  font-weight: bold;
  margin: 0;
}

.product-pill,
.total-pill {
  background-color: #5a5a5a;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  text-align: right;
  min-width: 80px;
}

.address-heading {
  border-bottom: 1px solid #0a1c5c;
  margin: 6px 0 12px;
}


/* ==========================================
   
PROFILE PAGE

========================================== */


/* ============================================================
   1) GENERAL BLOCK & CHECKBOX STYLING
   ============================================================ */

.pp-block {
  margin-bottom: 10px;
}

.pp-block h4 {
  font-size: 16px;
  margin: 0 0 5px;
  font-weight: 600;
}

.pp-checkbox,
.tsy-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background-color: #dfe3ec !important;
  padding: 4px 6px;
  border-radius: 4px;
}

.pp-checkbox input,
.tsy-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background-color: transparent !important;
}


/* ============================================================
   2) HIDE CRM LABELS FOR MARKETING FIELDS
   ============================================================ */

#symca_newsletter_label,
#symca_offers_label,
#donotbulkemail_label,
#donotphone_label,
#donotpostalmail_label,
#symca_allowtextmessages_label {
  display: none !important;
}

/* Hide the CRM table-info container for these rows */
.boolean-radio-cell .table-info {
  display: none !important;
}


/* ============================================================
   3) PRIVACY BLOCK TEXT & HEADINGS
   ============================================================ */

#tsy-privacy-block {
  font-size: 16px;
  padding: 0px 28px;
}

#tsy-privacy-block .tsy-heading {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
  background-color: #dfe3ec !important;
  padding: 6px 8px;
  border-radius: 4px;
  display: inline-block;
}

#tsy-privacy-block .tsy-text {
  font-size: 16px;
  margin-bottom: 10px;
}

#tsy-contact-options {
  margin: 10px 0 10px 0;
}

.tsy-text-tsy-checkboxheading {
  margin-top: 40px;
  margin-bottom: 0 !important;
  font-size: 16px;
  font-weight: 700;
}


/* ============================================================
   4) BACKGROUND FOR ALL LABELS
   ============================================================ */

.crmEntityFormView label,
#tsy-privacy-block label {
  background-color: #dfe3ec !important;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-block;
}


/* ============================================================
   5) REQUIRED FIELD STYLING
   ============================================================ */

.pp-required::after {
  content: " *";
  color: red;
  font-weight: 700;
}

/* Highlight invalid */
.pp-invalid,
.pp-invalid-field {
  border: 2px solid red !important;
  background-color: #ffecec !important;
}


/* ============================================================
   6) BRAND-WIDE BACKGROUNDS
   ============================================================ */

.tab-column,
.crmEntityFormView,
.modal-content,
.popover-content,
.list-group-item,
.card-body {
  background-color: #dfe3ec !important;
  border: 1px solid #dfe3ec !important;
}

td.boolean-radio-cell {
  display: none
}


.crmEntityFormView .section-title h3 {
  font-size: 22.5px !important;
  font-weight: 700;
}

#tsy-contact-options {
  display: none;
  margin-top: 15px;
}

/* ===========================
   MY Orders 
=========================== */
.my-order-history .entity-grid thead th:nth-child(1) a,
.my-order-history .entity-grid thead th:nth-child(4) a {
  pointer-events: none;
  cursor: default;
}



@media screen and (max-width: 1199.98px) {

  /* Action column – align arrow to bottom */
  .view-grid table tr td:last-child {
    vertical-align: bottom !important;
  }

  /* Ensure dropdown button sits at bottom */
  .view-grid table tr td:last-child .dropdown {
    display: flex;
    align-items: flex-end;
    height: 100%;
  }


  /* Hide original toolbar-injected button */
  .view-toolbar.grid-actions {
    display: none !important;
  }

  /* Show mobile button */
  .mobile-raise-btn-wrapper {
    display: block !important;
    width: 100% !important;
  }

  /* Remove table visuals */
  .entitylist table thead {
    display: none !important;
  }

  table.table-striped>tbody>tr>* {
    background: transparent !important;
  }

  /* Make row a 2-column grid */
  .entitylist table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 16px;
    row-gap: 10px;

    background: #fff !important;
    border-radius: 12px;
    padding: 8px;
    border: 1px solid #0a1c5c;
    margin-bottom: 18px;
  }

  /* Default cell behavior */
  .entitylist table tbody tr td {
    display: block !important;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .entitylist table tbody tr td::before {
    content: attr(data-th);
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-bottom: 3px;
  }

  /* Align mobile header (title, caption, button) */
  .order-list-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #order-action-btn {
    width: 100% !important;
    margin-top: 12px !important;
  }

  #order-action-btn .create-action {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  /* Kill striped backgrounds */
  table.table-striped>tbody>tr:nth-of-type(odd)>*,
  table.table-striped>tbody>tr:nth-of-type(even)>* {
    background: transparent !important;
    --bs-table-accent-bg: transparent !important;
  }

  .order-card-wrapper {
    margin: 0px !important;
  }

  /* === Hide "Do Not Display" Column from entitylist === */
  /* Hide header */
  .entitylist table thead tr th:has(a[aria-label="do_not_display"]) {
    display: none !important;
  }

  /* Hide column cells */
  .entitylist table tbody tr td[data-th="do_not_display"] {
    display: none !important;
  }
}

.order-list-header {
  padding-bottom: 10px;
}

.order-list-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-list-title {
  font-size: 26px;
  font-weight: 600;
  color: #0a1c5c;
  margin: 0;
}

.order-list-description {
  font-size: 15px;
  color: #555;
  margin-top: 6px;
}

.order-card-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 20px 20px 0 20px;
  border: 1px solid white;

}

/* === Entity List Container === */
.entity-grid .view-grid {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* === Table base === */
.entity-grid table {
  border-collapse: separate;
  border-spacing: 0 8px;
  /* row gaps like card layout */
  width: 100%;
}

/* === Header row === */
.entity-grid thead th {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #4a4a4a;
  padding: 8px 12px;
}

/* === Body rows styled like cards === */
.entity-grid tbody tr {
  background: #f4f6f9;
  border-radius: 8px;
}

/* Remove default striped style */
.entity-grid .table-striped>tbody>tr:nth-of-type(odd),
.entity-grid .table-striped>tbody>tr:nth-of-type(even) {
  background: #f4f6f9;
}

/* === Table cells === */
.entity-grid tbody td {
  border: none !important;
  padding: 14px 12px;
  font-size: 14px;
  vertical-align: middle;
}

/* === Links (Order ID) === */
.entity-grid tbody td a.details-link,
.entity-grid tbody td a.edit-link {
  color: #0a3d91;
  font-weight: 600;
  text-decoration: none;
}

.entity-grid tbody td a.details-link:hover,
.entity-grid tbody td a.edit-link:hover {
  text-decoration: underline;
}

/* === Status pill === */
.entity-grid tbody td[data-attribute$="statecode"] {
  font-weight: 600;
  /*color: #008545; /* Active green */
}

/* === Action dropdown button === */
.entity-grid .dropdown.action button {
  border: 1px solid #0a3d91;
  background: transparent;
  color: #0a3d91;
  border-radius: 4px;
  padding: 4px 8px;
}

.entity-grid .dropdown.action button:hover {
  background: #0a3d91;
  color: #ffffff;
}

/* === Rounded row edges === */
.entity-grid tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
}

.entity-grid tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
}

/* === Remove bottom borders globally === */
.entity-grid table td,
.entity-grid table th {
  border-bottom: none !important;
}

.view-grid table thead th a {
  text-decoration: none !important;
  /* remove underline */
  font-weight: 700 !important;
  /* bold */
  color: #0a1c5c;
  /* optional: match your theme */
}

.view-grid table thead th a:hover {
  text-decoration: none !important;
}

/* Make action menu take full row in card layout */
.view-grid table tbody td[aria-label="action menu"] {
  grid-column: 1 / -1;
  /* span full grid width */
  text-align: right;
}

/* Right-align the dropdown button */
.view-grid table tbody td[aria-label="action menu"] .dropdown.action {
  display: flex;
  justify-content: flex-end;
}

.entitylist {
  border: none;
}

.order-status-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
}

/* Active */
.order-pill-active {
  background: #e7f6ed;
  color: #0f7b3e;
  border: 2px solid #ccead9;
}

/* Fulfilled */
.order-pill-fulfilled {
  background: #e8f1ff;
  color: #003087;
  border: 2px solid #cfdfff;
}

/* Cancelled */
.order-pill-cancelled {
  background: #fdeaea;
  color: #c91919;
  border: 2px solid #f6caca;
}

/* === Hide "Do Not Display" Column from entitylist === */
/* Hide header */
.entitylist table thead tr th:has(a[aria-label="do_not_display"]) {
  display: none !important;
}

/* Hide column cells */
.entitylist table tbody tr td[data-th="do_not_display"] {
  display: none !important;
}


/* ==========================================
   
MY CARDS 

========================================== */
/* Hide original entity list table */
.my-cards-page .entitylist .view-grid table.table {
  display: none;
}

/* Remove borders only on this page */
.my-cards-page .crmEntityFormView,
.my-cards-page .entitylist {
  border: none !important;
}


/* ==========================================
   
PASS DETAILS  

========================================== */
/* ===== PASS DETAILS WRAPPER ===== */
.pass-details-wrapper {
  max-width: 990px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}

.pass-title {
  color: #0a1c5c;
  margin-bottom: 20px;
  font-size: 28px;
}


/*===Text Styling===*/

.pass-details-wrapper,
.pass-details-wrapper * {
  font-family: Roboto !important;
  color: #0a1c5c !important;
}



/* ===== SUMMARY SECTION ===== */
.pass-summary {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  align-items: stretch;
}

/* ===== IMAGE BOX ===== */
.pass-image-box {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  width: 320px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pass-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}

/* ===== RIGHT INFO BOX ===== */
.pass-info-box {
  background: #f5f6f8;
  padding: 30px;
  border-radius: 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pass-price {
  font-size: 26px;
  font-weight: 600;
  color: #0a1c5c;
  margin-bottom: 20px;
}

/* ===== ACTIONS ===== */
.pass-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pass-actions label {
  font-weight: 500;
}

.pass-actions input {
  width: 60px;
  padding: 6px;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
}

.pass-actions input[readonly] {
  cursor: not-allowed;
  background: #f9f9f9;
}

.apply-btn {
  background: #0a1c5c;
  color: #fff !important;
  border: none;
  padding: 8px 22px;
  border-radius: 4px;
  cursor: pointer;
}

.apply-btn:hover {
  background: #08154a;
}

/* ===== TABS ===== */
.pass-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.tab-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
}

.tab-btn.active {
  background: #f5f6f8;
  font-weight: 600;
}

/* ===== TAB CONTENT ===== */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ===== RICH TEXT SAFETY ===== */
.tab-content * {
  max-width: 100%;
  box-sizing: border-box;
}

.tab-content img {
  max-width: 100%;
  height: auto;
}

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 992px) {
  .pass-summary {
    flex-direction: column;
  }

  .pass-image-box {
    width: 100%;
  }

  .pass-image {
    max-height: 220px;
  }

  .pass-info-box {
    padding: 20px;
  }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 576px) {
  .pass-title {
    font-size: 22px;
  }

  .pass-price {
    font-size: 22px;
  }

  .pass-actions {
    flex-wrap: wrap;
  }

  .apply-btn {
    width: 100%;
    margin-top: 10px;
  }
}

/* ===== RICH TEXT BULLET FIX ===== */
.tab-content ul {
  list-style: disc;
  padding-left: 20px;
  margin: 10px 0;
}

.tab-content li {
  display: list-item;
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Fix orphan bullet dots */
.tab-content li p {
  display: inline;
  margin: 0;
}




/* Modal container */
.tsy-privacy-modal .modal-content {
  background-color: #ffffff !important;
  color: #0a1c5c;
  border-radius: 6px;
}

/* Header */
.tsy-privacy-modal .modal-header {
  background-color: #ffffff;
  border-bottom: none;
  padding: 16px 20px 8px;
}

/* Heading */
.tsy-privacy-title {
  font-size: 15px;
  font-weight: bold;
  color: #0a1c5c;
  margin: 0;
}

/* Body */
.tsy-privacy-body {
  background-color: #ffffff !important;
  padding: 10px 20px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #0a1c5c;
}

/* Remove paragraph extra spacing */
.tsy-privacy-body p {
  margin-bottom: 14px;
  font-size: 14px;
}

/* Footer */
.tsy-privacy-modal .modal-footer {
  background-color: #ffffff;
  border-top: none;
  padding: 0 20px 20px;
  justify-content: flex-end;
}

/* Continue button */
.tsy-continue-btn {
  background-color: #0a1c5c;
  border: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 3px;
}

/* Hover */
.tsy-continue-btn:hover {
  background-color: white;
  border: 1px #0a1c5c;
  color: #0a1c5c;
}






/* ==========================================
   
PAGE -2 PROOF OF ELIGIBILITY 

========================================== */
/* Hide original entity list table */


.eligibilitypage.row.sectionBlockLayout.text-start {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  min-height: auto;
  padding: 8px;
}

.eligibilitypage .container {
  display: flex;
  flex-wrap: wrap;
}

.eligibilitypage .col-lg-12.columnBlockLayout {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 16px;
  margin: 60px 0px;
}

.eligibilitypage .col-lg-12.columnBlockLayout h2 {
  text-align: left;
}


.pp-instruction p {
  margin-top: 20px;
  font-size: 14px !important;

}

.tab-title {
  display: none
}

#age-proof-dynamic h4 {
  font-size: 18px !important;
}


#age-proof-dynamic p {
  font-size: 14px !important;
  margin-bottom: 12px;
  line-height: 1.5;
}


.pp-helper p {
  font-size: 16px !important;
  margin: 0;
}

.age-intro p {
  font-size: 14px !important;
}



fieldset[aria-label="Section_Hidden"] {
  display: none !important;
}



/* Make file upload controls display horizontally */
/* .control > div {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
} */

/* Target the container that holds button and file displays */
.control>div>div {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Remove vertical gaps and breaks */
.control .gap-between-vertical-element {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.control .break-file-name {
  display: inline-flex;
  align-items: center;
}

/* Ensure the file input container stays inline */
.control .container-file-input {
  display: inline-block;
}

/* Make the file name and delete button stay on same line */
.control .break-file-name+.gap-between-vertical-element {
  display: inline-flex;
  margin-left: 8px;
}

/* Specific targeting for the three file upload sections */
#symca_addressproof_label~.control>div,
#symca_ageproof_label~.control>div,
#symca_disabilityproof_label~.control>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Override any vertical spacing */
.control>div>div.break-file-name,
.control>div>div.gap-between-vertical-element {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}


/* Page container spacing */
.pp-page-content,
.tab-column {
  max-width: 1100px;
  margin: auto;
}

/* Section cards */
fieldset[aria-label^="Upload"],
fieldset[aria-label^="Proof of Eligibility"],
fieldset[aria-label^="Proof of Age"] {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 28px 28px;
  margin-bottom: 28px;
  border: 1px solid #e3e7ef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Section headers */
.section-title h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Instruction text */
.pp-instruction p {
  color: black;
  margin-bottom: 6px;
}

/* Accepted formats styling */
.pp-instruction strong {
  color: #0a1c5c;
}

/* Upload row container */
.container-file-input {
  background: #f8fafc;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px dashed #cfd8e3;
}

/* Align upload UI  */
.container-file-input>div {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* File name */
.break-file-name a {
  font-weight: 500;
  color: #0a1c5c;
  text-decoration: underline;
}

/* Delete button */
.btn-for-delete {
  color: #a10000 !important;
  font-weight: 500;
}


.btn-for-delete {
  background: transparent !important;
  border: none;
}


.btn-for-delete:hover,
.btn-for-delete:focus {
  background-color: #f8d7da !important;
  color: #b30000;
}


/* Next / Previous buttons */
#PreviousButton,
#NextButton,
input[value="Next"],
input[value="Previous"] {
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 500;
}


/* Increase inner padding of cards  (left) */
fieldset[aria-label^="Upload"],
fieldset[aria-label^="Proof of Eligibility"],
fieldset[aria-label^="Proof of Age"] {

  padding-left: 36px !important;
  padding-right: 36px !important;
}

/* Add breathing space below file field label */
.field-label {
  margin-bottom: 10px !important;
  display: inline-block;
}

/* Fix oversized bullet points inside section instructions */
.pp-instruction ul,
.pp-instruction li {
  font-size: 14px !important;
  line-height: 1.5;
}

/*  tighten spacing between bullets */
.pp-instruction li {
  margin-bottom: 6px;
}

/* reduce left indent  */
.pp-instruction ul {
  padding-left: 18px;
  margin-top: 6px;
}



/* Validation Error Messages */
.validation-error {
  color: #b00020;
  margin-top: 6px;
  font-size: 14px;
}

/* Section Instructions - Additional Styles */
.pp-instruction {
  margin-top: 8px;
  margin-bottom: 16px;
}

.pp-instruction-list {
  margin-left: 20px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Helper Row */
.pp-helper td {
  padding: 8px 0;
}



/* Age Proof Section */
.age-intro {
  margin-bottom: 12px;
}

#age-proof-dynamic {
  margin-top: 16px;
}

/* Passport & Driving License Images */
#age-proof-dynamic .image-container {
  margin: 12px 0;
  width: 100% !important;
}

#age-proof-dynamic img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  padding: 6px;
  border-radius: 4px;
}

#age-proof-dynamic label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}



#age-proof-dynamic ul {
  margin: 12px 0;
  padding-left: 24px;
}

#age-proof-dynamic ul li {
  margin-bottom: 8px;
}

/* Image Container Spacing */
#age-proof-dynamic>div {
  margin: 12px 0;
}

/* Custom Buttons */
#customPreviousBtn {
  margin-right: 12px;
}

/* ==========================================
   
PAGE 3 UPLOAD PHOTO

========================================== */

/* Further Information page only */
.further-info-column hr {
  display: none;
}

/* Further Information buttons only */
.further-info-btn:hover,
.further-info-btn:focus,
.further-info-btn:active,
.further-info-btn:visited {
  color: #fff;
  background-color: #0a1c5c;
}

.further-info-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  min-height: auto;
  padding: 8px;
}

.further-info-container {
  display: flex;
  flex-wrap: wrap;
}

.further-info-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 16px;
  margin: 60px 0px;
}

.further-info-title {
  text-align: left;
}

.further-info-divider {
  border: none;
  height: 2px;
  background-color: white;
  margin-bottom: 20px;
}

.further-info-content {
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.further-info-link {
  text-decoration: none;
  font-size: 16px;
}

.further-info-actions {
  margin-top: 30px;
  display: flex;
  gap: 12px;
}

/* Card container */
.pass-photo-container {
  max-width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 36px 28px;
  /* merged padding rules */
  margin-bottom: 28px;
  border: 1px solid #e3e7ef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Description */
.pass-photo-container .description {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
}

/* Upload section */
.pass-photo-container .upload-section {
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #cfd8e3;
}

/* File input */
.pass-photo-container .upload-section input[type="file"] {
  width: 100%;
  margin-top: 5px;
  background-color: unset;
}

/* Native Choose File button border */
.pass-photo-container .upload-section input[type="file"]::file-selector-button {
  border: 1px solid #0a1c5c;
  border-radius: 6px;
  padding: 6px 12px;
  background: #ffffff;
  color: #0a1c5c;
}

/* Required asterisk */
.Page3required::after {
  content: " *";
  color: red;
}

/* Tips box */
.pass-photo-container .tips-box {
  border: 2px solid #4a90e2;
  background: #ffffff;
  padding: 20px;
  margin-top: 20px;
}

/* Image guidance grid */
.pass-photo-container .image-guidance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 20px;
  text-align: center;
  font-size: 10px;
  align-items: stretch;
}

.pass-photo-container .guidance-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  text-align: center;
}

.pass-photo-container .guidance-item img {
  margin-top: auto;
  width: 100%;
  max-width: 180px;
  height: auto;
  align-self: center;
}

/* Spinner */
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #ddd;
  border-top: 5px solid #0a1c5c;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .pass-photo-container h2 {
    font-size: 20px;
  }

  .pass-photo-container .tips-box ul {
    padding-left: 15px;
  }

  .pass-photo-container .navigation-buttons {
    flex-direction: column;
  }
}

/* Prev / Next buttons spacing */
.pass-photo-container #prevLink,
.pass-photo-container #nextLink {
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 500;
}

/* =========================================================
   Page 4 Data Usage
========================================================= */

.Page4DataUsage .data-usage-text {
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  margin-top: 12px;
}

.Page4DataUsage .privacy-link,
.Page4DataUsage .terms-link {
  text-decoration: none;
  font-size: 14px;
  color: #0a1c5c;
  /* optional styling */
}

.Page4DataUsage .button-row {
  margin-top: 30px;
  display: flex;
  gap: 12px;
}

.Page4DataUsage .btn.button1,
.Page4DataUsage .btn.button2 {
  text-decoration: none;
}

/* Card wrapper for Further Information page */
.Page4DataUsage .col-lg-12.columnBlockLayout {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 36px 28px !important;
  margin-bottom: 28px;
  border: 1px solid #e3e7ef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}



/* Links */
.Page4DataUsage .privacy-link,
.Page4DataUsage .terms-link {
  color: #0a1c5c;
  font-weight: 600;
  text-decoration: underline;
}

.Page4DataUsage .privacy-link:hover,
.Page4DataUsage .terms-link:hover {
  text-decoration: none;
}



/* Buttons styling consistent with other cards */
.Page4DataUsage .button-row .btn {
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 500;
}

/* =========================================================
   Page 5 Customer Desk Collection
========================================================= */
.Page5CustomerDeskCollection .tab-title {
  display: none;
}

.Page5CustomerDeskCollection .tab-column {
  border: none !important;
}

.Page5CustomerDeskCollection .crmEntityFormView label {
  background: #ffffff !important
}

/* Required star */
.Page5CustomerDeskCollection .radio-group legend span {
  color: red;
  position: relative;
}


/* Radio labels */
.Page5CustomerDeskCollection .radio-option {
  margin-right: 16px;
  font-size: 14px;
}

.Page5CustomerDeskCollection .radio-option input[type="radio"] {
  transform: scale(1.3);
  margin-right: 6px;
}

/* Customer desk form spacing + default hidden */
.Page5CustomerDeskCollection #customerDeskForm {
  display: none;
  margin-top: 10px;
  margin-left: 0 !important;
}

/* Align entity form content with the top text */
.Page5CustomerDeskCollection #customerDeskForm .crmEntityFormView,
.Page5CustomerDeskCollection #customerDeskForm .entity-form,
.Page5CustomerDeskCollection #customerDeskForm table.section {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border: none !important;
}

/* Remove extra vertical space inside the form */
.Page5CustomerDeskCollection #customerDeskForm fieldset,
.Page5CustomerDeskCollection #customerDeskForm table,
.Page5CustomerDeskCollection #customerDeskForm tbody,
.Page5CustomerDeskCollection #customerDeskForm tr,
.Page5CustomerDeskCollection #customerDeskForm td {
  margin: 0 !important;
  padding: 0 !important;
}

/* Button row layout */
.Page5CustomerDeskCollection .button-row {
  margin-top: 24px;
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
}

/* Remove underline from buttons */
.Page5CustomerDeskCollection .button-row a {
  text-decoration: none;
}

/* Remove the entire submit button container */
.Page5CustomerDeskCollection .crmEntityFormView .actions {
  display: none !important;
}

/* Remove table layout spacing and borders */
.Page5CustomerDeskCollection .crmEntityFormView table.section {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
}

/* Remove empty rows and zero-cell padding */
.Page5CustomerDeskCollection .crmEntityFormView .zero-cell {
  display: none !important;
}

/* Remove tab title and extra spacing */
.Page5CustomerDeskCollection .crmEntityFormView .tab-title {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove fieldset spacing */
.Page5CustomerDeskCollection .crmEntityFormView fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Remove outer container spacing */
.Page5CustomerDeskCollection .crmEntityFormView {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Button hover states */
.Page5CustomerDeskCollection .btn.button1:hover,
.Page5CustomerDeskCollection .btn.button1:focus,
.Page5CustomerDeskCollection .btn.button1:active,
.Page5CustomerDeskCollection .btn.button1:visited {
  color: #fff;
  background-color: #0a1c5c;
}


/* Scope only to Customer Desk Collection page */
.Page5CustomerDeskCollection fieldset[aria-label="Customer Service Desk"] {
  background: #fff;
}

/* Dropdown styling */
.Page5CustomerDeskCollection select#symca_customerservicedesk {
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #0a1c5c;
  font-size: 14px;
  background-color: #ffffff;
}


/* Remove weird table spacing around the field */
.Page5CustomerDeskCollection .lookup.form-control-cell {
  padding: 0 !important;
}

/* Hide empty spacer cells */
.Page5CustomerDeskCollection .zero-cell {
  display: none;
}

/* Remove table look for this field only */
.Page5CustomerDeskCollection fieldset[aria-label="Customer Service Desk"] table.section {
  width: 100%;
  border-collapse: collapse;
}


/* Card wrapper for Customer Desk Collection */
.Page5CustomerDeskCollection .col-lg-12.columnBlockLayout {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 36px 28px !important;
  margin-bottom: 28px;
}


/* Buttons style */
.Page5CustomerDeskCollection .button-row .btn {
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 500;
}

/* Add a clear dropdown arrow + hover affordance */
.Page5CustomerDeskCollection select#symca_customerservicedesk {
  appearance: none;
  /* remove native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #0a1c5c 50%),
    linear-gradient(135deg, #0a1c5c 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
  /* room for arrow */
}


/*==========================

REPORT SOMETHING (SUBMIT CASE)

============================*/

/* Hide OOB entity form */
.submit-case-wrapper #EntityFormPanel {
  display: none !important;
}

/* Page wrapper (replaces inline flex styles) */
.submit-case-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
}

/* Inner container (replaces padding:0) */
.submit-case-wrapper .submit-case-container {
  padding: 0;
}

/* Column layout (replaces flex-grow & min-width) */
.submit-case-wrapper .submit-case-column {
  flex-grow: 1;
  min-width: 250px;
}

/* Wrapper */
/* .submit-case-wrapper #case-ui {
    max-width: 900px;
    margin: 0 auto;
  
} */

/* Multi-step Lists */
.submit-case-wrapper .custom-list {
  width: 100%;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 25px;
}

.submit-case-wrapper .custom-row {
  padding: 18px;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #0a1c5c;
  cursor: pointer;
  transition: 0.2s;
}

.submit-case-wrapper .custom-row:hover {
  background: #a9c0fa;
}

/* Breadcrumb */
.breadcrumb-bar {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 5px;
  color: #0a1c5c;
  margin-bottom: 20px;
}

/* Back button */
.submit-case-wrapper .back-btn {
  background: #0a1c5c;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

.submit-case-wrapper .back-btn:hover {
  background: #00264d;
}

/* Optional fields section */
.submit-case-wrapper .optional-section {
  display: none;
  margin-top: 25px;
  padding: 15px 0;
}

/* Step headings */
.submit-case-wrapper .step-header {
  margin: 10px 0 15px 0;
}

/* Tell us more */
.submit-case-wrapper #tellUsMoreSection {
  display: none;
}

/* Final submit */
.submit-case-wrapper #submitButtonFinal {
  display: none;
  background: #0a1c5c;
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  border: none;
  margin-top: 20px;
  width: 100%;
  font-size: 16px;
}

/* Disabled visual */
.submit-case-wrapper #submitButtonFinal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-case-wrapper .custom-list,
.submit-case-wrapper .optional-section,
.submit-case-wrapper #tellUsMoreSection {
  animation: fadeIn 0.3s ease;
}

.submit-case-wrapper #tellUsMoreSection {
  margin-top: 10px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional fields section must behave like a table */
.submit-case-wrapper #optionalFields {
  width: 100% !important;
  display: table !important;
  border-collapse: collapse !important;
}

.submit-case-wrapper #optionalFields tr {
  display: table-row !important;
}


.submit-case-wrapper #submitButtonFinal:disabled {
  background: #9bb3c9 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.submit-case-wrapper .tellUsMoreSection p {
  font-size: 16px;
  font-weight: 900;
}

.submit-case-wrapper .step-block {
  width: 100%;
  background: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  padding: 20px;
}

.submit-case-wrapper .step-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0px !important;
  color: #0a1c5c;
}

/* Border container */
.submit-case-wrapper .bordered-block {
  border: 2px solid #0a1c5c;
  border-radius: 8px;
  background: #ffffff;
  padding: 0;
  overflow: hidden;
}



/* Description under headings */
.submit-case-wrapper .step-desc {
  font-size: 15px;
  color: #333333;
  margin-top: -5px;
  margin-bottom: 15px;
}

/* Step container spacing */
.submit-case-wrapper .step-container {
  margin-bottom: 25px;
}

.submit-case-wrapper .step-header {
  color: #0a1c5c;
  padding-bottom: 6px;
  text-align: center;
}


/* Blue header block */
.submit-case-wrapper .blue-header {
  background: #0a1c5c;
  color: white;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px 6px 0 0;
}

/* Back button inside blue header */
.submit-case-wrapper .blue-header .back-btn {
  background: white;
  color: #0a1c5c;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 14px;
}

.submit-case-wrapper .blue-header .back-btn:hover {
  background: #00244d;
  color: white;
}

.submit-case-wrapper .breadcrumb-text {
  font-size: 21px;
  color: white;
  padding-left: 10px;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  width: unset;
}

/* Fix inside blue panel / optional area */
.submit-case-wrapper #optionalFields .input-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce spacing between label and input */
.submit-case-wrapper #optionalFields label {
  margin-bottom: 4px !important;
}

.submit-case-wrapper .privacy-note {
  font-size: 14px !important;
  color: #333;
  margin-top: 10px;
  padding: 10px 0;
  line-height: 1.4;
}

.submit-case-wrapper #privacyNotice {
  font-size: 14px !important;

}


.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #0a1c5c;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.step-container,
.step-block {
  animation: fadeStep 0.3s ease;
}

@keyframes fadeStep {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.submit-case-wrapper .columnBlockLayout {
  max-width: 100% !important;
}


.submit-case-wrapper .validators {
  display: none !important;
}


.submit-case-wrapper .trail-pill {
  padding: 6px 12px;
  border: 2px solid #0a1c5c;
  border-radius: 6px;
  font-weight: 600;
  background: #fff;
}

.submit-case-wrapper .trail-sep {
  padding: 6px 4px;
  font-weight: bold;
}

.submit-case-wrapper .category-trail {
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.submit-case-wrapper .category-trail .trail-pill {
  border: 1px solid #0a1c5c;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: #0a1c5c;
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  padding: 8px 14px;
  margin-bottom: 5px;

  flex: 0 0 auto;
}

.submit-case-wrapper #tellUsMoreSection p {
  font-size: 16px !important;
}



/* Privacy information container */
.submit-case-wrapper .privacy-box {
  padding: 14px 16px;
  background: #f5f7fb;
}

/* Privacy text style */
.submit-case-wrapper .privacy-box .privacy-text {
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  margin: 0;
}

/* Privacy link */
.submit-case-wrapper .privacy-box a {
  color: #0a1c5c;
  font-weight: 600;
  text-decoration: underline;
}

.submit-case-wrapper .privacy-box a:hover {
  text-decoration: none;
}

.submit-case-wrapper #tellUsMoreSection>p:first-of-type {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px;
  font-weight: 900;
  color: black !important;
  padding-left: 15px !important;
}

.submit-case-wrapper .text-muted {
  display: none;
}

.submit-case-wrapper .required {
  color: red;
  font-weight: bold;
}


#symca_dateandtime_datepicker_description {
  pointer-events: none;
  /* Disables interaction */
}

/* Initially hidden elements */
.submit-case-wrapper #categoryTrail,
.submit-case-wrapper #topBar,
.submit-case-wrapper #categoryList,
.submit-case-wrapper #subCategoryList,
.submit-case-wrapper #step4Wrapper,
.submit-case-wrapper #tellUsMoreSection,
.submit-case-wrapper #submitButtonFinal,
.submit-case-wrapper #loadingOverlay {
  display: none;
}




/*======================

PAGE 7 BILLING DETAILS 

=============================*/


.symca-page-container {
  width: 100%;
  padding: 20px;
}

.symca-page-container h2 {
  text-align: left;
}

.symca-pag-description {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
}

.page7required::after {
  content: " *";
  color: red;
}

.tips-box {
  border: 2px solid #4a90e2;
  background: #ffffff;
  padding: 20px;
  margin-top: 20px;
}

/* Mobile Optimization */
@media (max-width: 600px) {
  h2 {
    font-size: 20px;
  }

  .tips-box ul {
    padding-left: 15px;
  }

  .navigation-buttons {
    flex-direction: column;
  }
}

.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #ddd;
  border-top: 5px solid #0a1c5c;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Revivew and Move */
.message {
  font-size: 0.85em;
  margin-bottom: 8px;
  display: block;
  height: 18px;
  font-weight: 600;
}

.message.alert {
  color: rgb(10, 163, 209);
}

.message.error {
  color: red;
}

.message.success {
  color: green;
}

span:focus {
  outline: none;
}

span:focus-visible {
  outline: none;
}

.symca-form-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 30px;
}

.symca-form-section {
  margin-bottom: 30px;
}

.symca-form-section h3 {
  margin-bottom: 15px;
  font-size: 20px;
}

.symca-form-columns {
  width: 90%;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-row label {
  font-weight: 600;
  font-size: 14px;
  text-align: left;
}

.form-row input {
  height: 40px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 8px 10px;
}

.summary-box {
  background: #ffffff;
  border-radius: 4px;
  padding: 15px;
}

.summary-row,
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-row {
  margin-bottom: 10px;
}

.summary-total {
  margin-top: 10px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .symca-form-layout {
    grid-template-columns: 1fr;
  }
}


#threeDSMountPoint {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  outline: none;
}

#threeDSMountPointOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Transparent dark background */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.symca-payment-warning {
  /* display: none; */
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #f0ad4e;
  background: #fff8e5;
  font-size: 14px;
  width: 100%;
}

/*================================

Personal Details 

===========================*/

.personaldetails .tab-column,
.personaldetails .crmEntityFormView,
.personaldetails .entitylist,
.personaldetails .modal-content,
.personaldetails .popover-content,
.personaldetails .list-group-item,
.personaldetails .card-body {
  background-color: #dfe3ec !important;
  border: 1px solid #dfe3ec !important;
}

.personaldetails .crmEntityFormView label {
  background-color: #dfe3ec !important;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-block;
}


/* readonly styling */
.personaldetails .pp-readonly,
.personaldetails input.form-control[readonly],
.personaldetails select.form-control[disabled] {
  background-color: #f2f4f7 !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  border-color: #d1d5db !important;
}

/* prevent focus highlight */
.personaldetails input.form-control[readonly]:focus,
.personaldetails select.form-control[disabled]:focus {
  box-shadow: none !important;
  outline: none !important;
}


.personaldetails .pp-field-error {
  color: #b00020;
  font-size: 13px;
  margin-top: 4px;
}

.personaldetails .pp-invalid {
  border-color: #b00020 !important;
  background-color: #fff5f5 !important;
}

.personaldetails .pp-submit-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.personaldetails .columnBlockLayout>h2 {
  text-align: left !important;
}


.personaldetails .crmEntityFormView .tab-title {
  border-bottom: none !important;
}


/*=====================

SUPPORT CASES READONLY 

=======================*/

/* ---------------------------------------------
   SUPPORT CASE READONLY
----------------------------------------------*/
/* ---------------------------------------------
   CUSTOM CASE DETAILS WRAPPER
----------------------------------------------*/
.case-details-wrapper {
  background: white;
  padding: 40px;
  border-radius: 12px;
  max-width: 990px;
  margin: 0px auto;
}

/* Back link (optional if needed) */
.cd-back-link {
  font-size: 14px;
  color: #0a1c5c;
  text-decoration: none;
  margin-bottom: 15px;
  display: inline-block;
}

/* Main Header */
.case-details-header {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #0a1c5c;
}

/* ---------------------------------------------
   TITLE + STATUS ROW (TOP BAR)
----------------------------------------------*/
.cd-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.cd-title {
  font-size: 18px;
  font-weight: 600;
  color: #0a1c5c;
  max-width: 70%;
}

/* ---------------------------------------------
   STATUS PILLS
----------------------------------------------*/
.supportcasereadonly .pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  min-width: 80px;
  text-align: center;
}

.supportcasereadonly .pill-open {
  background: #E8F7ED;
  color: #0A8043;
}

.supportcasereadonly .pill-resolved {
  background: #E8F0FF;
  color: #2456D0;
}

.supportcasereadonly .pill-cancelled {
  background: #FFECEC;
  color: #C62828;
}

/* ---------------------------------------------
   GRID LAYOUT (2-COLUMN)
----------------------------------------------*/
.case-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 60px;
}

.cd-item label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: black;
}

.cd-item div {
  margin-top: 4px;
  font-size: 15px;
  color: #111827;
  font-weight: 500;
}

/* Full width row */
.cd-full {
  grid-column: 1 / 3;
}

/* ---------------------------------------------
   BACK BUTTON
----------------------------------------------*/
/* ---------------------------------------------
   BACK BUTTON (FINAL FIXED VERSION)
----------------------------------------------*/
.supportcasereadonly .back-btn {
  display: inline-block;
  margin-top: 50px;
  /* Adds clear spacing from fields */
  padding: 12px 34px;
  background: #0a1c5c;
  color: #ffffff;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  /* For <a> button */
}

/* Hover */
.supportcasereadonly .back-btn:hover {
  opacity: 0.9;
  color: white !important;
}


/* ---------------------------------------------
   MOBILE RESPONSIVE
----------------------------------------------*/
@media (max-width: 768px) {
  .cd-status-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .btn-cancel-case {
    width: 100%;
    text-align: center;
  }

  .supportcasereadonly .back-btn {
    width: 100%;
    margin-top: 30px;
    padding: 15px;
    font-size: 16px;
    text-align: center;
    display: block;
  }

  .case-details-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cd-full {
    grid-column: 1 / 2;
  }

  .cd-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cd-title {
    max-width: 100%;
  }

  .case-details-wrapper {
    padding: 25px;
  }
}



/* Header Divider Line */
.cd-divider {
  width: 100%;
  height: 1px;
  background: #0a1c5c;
  /* Light grey line */
  margin: 20px 0 30px;
}


.cd-back-link {
  font-weight: bold
}


/* ---------------------------------------------
   ACTION BUTTONS (Cancel Case)
----------------------------------------------*/
.cd-actions {
  margin-top: 30px;
}

.btn-cancel-case {
  background: #c62828;
  /* Red cancel button */
  color: #ffffff;
  border: none;
  padding: 12px 34px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.btn-cancel-case:hover {
  opacity: 0.9;
}


/* ---------------------------------------------
   CANCEL CONFIRMATION MODAL
----------------------------------------------*/
.modal-overlay.supportcasereadonly {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}


.supportcasereadonly .modal-box {
  background: #ffffff;
  padding: 22px 26px;
  width: 420px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

/* Modal header */
.supportcasereadonly .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.supportcasereadonly .modal-header h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: #0a1c5c;
}

.supportcasereadonly .modal-close {
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #0a1c5c;
}

/* Modal text */
.supportcasereadonly .modal-box p {
  font-size: 14px;
  color: #111827;
  margin: 10px 0 18px;
}

/* Modal buttons */
.supportcasereadonly .modal-actions {
  display: flex;
  gap: 10px;
}

/* Primary confirm button */
.supportcasereadonly .btn-danger {
  background: #0a1c5c;
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

/* Secondary cancel button */
.btn-secondary {
  background: #e5e7eb;
  color: #111827;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #d1d5db;
}

/* Hidden utility */
.hidden {
  display: none !important;
}


/* ---------------------------------------------
   SUCCESS MESSAGE AFTER CANCELLATION
----------------------------------------------*/
.alert-success {
  background: #e8f7ed;
  border: 1px solid #0a8043;
  color: #0a8043;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Right-side container for pill + cancel button */
.cd-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* space between pill and button */
}

/* Keep header row layout */
.cd-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Make cancel button match design */
.btn-cancel-case {
  background: #c62828;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  height: 28px;
  /* aligns with pill height */
}

.btn-cancel-case:hover {
  opacity: 0.9;
}


/* ---------------------------------------------
   LOADING OVERLAY
----------------------------------------------*/
#loading-overlay-casereadonly {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.loading-box .casereadonly {
  text-align: center;
  color: #0a1c5c;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* horizontal center */
  justify-content: center;
  /* vertical center */
}

/* Simple spinner */
.spinner .casereadonly {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #0a1c5c;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

.supportcasereadonly #EntityFormPanel {
  display: none;
}


/*===================

ACCESIBILITY FIXES 

======================*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


div.text-muted[aria-hidden="true"] {
  color: transparent !important;
  display: none !important;
}

/*  — email link contrast fix */
a.text-primary[href^="mailto:"] {
  color: #0057b8 !important;
}

a.text-primary[href^="mailto:"]:hover,
a.text-primary[href^="mailto:"]:focus {
  color: #003d82 !important;
  text-decoration: underline;
}