@font-face {
    font-family: "Montserrat-Light";
    src: url('assets/fonts/Montserrat-Light.ttf');
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-Regular";
    src: url('assets/fonts/Montserrat-Regular.ttf');
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-Medium";
    src: url('assets/fonts/Montserrat-Medium.ttf');
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-Bold";
    src: url('assets/fonts/Montserrat-Bold.ttf');
    font-style: normal;
}

h1 {
    font-family: "Montserrat-Bold";
    color: #282828 !important;
    font-size: calc(1.375rem + 1.5vw);
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
    font-weight: inherit !important;
    text-transform: uppercase;
}

h2 {
    font-family: "Montserrat-Bold";
    color: #282828 !important;
    font-weight: 500 !important;
    font-size: calc(1.325rem + 0.9vw);
    text-transform: uppercase;
    padding-top: 10px;
    text-align: center;
    margin-bottom: 0px;
}

h3 {
    font-family: "Montserrat-Bold";
    color: #282828;
    font-weight: normal;
    font-size: calc(1.3rem + 0.6vw);
    text-align: center;
    padding-top: 10px;
    text-transform: uppercase;
}

h4 {
    font-family: "Montserrat-Medium";
    color: #282828;
    font-weight: 200;
    font-size: calc(1.275rem + 0.3vw);
    padding-top: 10px;
    text-align: center;
    margin-bottom: 0px;
}

h4 {
    font-family: "Montserrat-Medium";
    color: #282828;
    font-weight: 200;
    font-size: calc(1.275rem + 0.3vw);
    padding-top: 10px;
    text-align: center;
    margin-bottom: 0px;
}

p {
    font-family: "Montserrat-Regular";
    color: #282828;
    font-size: 1.1rem;
    padding-top: 0;
    text-align: center;
    margin-top: 0;
    text-transform: none;
    font-weight: 400;
}

