/***********************
**  Divirank - main CSS
************************/

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800&family=Roboto+Condensed:wght@400;700&family=Courgette&display=swap');

/* Import Softwaria specifics */
@import url("softwaria.css");

:root{
    --dr-blue: #0b2a4a;
    --dr-blue-2:#103a66;
    --dr-accent:#ff7a18;
    --dr-bg:#f5f7fb;
    --dr-muted:#6b7280;
    --dr-accent-hover: #e66e14;
    --mygreen-light: #b1d467;
    --myred-pastel: #f67280; 
}

body { background: var(--dr-bg); }
.navbar { backdrop-filter: blur(10px); }
.text-muted-2 { color: var(--dr-muted); }

.btn-accent {
    background: var(--dr-accent);
    border-color: var(--dr-accent);
    color: #fff;
}
.btn-accent:hover { filter: brightness(0.95); color:#fff; }

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  background-color: var(--dr-accent-hover) !important;
  border-color: var(--dr-accent-hover) !important;
  color: #fff !important;
}

.btn-outline-accent {
    border-color: rgba(255,122,24,.45);
    color: var(--dr-accent);
    background: transparent;
}
.btn-outline-accent:hover{
    background: rgba(255,122,24,.10);
    border-color: rgba(255,122,24,.65);
    color: var(--dr-accent);
}

/* Input group icons - make sure they don't look too small or too high*/
.input-group-text i {
    font-size: 1.1rem;
}

/* HERO with photo */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(16,58,102,.08);
    background: #ffffff;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(255,122,24,.10), transparent 60%),
        radial-gradient(900px 500px at 90% 40%, rgba(16,58,102,.14), transparent 60%);
    pointer-events: none;
}
.hero-photo {
    position: absolute;
    inset: 0;
    background-image: url("assets/hero.jpg"); /* <-- set this */
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.03);
    opacity: 0.45;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 40%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.40) 100%),
        linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(245,247,251,.95) 100%);
    pointer-events: none;
}
.hero > .container {
    position: relative;
    z-index: 1;
}

.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-title { color: var(--dr-blue); letter-spacing: -.4px; }

.brand-mark{
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dr-blue) 0%, var(--dr-blue-2) 100%);
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; letter-spacing:-.5px;
    position: relative;
    overflow:hidden;
}
.brand-mark::after{
    content:"";
    position:absolute;
    right:-12px; top:-12px;
    width:40px; height:40px;
    background: rgba(255,122,24,.35);
    transform: rotate(25deg);
    border-radius: 14px;
}

.card-soft{
    border: 1px solid rgba(16,58,102,.10);
    box-shadow: 0 10px 30px rgba(11,42,74,.06);
    border-radius: 18px;
}
.card-soft .card-header{
    background: transparent;
    border-bottom: 1px solid rgba(16,58,102,.10);
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.35rem .7rem;
    border-radius: 999px;
    background: rgba(16,58,102,.08);
    color: var(--dr-blue);
    font-weight: 600;
    font-size: .9rem;
}

.icon-badge{
    width:44px; height:44px;
    flex: 0 0 44px;
    border-radius: 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,122,24,.12);
    color: var(--dr-accent);
    border: 1px solid rgba(255,122,24,.22);
}

.dr-table-current-user > * {
    background: rgba(255,122,24,.10) !important;
    border-top-color: rgba(255,122,24,.22) !important;
    border-bottom-color: rgba(255,122,24,.22) !important;
}

.mock-screen{
    background: #0a2540;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 18px 60px rgba(11,42,74,.18);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    position: relative;
}
.mock-screen .topbar{
    display:flex; align-items:center; gap:8px;
    padding: 6px 10px 12px 10px;
    opacity: .9;
}
.dot{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.25); }
.mock-content{
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    min-height: 360px;
}
.mini-chart{
    height: 90px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(16,58,102,.08), rgba(16,58,102,.02));
    border: 1px solid rgba(16,58,102,.10);
    position: relative;
    overflow:hidden;
}
.mini-chart::after{
    content:"";
    position:absolute;
    left:-20%;
    top:30%;
    width:140%;
    height:140%;
    background: radial-gradient(circle at 30% 20%, rgba(255,122,24,.28), transparent 55%);
    transform: rotate(-8deg);
}

.report-preview-sheet{
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(11,42,74,.06);
}
.report-preview-logo{
    min-width: 76px;
    height: 42px;
    border: 1px solid rgba(16,58,102,.16);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dr-blue);
    font-weight: 700;
    font-size: .8rem;
    background: rgba(16,58,102,.04);
}
.report-preview-metric{
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: .65rem;
    height: 100%;
}

.pricing-highlight{
    border: 2px solid rgba(255,122,24,.35);
    box-shadow: 0 16px 55px rgba(255,122,24,.14);
}

