/* Ensure html/body cover full viewport */
html,
body {
  height: 100%;
  margin: 0;
}

/* Helvetica Neue Font Family Setup */

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueUltraLight.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueUltraLightItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueThin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueThinItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueMediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueHeavyItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/HelveticaNeueBlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}

/* Full‐screen background container */
.bg-fullscreen {
  background-image: url("../img/images/bg.jpg");
  background-size: cover;
  background-position: 100% 80%;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.verification-page {
  background-image: url("../img/images/varified-bg.jpg");
  background-position: center center;
}

/* Logo styling */
.logo {
  text-align: center;
  margin-bottom: 40px;
}
.logo img {
  max-width: 100%;
  width: 250px;
  height: auto;
}

/* Main content area spacing */
.content {
  margin-top: 50px;
}

.verify-btn:hover {
  background-color: #8f3500 !important;
}

/* Mobile heading row extra styling if needed */
.mobile-heading h2 {
  margin-bottom: 10px;
}
.mobile-heading p small {
  font-size: 21px;
  font-weight: 300;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Heading styling */
.bg-fullscreen h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  color: white;
  font-size: 67px;
  margin-bottom: 10px;
  line-height: 67px;
}

/* Small text styling inside <p> */

.bg-fullscreen p {
  margin-bottom: 50px;
}

.bg-fullscreen p small {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: white;
  font-size: 16px;
  letter-spacing: 0.8px;
}

/* Label above input */
.order-number-label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  margin-bottom: 8px;
}
.order-number-label .required-star {
  color: red;
}

/* Input styling */
.order-input {
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  border-radius: 25px;
  padding: 12px 20px;
  font-size: 16px;
}

/* Button styling: full width, custom colour, rounded */
.verify-btn {
  display: block !important;
  width: 100% !important;
  background-color: #e45500 !important;
  border: none !important;
  color: white !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  border-radius: 15px !important;
  padding: 8px 0 !important;
  margin-top: 15px !important;
  height: 46px;
}

/* Hover/focus states for button */
.verify-btn:hover,
.verify-btn:focus {
  background-color: #c94b00;
  color: white;
}

/* Rounded corners generic for form‐control and btn‐primary */
.form-control {
  border-radius: 25px;
  background-color: #e4ecf0 !important;
}
.btn-primary {
  border-radius: 25px;
  padding-left: 30px;
  padding-right: 30px;
}

/* Glass card */
.glass-box {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  overflow: hidden;
  width: 100%;
  max-width: 440px; /* increase width */
  padding: 0;
  margin-top: 10%;
}

/* Body (content) inside the glass card — keep padding but let table sit flush to bottom */
.glass-body {
  padding: 0px 26px 20px 26px;
  text-align: left;
}

.glass-box h2 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 10px;
}

.glass-box small {
  font-size: 14px;
  display: block;
  margin-bottom: 25px;
  opacity: 0.9;
}

.order-info p {
  font-size: 16px;
  margin: 5px 0;
}

/* Table wrapper — ensures the table sits flush to the bottom of the glass-box */
.table-wrap {
  background: transparent;
}

/* single, shared border for rows & columns */
.lens-table {
  width: 100%;
  border-collapse: collapse; /* <-- collapse borders so they overlap into one */
  border-spacing: 0; /* safe extra */
  background: rgba(255, 255, 255, 0.03);
  /* outer border that encloses the whole table */
  border: 1px solid #c2c2c2;
  /* rounded bottom corners to match the glass-box */
  border-radius: 0 0 20px 20px;
  table-layout: fixed;
  text-align: center;
}

/* single border for every cell (these will collapse into 1px shared lines) */
.lens-table thead th,
.lens-table tbody td {
  border: 1px solid #c2c2c2; /* single border for both row & column lines */
  padding: 12px;
  text-align: center;
  vertical-align: middle;
  background: transparent;
  color: #fff;
}

/* header style (keeps a stronger bottom border if needed) */
.lens-table thead th {
  font-weight: 600;
}

/* Round the bottom corners on the actual cells so they visually match the table radius */
.lens-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
}
.lens-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}

/* If you want header top corners rounded when table is alone */
.lens-table thead th:first-child {
  /* optional if you ever want top-left rounded */
}
.lens-table thead th:last-child {
  /* optional if you ever want top-right rounded */
}

/* Small responsive tweak so table doesn't overflow on tiny screens */
@media (max-width: 480px) {
  .lens-table thead th,
  .lens-table tbody td {
    padding: 10px;
    font-size: 14px;
  }
}