/* Buttons */
.btn-primary {
    color: #ffffff;
    background-color: #009677 !important;
    width: 100%;
    font-size: 1.3em;
    margin-top: 20px;
    font-family: "Montserrat-Bold";
    text-transform: uppercase;
    outline: none;
    border: 0px none;
    border-radius: 15px;
    background-image: linear-gradient(270deg, #8DC63F 0%, rgb(80, 184, 72) 50%, rgb(0, 150, 119) 100%);
    min-height: 5vh;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:hover {
    background-color: #009677 !important;
    background-image: none;
    box-shadow: none !important;
    outline: none;
    color: #FFFFFF;
    border: 0px none;
    border-style: none !important;

    /* filter: brightness(110%); */
}

.btn-secondary {
    font-weight: bold;
    color: #50B848;
    width: 100%;
    font-size: 1.3em;
    margin-top: 1rem;
    padding: 10px 20px 10px 20px;
    font-family: "Montserrat-Regular";
    text-transform: uppercase;
    outline: none;
    border: 0px none;
    border-radius: 15px;
    background-color: #ffffff;
    line-height: 25px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    min-height: 5vh;
    margin-bottom: 1rem;
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:hover {
    color: #009677 !important;
    background-color: #ffffff !important;
    filter: brightness(90%);
    transform: scale(1.02);
}

.btn:active,
.btn:hover {
    box-shadow: none;
    border: none;
}

/* Form related */
.form-check {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

option {
    background-color: #ffffff;
    font-family: "Montserrat-Regular";
    color: #282828;
    font-size: 0.9rem;
}

select.form-control,
select.form-control:focus,
select.form-control:active {
    font-family: "Montserrat-Regular"!important;
    font-size: 0.9rem;
    -webkit-appearance: menulist;
    color: #282828;
    padding-bottom: 1.1vh;
    padding-top: 1.1vh;
    min-height: 4vh;
}

.form-control,
.form-control:focus,
.form-control:active {
    font-family: "Montserrat-Regular"!important;
    padding-bottom: 0.8vh;
    margin: 0px;
    color: #282828;
    border-radius: 15px;
    background-color: #FFFFFF;
    padding-top: 0.8vh;
    min-height: 4vh;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border: 2px solid #e3e3e3;
    font-size: 0.9em;
}

.form-check-input,
.form-check-input:focus {
    background-color: #ffffff;
    outline: 0;
    border-radius: 5px !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-left: 1 none;
    border-right: 1 none;
    border-bottom: 1 none;
    border-top: 1px solid #e3e3e3;
    border-style: solid;
}

.form-check-input:checked {
    background-color: #282828;
    border: 2px solid #282828;
    box-shadow: none;
}

input::-webkit-calendar-picker-indicator {
    display: none !important;
}

.input-date {
    color: #282828;
    font-size: 1rem;
    line-height: 2rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
    border: 2px solid #282828;
    border-radius: none !important;
    background: transparent;
}

.input-date:focus-visible {
    outline: none;
}

label {
    color: #282828;
    padding: 10px 0px 5px;
    font-family: "Montserrat-Regular";
    font-size: 1.1em;
    text-transform: none;
    font-weight: inherit;
}

.form {
    display: block;
    margin-top: 0em;
}

.form-fill-out {
    padding-left: 5px;
    padding-right: 5px;
}

/* file upload input */
#fileUpload {
    text-transform: lowercase;
    font-family: "Montserrat-Regular"!important;
    border: 2px solid #282828;
    width: 100%;
    min-height: 5vh;
}

::file-selector-button {
    font-family: "Montserrat-Regular"!important;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 0.8vh 2vw;
    border-radius: 0px;
    background-color: #282828;
    height: 100%;
}

/* placeholder text */
.form-control::placeholder,
.input-date::placeholder {
    font-family: "Montserrat-Regular" !important;
    font-weight: normal;
    color: #D3D3D3;
    opacity: 1;
    font-size: 0.9em;
}

::placeholder {
    font-family: "Montserrat-Regular" !important;
    font-weight: normal;
    color: #D3D3D3;
}

input[type="text"].form-control::-webkit-input-placeholder,
input[type="tel"].input-date::-webkit-input-placeholder {
    font-family: "Montserrat-Regular" !important;
    font-weight: normal;
    color: #D3D3D3;
}

.aria-labelledby {
    color: #D3D3D3;
}

/* header */
.hero-desktop,
.hero-mobile {
    width: 100%;
}

.hero {
    display: block;
}

.om-ribbon {
    position: absolute;
    bottom: 0;
    z-index: 5;
    left: 1em;
    background-image: linear-gradient(1deg, rgb(141, 198, 63) 0%, rgb(80, 184, 72) 46%, rgb(0, 150, 119) 100%);
    height: 7em;
}

.om-ribbon img {
    width: 4em;
    padding: 15px 5px 5px;
}

.heading {
    background-image: url('assets/header-bg.jpg');
    background-position: right center;
    background-size: cover;
    min-height: 10vh;
    display: flex;
    align-items: center;
}

/* Footer section */
section.footer {
    background-color: #ffffff;
    padding-top: 20px;
    position: relative;
    z-index: 0;
}

/* XS mobile rules */
@media (min-width:0px) and (max-width:400px){
    .hero #desktop {
        visibility: hidden;
        display: none;
    }

    .hero #mobile {
        min-height: 150px;
        max-height: 250px;
    }

    .claim-type {
        border: 1px dashed currentColor;
        width: 75%;
        height: 2.5em !important;
        border-radius: 15px;
    }

    .circle-content {
        gap: 5px !important;
    }

    .claim-name-wrapper .claim-name,
    .payout {
        font-size: calc(0.8rem + 0.4vw) !important;
        font-family: "Montserrat-Bold";
    }

    .payout-wrapper p,
    .footer-area p {
        font-family: "Montserrat-Regular";
        color: #282828;
        font-size: 0.6rem !important;
    }

    .om-ribbon img {
        width: 2.5em !important;
    }

    .claim-pill, .circle-drop {
        font-size:13px !important;
    }
}

/* Mobile rules */
@media (min-width:400px) and (max-width:767px) {
    .hero #desktop {
        visibility: hidden;
        display: none;
    }

    .hero #mobile {
        min-height: 200px;
        max-height: 350px;
    }

    .om-ribbon img {
        width: 2.5em !important;
    }

    .claim-type {
        border: 1px dashed currentColor;
        width: 75%;
        height: 2.5em !important;
        border-radius: 15px;
    }

    .circle-content {
        gap: 5px !important;
    }

    .claim-name-wrapper .claim-name,
    .payout {
        font-size: calc(1rem + 0.5vw) !important;
        font-family: "Montserrat-Bold";
    }

    .payout-wrapper p,
    .footer-area p {
        font-family: "Montserrat-Regular";
        color: #282828;
        font-size: 0.8rem !important;
    }

    .body-content {
        min-height: 83vh!important;
    }
}