footer{
    background: #071b30;
    color: rgba(255,255,255,.82);
}
footer a{ color: rgba(255,255,255,.82); text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }

/* Cookie consent banner styling - DiviRank themed */
.cookie-consent-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);

    width: min(1100px, 92vw);
    padding: 16px 22px;

    background: #0f2d46;           /* deep navy */
    color: rgba(255,255,255,0.92);

    display: flex;                 /* JS sets this to flex */
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.25);
    z-index: 1000;
}

/* Your current HTML uses <span> for text */
.cookie-consent-banner span {
    font-size: 14px;
    line-height: 1.5;
}

.cookie-consent-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Make the link fit the banner (even if it has "link-on-light-background") */
.cookie-consent-banner a,
.cookie-consent-banner a.link-on-light-background {
    color: #ff8c2b;                /* your orange */
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Button matches your orange CTA vibe */
.cookie-consent-banner button {
    background: #ff8c2b;
    color: #fff;

    border: 0;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;

    border-radius: 10px;
    cursor: pointer;

    transition: transform 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}

.cookie-consent-banner button:hover {
    background: #e67616;
    transform: translateY(-1px);
}

.cookie-consent-banner button.cookie-consent-reject {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.75);
}

.cookie-consent-banner button.cookie-consent-reject:hover {
    background: rgba(255,255,255,0.12);
}

.footer-link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,.82);
    font: inherit;
}

.footer-link-button:hover {
    color: #fff;
    text-decoration: underline;
}

/* Mobile: stack nicely */
@media (max-width: 768px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
        bottom: 14px;
        padding: 14px 16px;
        gap: 12px;
    }

    .cookie-consent-banner button {
        width: 100%;
    }

    .cookie-consent-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* =========================
   Auth pages (Login/Registration/Forgot)
   ========================= */

.page-auth {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Auth card wrappers */
.page-auth form#loginform1,
.page-auth form#registrationform1,
.page-auth form#forgottenpasswordform1 {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(16,58,102,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11,42,74,.06);
    padding: 26px;
}

/* Labels */
.page-auth label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--dr-blue);
    margin-bottom: .35rem;
}

/* Input groups */
.page-auth .input-group { height: 52px !important; }

.page-auth .input-group-text {
    background: rgba(16,58,102,.06) !important;
    border: 1px solid rgba(16,58,102,.18) !important;
    border-right: 0 !important;
    border-radius: 12px 0 0 12px !important;
    padding: 0 14px;
    color: rgba(16,58,102,.75);
}

.page-auth .input-group-text img {
    width: 20px;
    height: 20px;
    opacity: 1;
    filter: none;
}

.usernamepassword { display: none; }

/* default form controls (works for plain inputs too) */
.page-auth .form-control {
    background: #fff !important;
    color: var(--dr-blue) !important;
    border: 1px solid rgba(16,58,102,.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(11,42,74,.04);
    padding: 10px 14px;
}

/* inputs that are part of an input-group with an icon */
.page-auth .input-group > .form-control {
    border-left: 0 !important;
    border-radius: 0 12px 12px 0 !important;
}

.page-auth .form-control:focus {
    outline: none;
    border-color: rgba(255,122,24,.55) !important;
    box-shadow: 0 0 0 .18rem rgba(255,122,24,.15);
}

/* Error message */
.page-auth #span_login_incorrect {
    display: inline-block;
    margin: 6px 0 14px 0;
    font-weight: 600;
}

/* Primary buttons (login + registration + forgot) */
.page-auth #login_button_submit,
.page-auth #registration_button_submit,
.page-auth #forgotten_password_button_submit {
    background: var(--dr-accent) !important;
    border-color: var(--dr-accent) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 12px 28px rgba(255,122,24,.18);
    width: 100% !important;
    min-height: 48px !important;
}

.page-auth #login_button_submit:hover,
.page-auth #registration_button_submit:hover,
.page-auth #forgotten_password_button_submit:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}

.page-auth #login_button_submit:disabled,
.page-auth #registration_button_submit:disabled,
.page-auth #forgotten_password_button_submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Secondary action cards */
.login-action-card {
    display: block;
    padding: 14px 16px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(16,58,102,.12);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(11,42,74,.05);
    text-decoration: none;
    color: var(--dr-blue);
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.login-action-card--primary { color: var(--dr-accent); }

.login-action-card img {
    opacity: .9;
    transition: transform .18s ease, opacity .18s ease;
}

.login-action-card:hover {
    background: #ffffff;
    border-color: rgba(255,122,24,.35);
    box-shadow: 0 14px 38px rgba(11,42,74,.10);
    transform: translateY(-3px);
    color: var(--dr-accent);
}

.login-action-card:hover img {
    transform: scale(1.05);
    opacity: 1;
}

.login-action-card:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255,122,24,.25);
}

