:root{
    --teal: #0A3D91;
    --teal-dark: #0A3D91;
    --pink: #FF6A00;
    --pink-light: #fce7f3;
    --ink: #1f2937;
  }

  body{
    background: #eef2f5;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  /* ---------- Shared modal chrome ---------- */
  .onb-modal .modal-content{
    border-radius: 22px;
    border: none;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
  }

  .onb-modal .modal-body{
    padding: 2.5rem;
    position: relative;
  }

  .onb-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1f2937;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 5;
  }
  .onb-close:hover{ background:#000; }

  .onb-title{
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--ink);
    margin-bottom: 1.75rem;
  }

  /* ---------- Location modal ---------- */
  #locationModal .modal-body{

  background-image: url('../images/location-back.png');
    background-size: cover;
    background-position: center;
  }
  .loc-illustration{
    background: linear-gradient(135deg, #eafaf3 0%, #e6f1fb 100%);
    border-radius: 18px;
    height: 100%;
    min-height: 260px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .loc-illustration svg{ width: 70%; height: auto; }

  .loc-option{
    display:flex;
    align-items:center;
    gap: 0.9rem;
    width:100%;
    background:#fff;
    border: none;
    border-left: 5px solid var(--pink);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    text-align:left;
    font-weight:600;
    font-size:1.05rem;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .loc-option:hover{
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
    background:#fff7fb;
  }
  .loc-option.selected{
    background: var(--pink-light);
    box-shadow: 0 4px 14px rgba(236,72,153,0.25);
  }
  .flag-badge{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  }
  .flag-badge svg{ width:100%; height:100%; display:block; }

  /* ---------- Role modal ---------- */
  .globe-wrap{
    height: 100%;
    min-height: 320px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .role-option{
    display:flex;
    align-items:center;
    gap: 1.1rem;
    width:100%;
    background:#fff;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 1rem 1.5rem;
    text-align:left;
    font-size:1.1rem;
    color: var(--ink);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: all .15s ease;
  }
  .role-option strong{ font-weight: 700; }
  .role-option:hover{ box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
  .role-option.selected{
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.15), 0 6px 20px rgba(0,0,0,0.1);
  }
  .role-icon{
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
  }

  .btn-continue{
    background: var(--teal);
    border: none;
    color:#fff;
    font-weight:600;
    padding: 0.65rem 2rem;
    border-radius: 999px;
  }
  .btn-continue:hover{ background: var(--teal-dark); color:#fff; }
  .btn-continue:disabled{ background:#9fd8d0; }

  .btn-goback{
    background: var(--pink-light);
    border: none;
    color: var(--pink);
    font-weight:600;
    padding: 0.65rem 1.8rem;
    border-radius: 999px;
  }
  .btn-goback:hover{ background:#fbcfe8; color: var(--pink); }

  .progress-bar-top{
    height: 5px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
  }