/* Desktop rules */
@media (min-width:768px) {
    .hero #mobile {
        visibility: hidden;
        display: none;
    }

    .hero #desktop {
        /*min-height: 450px;*/
        max-height: 550px;
        width: 100%;
    }

    .circle-drop {
        width: 15em !important;
        min-height: 15em !important;
    }
}

/* links */
a {
    color: #282828;
    text-decoration: none;
}

a:hover {
    color: #282828 !important;
}

a:hover,
a:focus,
a:visted,
a:active {
    color: #282828 !important;
}

/* general layout */
.body-content {
    min-height: 83vh;
    display: block;
    padding-bottom: 10vh;
    background-image: url('assets/bg-pattern-desktop.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

hr {
    margin: 1rem 0;
    color: inherit;
    opacity: 1;
    border-top-width: 2px;
    border-top-color: #CACACA;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    width: 100%;
}

.row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

body {
    background-color: #F2F2F2;
    min-height: 95vh;
}

/* drag and drop elements */
.drop-holder {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#left.drop-holder {
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.16);
    border-radius: 35px;
}

#right.drop-holder {
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
}

.circle-drop {
    display: flex;
    width: 10em;
    min-height: 10em;
    position: relative;
    z-index: 5;
}

#disability-claims.circle-drop {
    /* background-image: url('assets/game/orange-circle.svg'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#illness-claims.circle-drop {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* background-image: url('assets/game/blue-circle.svg'); */
}

#death-claims.circle-drop {
    /* background-image: url('assets/game/green-circle.svg'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.gradient-overlay {
    z-index: 10;
    inset: 0;
    position: absolute;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    opacity: 0.9;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: center;
}

#death-claims .gradient-overlay {
    background-image: linear-gradient(180deg, #8DC63F 0%, rgb(80, 184, 72) 50%, rgb(0, 150, 119) 100%);
}

#disability-claims .gradient-overlay {
    background-image: linear-gradient(0deg, #F37021 0%, #f37021 50%, #fff200 100%);
}

#illness-claims .gradient-overlay {
    background-image: linear-gradient(0deg, #00C0E8 0%, #00c0e8 30%, #8dc63f 100%);
}

.white-back {
    background-color: #ffffff;
    width: 100%;
    border-radius: 85px;
    margin: 10px;
}

.claim-type {
    border: 1px dashed currentColor;
    width: 75%;
    height: 3em;
    border-radius: 15px;
}

.payout-ratio {
    border: 1px dashed currentColor;
    width: 80%;
    height: 2em;
    border-radius: 20px;
}

#disability-claims .payout-ratio,
#disability-claims .claim-type {
    border: 1px dashed #F37021;
}

#illness-claims .payout-ratio,
#illness-claims .claim-type {
    border: 1px dashed #00D2FF;
}

#death-claims .payout-ratio,
#death-claims .claim-type {
    border: 1px dashed #109F81;
}

.circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.amount-text {
    font-weight: 800;
    font-size: calc(1.225rem + 0.8vw);
}

/* Color modifiers */
.text-orange {
    color: #F37021 !important;
}

.text-blue {
    color: #00D2FF !important;
}

.text-green {
    color: #109F81 !important;
}

.claim-name-wrapper,
.payout-wrapper {
    width: 80%;
    height: auto;
    border: 1px dashed #b8b8b8;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 4em;
}

.claim-name-wrapper .claim-name,
.payout {
    font-size: calc(1.125rem + 0.7vw);
    font-family: "Montserrat-Light";
    line-height: 1.2em;
}

.payout-wrapper p {
    font-family: "Montserrat-Regular";
    color: #282828;
    font-size: 1.1rem;
    padding-top: 0;
    text-align: center;
    margin-top: 0;
    text-transform: none;
    font-weight: inherit;
}

