/* =========================================================
   MehdiBH Budget Calculator - Multi-Country CSS
   Version 2.0.0
   ========================================================= */

/* --- STRUCTURE GLOBALE --- */
.mehdibh-wrap {
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.mehdibh-grid {
  display: grid;
  grid-template-columns: 77% 22%;
  gap: 1%;
  align-items: flex-start;
  margin: auto;
  max-width: 800px;
}

@media (max-width:1024px) {
  .mehdibh-gauge-rev, .mehdibh-gauge-diff {font-size: 12px;}
}

.mehdibh-card,
.mehdibh-card-2 {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mehdibh-card-2 {
    position: sticky;
    top: 12px;
    margin-top: 5px;
   /* height:90vh;*/
}

.mehdibh-sticky-wrapper{
    height:100vh;
}

/* --- TITRES & PETITS TEXTES --- */
.mehdibh-title {
  margin: 0 0 10px;
  font-weight: 700;
  color: #111;
}

.mehdibh-small {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

/* --- BADGES --- */
.mehdibh-badge {
  display: inline-block;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.mehdibh-badge:hover {
  border-color: #f4a742;
  transform: translateY(-1px);
}

.mehdibh-badge.is-active {
  background: #f4a742;
  border-color: #f4a742;
  color: #fff;
}

/* --- TABLEAU RÉCAP --- */
.mehdibh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid #949494;
  border-radius:2px;
}

.mehdibh-table th,
.mehdibh-table td {
  padding: 5px 5px;
  border-bottom: 1px solid #f0f0f0;
}

.mehdibh-table thead th {
  background: #fafafa;
  font-size: 12px;
  color: #666;
}

.mehdibh-table tbody tr:nth-child(even) { 
  background: #fcfcfc; 
}

.mehdibh-table tbody tr:last-child td { 
  border-bottom: none; 
  font-weight: 700;
}

.mehdibh-table td:nth-child(2),
.mehdibh-table td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mehdibh-table th:nth-child(2),
.mehdibh-table th:nth-child(3){
  text-align: right;
}

.mehdibh-table th:nth-child(2),
.mehdibh-table td:nth-child(2){
    border-right : 1px solid #f0f0f0;
    border-left : 1px solid #f0f0f0;
}

/* --- DEVISES --- */
.mehdibh-currency-switch {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.mehdibh-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: .25s;
}

.mehdibh-btn-wrap:hover {
  transform: scale(1.05);
}

.mehdibh-btn-wrap.is-active { 
  transform: scale(1.08); 
}

.mehdibh-btn-flag {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 2px #dcdcdc;
  transition: .25s;
}

.mehdibh-btn-wrap.is-active .mehdibh-btn-flag {
  box-shadow: 0 0 0 3px black;
}

.mehdibh-btn-label {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
  color: #333;
}

/* DRAPEAUX PAR DÉFAUT */
.mehdibh-btn-flag[data-flag="CHF"] { 
  background-image: url("https://flagcdn.com/w40/ch.png"); 
}
.mehdibh-btn-flag[data-flag="EUR"] { 
  background-image: url("https://flagcdn.com/w40/eu.png"); 
}
.mehdibh-btn-flag[data-flag="USD"] { 
  background-image: url("https://flagcdn.com/w40/us.png"); 
}
.mehdibh-btn-flag[data-flag="CAD"] { 
  background-image: url("https://flagcdn.com/w40/ca.png"); 
}

/* --- TOGGLES --- */
.mehdibh-toggle {
  width: 46px;
  height: 24px;
  border-radius: 20px;
  background: #d2d2d2;
  position: relative;
  cursor: pointer;
  transition: .25s;
}

.mehdibh-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #555;
  transition: .25s;
}

.mehdibh-toggle.is-on { 
  background: #f4a742; 
}

.mehdibh-toggle.is-on::after { 
  transform: translateX(22px); 
  background: #fff; 
}

.mehdibh-hint {
  font-size: 12px;
  color: #666;
  opacity: .9;
  margin-right: 12px;
}

/* --- SECTIONS FORMULAIRE --- */
.mehdibh-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mehdibh-choice-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

/* -----------------------------------------------------------
   GAUGE THERMO STYLE
   ----------------------------------------------------------- */
.mehdibh-balance-wrap {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  background: #ececec;
  border-radius: 10px;
  padding: 10px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #ddd;
  position: sticky;
  top: 2px;
  z-index: 999;
  height: 90vh;
}

.mehdibh-gauge-box {
  text-align: center;
}

.mehdibh-gauge-label-title {
  font-size: 13px;
  opacity: .65;
}

.mehdibh-gauge-rev {
  font-size: 12px;
  font-weight: 700;
}

.mehdibh-gauge-header {
  margin-bottom: 10px;
}

.mehdibh-gauge-bar-wrap {
  position: relative;
  width: 40px;
  height: 50vh;
  margin: 12px auto;
}

.mehdibh-gauge-bar {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background: linear-gradient(
    to bottom,
    #ff6b4a,
    #ffd047,
    #79ff72,
    #1e8bff
  );
  box-shadow: inset 0 0 8px rgba(0,0,0,0.25);
}

.mehdibh-gauge-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  transition: bottom .4s ease, background-color .4s ease;
}

.mehdibh-gauge-diff {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600;
}

.mehdibh-balance-hint {
  text-align: center;
  padding: 14px;
  opacity: .75;
  font-size: 14px;
}

/* --- TOTAL STICKY --- */
.mehdibh-sticky-total {
  background: #111;
  color: #fff;
  padding: 5px 2px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  flex-direction: column;
  margin-top: 15px;
}

.mehdibh-unit-small {
  font-size: 70%;
  opacity: 0.8;
}

.mehdibh-sticky-wrapper {
    position: relative;
}

/* --- ERROR MESSAGE --- */
.mehdibh-error {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
}