/* Back link */
.auth-back-link {
    color: var(--dr-blue-2);
    text-decoration: none;
    font-weight: 700;
}
.auth-back-link:hover {
    color: var(--dr-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Brand badge */
.auth-brand-badge {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
    color: #fff;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--dr-blue) 0%, var(--dr-blue-2) 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(11,42,74,.18);
}

.auth-brand-badge::after {
    content: "";
    position: absolute;
    right: -12px;
    top: -12px;
    width: 40px;
    height: 40px;
    background: rgba(255,122,24,.35);
    transform: rotate(25deg);
    border-radius: 14px;
}

.auth-header h1 { line-height: 1; }

/* Responsive padding tweak */
@media (max-width: 768px) {
    .page-auth form#loginform1,
    .page-auth form#registrationform1,
    .page-auth form#forgottenpasswordform1 {
        padding: 18px;
    }
}

/* Password change button - same styling as other auth CTAs */
.page-auth #password_change_button_submit{
  background: var(--dr-accent) !important;
  border-color: var(--dr-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 12px 28px rgba(255,122,24,.18);
  width: 100% !important;
  min-height: 48px !important;
}

.page-auth #password_change_button_submit:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

.page-auth #password_change_button_submit:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   Cookies page typography
   ========================= */

.cookies-content{
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dr-blue);
}

.cookies-content p{
    color: rgba(11,42,74,.82);
    margin: 0 0 1rem 0;
}

.cookies-content h2{
    color: var(--dr-blue);
    margin: 1.6rem 0 .6rem 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.2px;
}

.cookies-content ul{
    margin: .5rem 0 1.1rem 1.1rem;
    padding: 0;
}

.cookies-content li{
    margin: .35rem 0;
    color: rgba(11,42,74,.82);
}