/* Responsive tweaks for small screens */
@media (max-width: 767px) {
  .logo img {
    width: 180px;
  }

  .mobilie-no-margin {
    margin-top: -65px;
  }

  .text-center-xs {
    text-align: left;
    margin-top: -30px;
  }
  .content {
    text-align: center;
    padding: 0 15px;
  }
  h2 {
    font-size: 48px;
  }
  .order-number-label {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .verify-btn {
    font-size: 21px;
    padding: 12px 0;
  }

  .visible-xs {
    display: block !important;
    text-align: left;
    font-size: 30px;
    margin: 0;
    line-height: 8px;
  }

  .visible-xs small {
    font-size: 14px;
  }

  .mobile-no-margin {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .bg-fullscreen h2 {
    font-size: 24px !important;
    line-height: 0px !important;
  }

  .bg-fullscreen p small {
    font-size: 13px;
  }

  .glass-box-container {
    display: flex;
    justify-content: center;
  }
  .glass-box-content {
    text-align: left;
    width: 100%;
  }

  .glass-box .success-icon {
    display: block;
    margin: 0 auto 25px auto;
    float: none;
  }

  .glass-box {
    margin-top: 75%;
  }

  .verification-page {
    background: url(../img/images/verified-bg-mobile.jpg) no-repeat;
    background-size: 100%;
    background-color: #4a6777;
    background-position: top center;
  }

  .glass-box-container {
    justify-content: center;
    padding: 20px;
  }
  .glass-header {
    flex-direction: column;
    align-items: center;
  }
  .success-icon {
    margin: 0 0 10px 0; /* center spacing above heading */
  }
  .glass-title {
    text-align: left; /* keep heading left-aligned if desired */
    width: 100%;
  }

  .tc {
    font-size: 12px !important;
  }

  .glass-box small {
    font-size: 12px !important;
    margin-bottom: 25px;
    margin-top: 15px !important;
  }

  .footer-verify .col-md-6 {
    margin: 0 !important;
  }

  .verification-page {
    display: inherit !important;
  }

  .bg-fullscreen p {
    margin: 0;
  }

  .bg-fullscreen-home {
    background-size: 540%;
    background-position: 0px 95%;
  }

  .content {
    margin-top: 0px;
  }

  .footer-verify {
    padding: 15px 0 !important;
  }

  .verify-btn:hover {
    background-color: #959595 !important;
  }
}

.tc {
  color: #fff;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  .glass-box-container {
    display: flex;
    justify-content: flex-end; /* push glass box to right */
  }
  .glass-box-content {
    text-align: left;
  }
}

/* Table always centered */
.table-wrap {
  text-align: center;
  margin-top: 15px;
}
.lens-table {
  margin: 0 auto;
}

/* Header container for icon + heading */
.glass-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* Icon sizing */
.success-icon {
  width: 35px;
  height: 35px;
}

/* Heading text */
.glass-title h2 {
  font-size: 54px;
  font-weight: 600;
  margin: 0;
  line-height: 54px;
  margin-bottom: 10px;
}
.glass-title small {
  font-size: 16px;
  display: block;
  opacity: 0.9;
}

.glass-title {
  padding: 0px 26px 0px 26px;
}

.success-icon-row {
  padding: 20px 26px 0px 26px;
}

.input-error {
  border: 1px solid #ff0000 !important;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  position: absolute;
  bottom: -18px;
  right: 0;
  text-align: right;
}

.form-group.position-relative {
  position: relative;
}

.form-group.position-relative {
  position: relative;
  padding-bottom: 24px; /* room for the error text under input */
}

.input-error {
  border: 1px solid #ff0000 !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.04);
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  position: absolute;
  bottom: -2px;
  right: 0;
  text-align: right;
  display: none; /* shown by JS or server */
}

/* small tweak for mobile if needed */
@media (max-width: 480px) {
  .form-group.position-relative {
    padding-bottom: 21px;
  }
  .error-message {
    bottom: -6px;
  }
}

#order_number {
  border-radius: 25px !important;
}

.custom-gray {
  color: #d9d9d9 !important;
}

.order-info p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.verification-page {
  min-height: 100vh; /* Full screen height */
  display: flex; /* Enable flex layout */
  flex-direction: column; /* Stack children vertically */
  justify-content: space-between; /* Push footer to bottom */
}

.verification-page .container {
  flex: 1; /* Let content area expand to fill space */
}

.footer-verify {
  padding: 0;
  background-color: transparent; /* Adjust if you want a colored footer */
}

.footer-verify p {
  margin-bottom: 0 !important;
}

.verification-page .footer-verify p {
  color: #ffffff !important;
}

.tc a,
.tc a:visited,
.tc a:hover,
.tc a:active {
  color: #fff;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: underline;
}

.btn-gray {
  background-color: #959595 !important;
}

.txt-decoration-none a {
  text-decoration: none !important;
}

@media (hover: none) {
  button:hover {
    background-color: #959595 !important; /* or your default color */
  }
}