/* =========================================================
   SMM SUPPLY PRO — CLEAN BASE THEME (UPDATED)
   - Bootstrap 3 safe
   - Navy + cyan palette
   - FIXED description contrast (white bg => dark text only)
========================================================= */

/* =========================
   VARIABLES
========================= */
:root{
  --bg0:#04081a;
  --bg1:#061235;
  --bg2:#071b45;

  --brand:#0ea5ff;
  --brand2:#1d4ed8;

  --text:#eef6ff;
  --muted:rgba(238,246,255,.68);

  --card:rgba(255,255,255,.055);
  --stroke:rgba(255,255,255,.12);

  --radius:10px;
  --radius-sm:8px;
  --balance-radius:8px;

  --shadow:0 16px 50px rgba(0,0,0,.55);

  --t:180ms;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* =========================
   GLOBAL RESET
========================= */
html, body{ height:100%; }

body{
  padding-top:0px !important;
  margin:0;

  background:
    radial-gradient(900px 600px at 50% 40%, rgba(14,165,255,.22), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));

  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;

  color:var(--text);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container, .container-fluid, .wrapper, .content,
#content, .content-wrapper{
  background:transparent !important;
}

/* =========================
   TYPOGRAPHY
========================= */
h1,h2,h3,h4,h5,h6{ color:var(--text); }
p, label, small, .text-muted{ color:var(--muted); }

/* =========================
   NAVBAR
========================= */
.navbar.navbar-default{
  background:rgba(255,255,255,.04);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin:0;
  min-height:56px;
}

.navbar-header,
.navbar-collapse{
  padding:0 !important;
  margin:0 !important;
}

.navbar-default .navbar-brand{
  height:56px;
  line-height:56px;
  padding:0 16px;
  color:var(--text);
}

.navbar-brand img{
  max-height:32px;
  vertical-align:middle;
}

.navbar-default .navbar-nav > li > a{
  height:56px;
  line-height:56px;
  padding:0 14px;
  color:rgba(238,246,255,.80);
  transition:background var(--t), color var(--t);
}

.navbar-default .navbar-nav > li > a:hover{
  background:rgba(14,165,255,.10);
  color:#fff;
}

.navbar-default .navbar-nav > .active > a{
  background:rgba(14,165,255,.18);
  color:#fff;
}

.navbar-default .navbar-toggle{
  margin-top:11px;
  margin-bottom:11px;
  border-color:rgba(255,255,255,.20);
}
.navbar-default .navbar-toggle .icon-bar{
  background:#fff;
}

