/* basic reset + fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family: "Raleway", sans-serif}
body{background:#041218;color:#fff;min-height:100vh;overflow-x:hidden;user-select:none}

/* background video/image area */
.main__platform-video__intro{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;overflow:hidden}
.main__platform-video__media{width:100%;height:100%;object-fit:cover;opacity:.7;filter:contrast(1.02) saturate(1.02);position:absolute;top:0;left:0}
.main__platform-video__media.fallback{background:url('./imgs/bg.jpg') no-repeat center center/cover;min-height:100vh}

/* wrapper */
#doc__wrapper{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding-top:36px}

/* title */
#title{color:#fff;font-size:38px;font-weight:700;text-align:center;padding:14px 20px;border-radius:10px;width:90%;max-width:360px;margin:0 auto 14px}

/* content wrapper */
#content__wrapper{width:90%;max-width:360px;background:rgba(2,12,15,0.75);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 8px 30px rgba(0,0,0,.5);margin:0 auto}

/* banner */
#banner{text-align:center;margin-bottom:12px}
#banner img{border:4px solid rgba(255,255,255,0.08);border-radius:50%;padding:.4rem;background:rgba(255,255,255,0.02);width:88px;height:88px;object-fit:cover}

/* broker/pair/time select */
.platform__wrapper{text-align:center;margin-top:12px}
.broker__select-wrapper{position:relative;display:flex;align-items:center}
.broker-icon{width:15%;height:auto;object-fit:contain;margin-right:8px}
.broker__select{width:85%;padding:12px 12px 12px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.35);color:#fff;margin-bottom:8px;appearance:none;font-size:16px}
.broker__select option{padding-left:8px}
.broker__select option[value="quotex"]{background:url('./imgs/qx.png') no-repeat left center;background-size:24px}
.broker__select option[value="binomo"]{background:url('./imgs/binomo.png') no-repeat left center;background-size:24px}
.broker__select option[value="pocket"]{background:url('./imgs/po.png') no-repeat left center;background-size:24px}
.broker__select option[value="olymp"]{background:url('./imgs/olymp.png') no-repeat left center;background-size:24px}
.broker__select option[value="iq"]{background:url('./imgs/iq.png') no-repeat left center;background-size:24px}
.broker__select option[value="expert"]{background:url('./imgs/ep.jpg') no-repeat left center;background-size:24px}
.pair__wrapper{text-align:center;margin-top:12px}
.pair__select,.time__select{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.35);color:#fff;margin-bottom:8px;appearance:none;font-size:16px}

/* signal CTA */
#trade__wrapper{margin-top:12px;text-align:center}
#signal{padding:14px 20px;border-radius:10px;border:none;background:#d22b3b;color:#fff;font-weight:700;cursor:pointer;width:100%;font-size:16px}
#signal:disabled{opacity:0.6;cursor:not-allowed}
#signal:active{transform:translateY(1px)}
.rem__time{margin-top:8px;color:#cde;font-size:14px;min-height:20px}

/* result */
.resultBox{margin-top:12px;padding:14px;border-radius:10px;background:rgba(255,255,255,0.02);min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.signalTag{font-size:20px;font-weight:800;padding:5px 10px;border-radius:8px;color:#fff}
.signalTag.buy{background:linear-gradient(90deg,#00c853,#00e676)}
.signalTag.sell{background:linear-gradient(90deg,#ff3d00,#ff7043)}

/* loader */
#loader {
  border: 4px solid rgba(255,255,255,0.1);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
  display: none;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:40}
.modal{background:#071a20;padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);width:90%;max-width:320px}
.modal h2{margin:0 0 8px;font-size:20px}
.input{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;user-select:text;font-size:16px}
.small-muted{color:#9fb3bd;font-size:14px;margin-top:8px}

/* footer */
#footer{position:absolute;bottom:10px;width:100%;text-align:center;color:#9fb3bd;font-size:14px}

/* responsive tweaks */
@media (min-width:760px){
  #content__wrapper{max-width:420px;padding:22px}
  #title{font-size:44px;max-width:420px}
  .broker-icon{width:15%}
  .broker__select{padding:14px}
  .pair__select,.time__select{padding:14px}
}
@media (max-width:480px){
  #content__wrapper{max-width:300px}
  #title{font-size:32px;max-width:300px}
  .signalTag{font-size:18px;padding:4px 8px}
  .broker-icon{width:15%}
  .broker__select{padding:10px}
  .pair__select,.time__select{padding:10px}
}

/* selectator minimal styles */
.selectator_element{border:1px solid #dcdcdc;background:#fff;border-radius:2px}
.selectator_selected_items .selectator_placeholder{font-size:80%;color:rgba(0,0,0,0.5)}
.selectator_options{position:absolute;background:#fff;z-index:101}

/* small helpers */
.hidden{display:none}