.cookies-content a{
    color: var(--dr-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookies-content a:hover{
    filter: brightness(.95);
}

/* =========================
   Navbar - better mobile spacing for CTA/login/lang
   ========================= */

@media (max-width: 991.98px) {

    /* Give the collapsed menu some breathing room */
    .navbar .navbar-collapse {
        padding-top: .75rem;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Make it a clean vertical list */
    .navbar .navbar-nav {
        align-items: stretch !important;
        gap: .5rem !important;
    }

    /* Each item becomes a full-width row */
    .navbar .navbar-nav .nav-item {
        width: 100%;
        margin-left: 0 !important;   /* kills ms-lg-* leftovers */
        margin-bottom: .5rem;
    }

    /* Regular links look like list items */
    .navbar .navbar-nav .nav-link {
        padding: .55rem .25rem;
    }

    /* Login button: full width */
    .navbar .navbar-nav .nav-item > .btn {
        width: 100%;
        justify-content: center;
    }

    /* Language toggle: full width group */
    .navbar .lang-toggle {
        width: 100%;
    }

    .navbar .lang-toggle .btn-group {
        width: 100%;
    }

    .navbar .lang-toggle .btn-group .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Request Pilot: CTA block */
    .navbar .btn-accent {
        width: 100%;
        justify-content: center;
        padding: .65rem 1rem;
        border-radius: 12px;
    }

    /* Make auth + language buttons more thumb-friendly (MOBILE ONLY) */
    .navbar .navbar-nav .btn,
    .navbar .lang-toggle .btn {
        min-height: 48px;              /* proper touch target */
        font-size: 1rem;
        font-weight: 600;
        padding: .75rem 1rem;
    }

    /* Slight separation between regular links and action area */
    .navbar .navbar-nav > .nav-item:nth-last-child(3) {
        margin-top: .75rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(16,58,102,.08);
    }

    .navbar-mobile-account-summary {
        padding: .85rem 1rem;
        border: 1px solid rgba(16,58,102,.10);
        border-radius: 14px;
        background: rgba(16,58,102,.04);
    }

    .navbar .mobile-account-item .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 12px;
        background: rgba(16,58,102,.03);
    }
}

/* Make Login visually more button-like (less input-ish) */
.navbar .btn-outline-secondary {
    border-radius: 12px;
}

/* HR Overview button - keep reporting visible but not dominant */

.btn-outline-info.hr-overview-btn {
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.btn-outline-info.hr-overview-btn:hover,
.btn-outline-info.hr-overview-btn:focus {
    background-color: rgba(13, 202, 240, 0.08);
    border-color: #0dcaf0;
    color: #0a58ca;
    box-shadow: 0 1px 3px rgba(13, 202, 240, 0.15);
}

.btn-outline-info.hr-overview-btn:active {
    background-color: rgba(13, 202, 240, 0.12);
    border-color: #0dcaf0;
    color: #0a58ca;
}

/* Desktop: keep navbar controls compact */
@media (min-width: 992px) {
    .navbar .navbar-nav .btn {
        min-height: 36px;
        padding: .35rem .75rem;
        font-size: .9rem;
    }

    .navbar .lang-toggle .btn {
        min-height: 36px;
        padding: .25rem .6rem;
        font-size: .85rem;
        font-weight: 700;
        border-radius: 10px;
    }
}

/* =========================
   Navbar language toggle - desktop fix
   ========================= */
@media (min-width: 992px) {
  /* keep the language buttons compact */
  .navbar .lang-toggle .btn-group .btn {
    padding: .25rem .55rem !important;
    min-height: 32px !important;
    line-height: 1.1;
    font-size: .85rem !important;
    font-weight: 700;
    border-radius: 10px; /* matches your original */
  }

  /* prevent them from looking like a single big pill */
  .navbar .lang-toggle .btn-group .btn + .btn {
    margin-left: 6px;
  }

  /* Optional: make "active" state clearer + on-brand */
  .navbar .lang-toggle .btn-group .btn.active {
    background: var(--dr-blue) !important;
    border-color: var(--dr-blue) !important;
    color: #fff !important;
  }

  .navbar .lang-toggle .btn-group .btn:not(.active) {
    background: #fff;
  }
}

/* =========================
   Navbar language toggle - desktop alignment fix
   ========================= */
@media (min-width: 992px) {

  .navbar .lang-toggle .btn-group .btn {
    display: inline-flex;           /* key change */
    align-items: center;            /* vertical centering */
    justify-content: center;        /* horizontal centering */

    padding: .25rem .55rem !important;
    min-height: 32px !important;
    font-size: .85rem !important;
    font-weight: 700;
    line-height: 1;                 /* remove odd Bootstrap vertical offset */
    border-radius: 10px;
  }

  .navbar .lang-toggle .btn-group .btn.active {
    background: var(--dr-blue) !important;
    border-color: var(--dr-blue) !important;
    color: #fff !important;
  }
}

/* Navbar user dropdown */
.dr-user-toggle { border-radius: 12px; }

.dr-user-badge{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--dr-blue) 0%, var(--dr-blue-2) 100%);
  position: relative;
  overflow: hidden;
}
.dr-user-badge::after{
  content:"";
  position:absolute;
  right:-10px; top:-10px;
  width:34px; height:34px;
  background: rgba(255,122,24,.35);
  transform: rotate(25deg);
  border-radius: 12px;
}

.dr-user-menu{
  border-radius: 14px;
  border: 1px solid rgba(16,58,102,.12);
  box-shadow: 0 18px 60px rgba(11,42,74,.12);
  padding: .5rem;
  min-width: 260px;
}
.dr-user-menu .dropdown-item{
  border-radius: 10px;
  padding: .55rem .65rem;
}
.dr-user-menu .dropdown-item:hover{
  background: rgba(255,122,24,.10);
}

/* =========================
   Activation page (Account confirmation)
   ========================= */
.page-activation{
  padding-top: 40px;
  padding-bottom: 60px;
}

.page-activation .card-soft{
  background: rgba(255,255,255,.92);
}

.page-activation .formheader h1{
  margin: 0 0 14px 0;
  color: var(--dr-blue);
  letter-spacing: -.4px;
}

.page-activation hr{
  display:none; /* kills the ugly top rule if still present */
}

.page-activation .icon-badge--success{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
  color: rgb(34,197,94);
}
.page-activation .icon-badge--danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.22);
  color: rgb(239,68,68);
}

/* Make activation page push footer down */
.page-activation {
  padding-top: 60px;
  padding-bottom: 80px;
  min-height: calc(100vh - 260px); /* adjust if needed */
}


/* =========================
   Snackbar (DiviRank – visible version)
   ========================= */

.snackstripe{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(860px, 92vw);
  padding: 14px 18px;

  border-radius: 16px;
  font-weight: 800;
  text-align: center;

  box-shadow: 0 20px 60px rgba(11,42,74,.25);
  z-index: 9999;

  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}

/* SUCCESS */
.snackstripe_OK{
  background: #16a34a;              /* solid green */
  border: 1px solid #15803d;
  color: #ffffff;
}

/* ERROR */
.snackstripe_ERR{
  background: #dc2626;              /* solid red */
  border: 1px solid #b91c1c;
  color: #ffffff;
}

/* WARNING */
.snackstripe_UNKNOWN{
  background: #f59e0b;              /* solid amber */
  border: 1px solid #d97706;
  color: #1f2937;
}

/* subtle lift when fading */
.snackstripe.fade-out{
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
}