/* modal styling */
.modal {
    z-index: 1055 !important;

    /* Bootstrap default */
}

.modal-backdrop.show {
    z-index: 1050 !important;

    /* Bootstrap default */
}

.modal-title {
    font-family: "Montserrat-Light";
    text-transform: uppercase;
    line-height: 25px;
    padding: 0;

    /* color: #282828 */
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0.5em;
    border: none;
    columns: 2;
}

#howItWorksModal .gradient-slide,
#level2CompletedModal .gradient-slide,
#thankYouModal .gradient-slide,
#nailedItModal .gradient-slide {
    background: linear-gradient(226deg, rgb(141, 198, 63) 0%, rgb(80, 184, 72) 45%, rgb(0, 150, 119) 100%);
    border-radius: 0.5rem;
    border-width: 0;
    overflow: hidden;
    padding: 1em;
}

.info-icon:focus,
.info-icon:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Carousel indicators (dots) styling */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.5;
}

.carousel-indicators .active {
    opacity: 1;
}

.modal-content {
    border: none;
    padding: 1em;
}

.modal-body {
    padding: 0;
}

/* modal controls */
.carousel-control-prev {
    right: 3em;
    left: auto;
    bottom: 0;
}

.carousel-control-prev,
.carousel-control-next {
    display: flex;
    align-items: flex-end;
    top: auto;
}

.carousel-control-prev-icon {
    background-image: url('assets/general-icons/prev-arrow.svg');
    height: auto;
    min-height: 2em;
}

.carousel-control-next-icon {
    background-image: url('assets/general-icons/next-arrow.svg');
    min-height: 2em;
    height: auto;
}

#howItWorksModal .btn-close,
#thankYouModal .btn-close {
    background-image: url('assets/general-icons/close-white.svg');
    opacity: 1;
}

#howItWorksModal .btn-close,
#thankYouModal .btn-close:focus {
    box-shadow: none;
}

/********* Level 1 Drag & Drop *********/

/* Drop highlights */
.dz-eligible {
    outline: 3px dashed rgba(0,0,0,.28);
    outline-offset: 4px;
}
.dz-exact {
    outline: 3px solid #1a7f37;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(26,127,55,.18);
}
.dz-locked [data-role="draggable"] {
    pointer-events: none;
}
.drag-selected {
    box-shadow: 0 0 0 3px rgba(25,118,210,.35);
}