/* =========================
   BALANCE + RIGHT NAV ALIGN
========================= */
.navbar-right-block,
.navbar-right{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.dropdown-currencies .badge,
.navbar .badge{
  font-size:15px !important;
  font-weight:900 !important;
  padding:10px 18px !important;
  min-height:38px !important;
  border-radius:10px !important;

  background: linear-gradient(180deg, rgba(25,168,255,1), rgba(11,130,255,1)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -10px 18px rgba(0,0,0,.18);

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* =========================
   DROPDOWNS
========================= */
.dropdown-menu{
  background:#050a19;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.dropdown-menu > li > a{
  color:rgba(238,246,255,.85);
  padding:10px 14px;
}
.dropdown-menu > li > a:hover{
  background:rgba(14,165,255,.12);
}

/* =========================
   PANELS / WELLS
========================= */
.panel, .well{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
}

.panel-heading{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 18px;
}
.panel-body{ padding:18px; }

/* =========================
   FORMS
========================= */
.form-group{ margin-bottom:18px; }

.form-control, input, select, textarea{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:var(--radius-sm);
  padding:14px;
  min-height:48px;
}

.form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,165,255,.18);
}

/* Fix typed text visibility */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select{
  background: rgba(255,255,255,.06) !important;
  color: #eef6ff !important;
  caret-color: #eef6ff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(238,246,255,.55) !important;
  opacity: 1 !important;
}

.form-control[readonly],
.form-control:disabled,
input[readonly],
input:disabled{
  color: rgba(238,246,255,.75) !important;
  -webkit-text-fill-color: rgba(238,246,255,.75) !important;
  opacity: 1 !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: #eef6ff !important;
  box-shadow: 0 0 0px 1000px rgba(8,16,40,.55) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* =========================
   BUTTONS
========================= */
.btn{
  border-radius:var(--radius-sm);
  font-weight:700;
  padding:10px 14px;
}

.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

/* =========================
   TABLES
========================= */
.table > thead > tr > th,
.table > tbody > tr > td{
  border-color:rgba(255,255,255,.08);
  color:rgba(238,246,255,.90);
}

.table-striped > tbody > tr:nth-of-type(odd){
  background:rgba(255,255,255,.03);
}

/* =========================
   ALERTS
========================= */
.alert{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  color:#fff;
}

/* =========================
   PAGINATION
========================= */
.pagination > li > a{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:var(--radius-sm);
}
.pagination > .active > a{
  background:rgba(14,165,255,.20);
}

/* =========================
   SPACING: NAVBAR -> CONTENT
========================= */
.navbar + .container,
.navbar + .container-fluid{
  margin-top:48px;
}

/* =========================================================
   RESPONSIVE MOBILE MENU (Bootstrap 3)
========================================================= */
@media (max-width: 767px){

  .navbar.navbar-default{
    min-height:56px !important;
  }

  .navbar-default .navbar-toggle{
    margin:10px 10px 10px 0 !important;
    padding:10px 12px !important;
    border-radius:10px !important;
  }

  .navbar-default .navbar-collapse{
    border-top:0 !important;
    box-shadow:none !important;
    padding:10px !important;
  }

  #navbar.navbar-collapse{
    margin-top:8px !important;
    background:rgba(5,10,25,.92) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px !important;
    backdrop-filter: blur(14px);
    box-shadow:0 20px 60px rgba(0,0,0,.55);
    overflow:hidden;
    transform-origin: top;
    animation: smmDrop 220ms cubic-bezier(.2,.8,.2,1);
  }

  @keyframes smmDrop{
    from{ opacity:0; transform:translateY(-6px) scaleY(.98); }
    to{ opacity:1; transform:translateY(0) scaleY(1); }
  }

  .navbar-nav{
    margin:0 !important;
    float:none !important;
  }

  .navbar-left-block,
  .navbar-right-block{
    float:none !important;
  }

  .navbar-nav > li{
    float:none !important;
    width:100% !important;
  }

  .navbar-nav > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    height:auto !important;
    line-height:1.2 !important;
    padding:12px 12px !important;
    margin:6px 0 !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.04) !important;
    color:rgba(238,246,255,.88) !important;
    transition: transform 180ms var(--ease), background 180ms var(--ease);
  }

  .navbar-nav > li > a:hover{
    background:rgba(14,165,255,.12) !important;
    transform: translateY(-1px);
  }

  .navbar-nav > .active > a{
    background: linear-gradient(135deg, rgba(14,165,255,.18), rgba(29,78,216,.14)) !important;
    color:#fff !important;
  }

  .navbar-nav .dropdown-menu{
    position:static !important;
    float:none !important;
    width:100% !important;
    margin:6px 0 10px !important;
    padding:8px !important;
    background:rgba(255,255,255,.03) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }

  .navbar-nav .dropdown-menu > li > a{
    padding:10px 12px !important;
    border-radius:8px !important;
    color:rgba(238,246,255,.85) !important;
  }

  .navbar-nav .dropdown-menu > li > a:hover{
    background:rgba(14,165,255,.10) !important;
  }

  .navbar-left-block{
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:8px !important;
  }
}

/* Fix typed text visibility */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select{
  background: rgba(255,255,255,.08) !important;
  color: #eef6ff !important;
  caret-color: #0ea5ff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  -webkit-text-fill-color: #eef6ff !important;
  opacity: 1 !important;
}

/* Focus state - critical for maintaining text visibility */
.form-control:focus,
input:focus,
textarea:focus,
select:focus{
  background: rgba(255,255,255,.10) !important;
  color: #eef6ff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(14,165,255,.18) !important;
  -webkit-text-fill-color: #eef6ff !important;
}
/* =========================================================
   FIX: Service Description (white box text invisible)
   Target exact block from your Twig: #service_description
========================================================= */

/* Make the description box match theme (dark glass) */
#service_description .panel-body{
  background: rgba(255,255,255,.06) !important;     /* dark glass */
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  padding: 14px 14px !important;

  color: #eef6ff !important;
}

/* Force all inner text to be visible (p, li, span, etc.) */
#service_description .panel-body *{
  color: #eef6ff !important;
}

/* If the description content contains links */
#service_description .panel-body a{
  color: #7cc3ff !important;
  text-decoration: underline;
}

/* If the description content contains lists */
#service_description .panel-body ul,
#service_description .panel-body ol{
  padding-left: 18px !important;
  margin: 8px 0 0 !important;
}

/* If the description HTML injects <br> only, keep spacing */
#service_description .panel-body{
  line-height: 1.6 !important;
}
/* =========================================================
   FIX: Instruction WHITE BOX → DARK NAVY
========================================================= */

/* Instruction container */
.instruction .well,
.instruction .panel,
.instruction .panel-body{
  background: linear-gradient(
    180deg,
    #071b45,
    #04081a
  ) !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.55) !important;

  color: #eef6ff !important;
}

/* Text inside instruction */
.instruction .well *,
.instruction .panel *,
.instruction .panel-body *{
  color: rgba(238,246,255,.88) !important;
}

/* Head title inside instruction */
.instruction h1,
.instruction h2,
.instruction h3,
.instruction h4{
  color: #ffffff !important;
}