/* Etihad Allocations: CSS (combined desktop + mobile + improvements) */
:root{
  --orange-1:#FF7A00;
  --orange-2:#FFB066;
  --text:#123;
  --muted:#788;
}

body{font-family:Inter, Arial, Helvetica, sans-serif;color:var(--text);background:#fff}

.eti-alloc-wrapper .container{
  max-width:1150px;margin:40px auto;padding:0 20px;
}

/* Title + spacing */
.eti-alloc-wrapper h1{font-weight:700;font-size:28px;margin:0 0 8px;}
.eti-alloc-wrapper .lead{color:var(--muted);font-size:16px;margin-bottom:30px;} /* space between title & chart */

/* Tabs */
.eti-alloc-wrapper .tabs{
  display:flex;gap:34px;justify-content:center;padding-bottom:16px;margin-bottom:25px;border-bottom:1px solid #eee;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.eti-alloc-wrapper .tab{position:relative;cursor:pointer;padding:10px 6px;white-space:nowrap;font-weight:600;font-size:17px;color:#073626;transition:.25s;}
.eti-alloc-wrapper .tab:hover{color:#0b4d37}
.eti-alloc-wrapper .tab.active{color:#042c1f}
.eti-alloc-wrapper .tab.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;width:55%;height:3px;background:#073626;border-radius:10px}

/* Bars row */
.eti-alloc-wrapper .bars-row{display:flex;gap:26px;align-items:flex-end;padding-bottom:20px;border-bottom:1px solid #f2f2f2;transition:.25s}
.eti-alloc-wrapper .bar-item{flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;text-align:center}
.eti-alloc-wrapper .pct{font-size:14px;font-weight:700;margin-bottom:8px;color:#222}
.eti-alloc-wrapper .bar{width:85%;height:60px;border-radius:8px 8px 0 0;background:linear-gradient(180deg, rgba(255,186,102,.6), rgba(255,122,0,.95));transition:height .45s cubic-bezier(.2,.9,.3,1)}
.eti-alloc-wrapper .label{margin-top:6px;font-size:13px;color:#222}
.eti-alloc-wrapper .help-dot{width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid #ddd;font-size:12px;display:flex;align-items:center;justify-content:center;margin-left:8px;color:#999}

/* Mobile stacked bars */
@media (max-width:768px){
  .eti-alloc-wrapper .bars-row{flex-direction:column;gap:24px;padding:0;border:none}
  .eti-alloc-wrapper .bar-item{min-width:100%;align-items:flex-start}
  .eti-alloc-wrapper .pct{font-size:16px}
  .eti-alloc-wrapper .bar{width:100%;height:38px;border-radius:6px}
  .eti-alloc-wrapper .label{font-size:14px}
}

/* Risk slider */
.eti-alloc-wrapper .risk-row{margin-top:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.eti-alloc-wrapper .risk-text{width:120px;font-weight:600;font-size:16px;color:#083b2a}
.eti-alloc-wrapper .risk-track{position:relative;flex:1;height:14px;background:#eee;border-radius:10px;cursor:pointer}
.eti-alloc-wrapper .risk-gradient{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:10px;background:linear-gradient(90deg, rgba(255,170,80,0.6), rgba(255,130,40,0.6), rgba(255,100,0,0.7))}
.eti-alloc-wrapper .slider-thumb{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:#fff;border-radius:50%;border:6px solid rgba(255,122,0,0.22);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(0,0,0,0.15);transition:.2s}
.eti-alloc-wrapper .slider-value{font-size:16px;font-weight:700}
.eti-alloc-wrapper .risk-labels{margin-top:8px;display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:#4b6}

/* Mobile slider adjustments */
@media (max-width:768px){
  .eti-alloc-wrapper .risk-row{flex-direction:column;align-items:flex-start}
  .eti-alloc-wrapper .risk-text{font-size:15px}
  .eti-alloc-wrapper .slider-thumb{width:42px;height:42px;border-width:6px}
}

/* tooltip */
.eti-alloc-wrapper .tooltip-box{position:absolute;padding:8px 12px;background:#fff;border:1px solid #ddd;border-radius:6px;font-size:13px;display:none;box-shadow:0 6px 18px rgba(0,0,0,0.08);z-index:50}

/* small screens */
@media (max-width:480px){
  .eti-alloc-wrapper h1{font-size:20px}
  .eti-alloc-wrapper .tab{font-size:14px;padding:6px 2px}
  .eti-alloc-wrapper .slider-thumb{width:36px;height:36px}
  .eti-alloc-wrapper .pct{font-size:15px}
  .eti-alloc-wrapper .label{font-size:13px}
}