/* 2.5s flash feedback */
.flash-wrap {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    z-index: 9999; pointer-events: none; animation: fadeOut 2.5s ease forwards;
}
.flash-bubble {
    width: 120px; height: 120px; border-radius: 999px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.flash-bubble img { width: 48px; height: 48px; }
.flash-caption { font-size: .9rem; font-weight: 600; }
.flash-ok  { background: rgba(255,255,255,.98); }
.flash-ok  .flash-caption { color: #1a7f37; }
.flash-bad { background: #d92d20; }
.flash-bad .flash-caption { color: #fff; }

@keyframes fadeOut { 0%{opacity:1} 100%{opacity:0} }

/* Make droppable zones a sizing container and hide overflow */
[data-role="droppable"], [id^="droppable-"] {
    position: relative;
    overflow: hidden;
    /* Optional padding if you want a little breathing room inside circles */
    /* padding: 4px; */
}

/* Normalise placed content layout */
.dz-locked [data-role="draggable"],
.dz-locked [id^="draggable-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 1.1;
    word-break: break-word;
    white-space: normal;
    margin: 0;
    padding: 0 4px; /* small side padding helps long words */
}

/* If your draggable has inner text elements, keep them tight */
.dz-locked .claim-name,
.dz-locked .payout,
.dz-locked p {
    margin: 0;
}

  .levels-wrap {
      text-align: center;
  }

  .level-block {
      margin: 28px 0;
  }

  .level-stars {
      display: flex;
      justify-content: center;
      gap: 2px;
  }

  .level-stars img {
      width: 34px;
      height: 34px;
  }

  .level-title {
    margin: 0px 0px 18px 0;
        font-weight: 800;
        /* letter-spacing: .06em; */
        font-size: 21px;
  }

  .level-text {
      margin: 0;
  }

  .info-icon-text{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #adb5bd;
        color: #6c757d;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        margin: 0 4px;
    }

  .info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      /* border: 2px solid #adb5bd; */
      color: #6c757d;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      margin: 0 4px;
  }

  @media (min-width: 992px) {
      .level-block {
          margin: 32px 0;
      }
  }


.footer-text {
    font-size:15px;
}

/* --- PAGE WIDTH & COLUMN LAYOUT --- */
.body-content .container { max-width: 960px; }

/* Left green rail (unchanged look, tidier spacing) */
#left.drop-holder{
    background: linear-gradient(226deg, rgb(141, 198, 63) 0%, rgb(80, 184, 72) 45%, rgb(0, 150, 119) 100%) !important;
    border-radius: 0.5rem;
    border-width: 0;
    overflow: hidden;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 24px !important;
}

/* --- CIRCLES: exact sizing + transparent center + perfect centering --- */
/* Force a precise square with a transparent center ring image */
.circle-drop{
  position: relative !important;
  width: 240px !important;          /* desktop size to match comps */
  aspect-ratio: 1 / 1 !important;   /* keeps it a perfect circle */
  height: auto !important;          /* let aspect-ratio control the height */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important; /* show the whole ring, never cropped */
}

/* Use your ring images */
.ring-orange { background-image: url('{{ asset('assets/game/orange-circle.svg') }}') !important; }
.ring-blue   { background-image: url('{{ asset('assets/game/blue-circle.svg') }}') !important; }
.ring-green  { background-image: url('{{ asset('assets/game/green-circle.svg') }}') !important; }

/* Center the content INSIDE the ring */
.circle-content{
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr auto;     /* dashed box centered, amount at bottom */
  place-items: center !important;
  padding-bottom: 22px;             /* room for the amount */
  z-index: 2;
  pointer-events: none;             /* visuals only */
}

/* Dashed placeholder box (centered) */
.claim-name-wrapper{
  width: min(160px, 70%) !important;
  min-height: 64px !important;
  border: 1px dashed #b8b8b8 !important;
  border-radius: 20px !important;
  background: transparent !important;
  display: grid !important;
  place-items: center !important;
}

/* Your old CSS was inflating this; clamp it back down */
.claim-name{
  font-size: 1rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* Amount fixed to bottom-center inside the ring */
.amount-text{
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
}

/* Optional: slightly tighter ring size on smaller screens */
@media (max-width: 991.98px){
  .circle-drop{ width: 210px !important; }
}
@media (max-width: 575.98px){
  .circle-drop{ width: 190px !important; }
}

/* Much lighter “viewed” state */
.circle-drop.is-viewed .gradient-overlay {
    filter: grayscale(1) brightness(1.3) contrast(.9);
    /* lighter + a touch softer */
    opacity: .55;
    /* more see-through */
    transition: filter .2s ease, opacity .2s ease;
}

/* Optional: lighten the icon too */
.circle-drop.is-viewed .info-icon img {
    filter: grayscale(1) brightness(1.25);
}

/* Thank-you modal look & feel */
#thankYouModal .thankyou-card {
    border: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

#thankYouModal .modal-body {
    padding-left: 50px;
    padding-right: 50px;
}

#thankYouModal .btn-close {
    opacity: 1;
    /* visible on gradient */
}

#thankYouModal .thankyou-logo {
    width: 150px;
    height: auto;
}

/* White pill buttons */
.btn-pill-white {
    background: #fff;
    color: #1d3b2a;
    /* legible on white */
    border: 0;
    border-radius: 9999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: .8rem 1.25rem;
}

.btn-pill-white:hover {
    filter: brightness(.96);
}

#disabilityModalModalLabel {
    color: #009677 !important;
    line-height: 30px;
    font-size: 21px;
    font-weight: bold;
}

#illnessModalModalLabel {
    color: #009677 !important;
    line-height: 30px;
    font-size: 21px;
    font-weight: bold;
}

#deathModalModalLabel {
    color: #009677 !important;
    line-height: 30px;
    font-size: 21px;
    font-weight: bold;
}