@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Bold.eot');
	src: local('Open Sans Bold'), local('OpenSans-Bold'),
		url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans-Bold.woff') format('woff'),
		url('../fonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Regular.eot');
	src: local('Open Sans Regular'), local('OpenSans-Regular'),
		url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans-Regular.woff') format('woff'),
		url('../fonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #F2F9FF;
  --surface3: #D6EBFF;
  --border: #30363d;
  --border-accent: #3d444d;
  --text: #0063BE;
  --text-muted: #7d8590;
  --text-dim: #F2F9FF;
  --accent: #58a6ff;
  --accent-dim: #1f3a5a;
  --green: #3fb950;
  --green-dim: #1a3829;
  --yellow: #e3b341;
  --yellow-dim: #3d2e0a;
  --red: #f85149;
  --red-dim: #3d1a1a;
  --sans: 'Open Sans', sans-serif;
}


html, body{overflow-x:hidden}
#app *{font-family: var(--sans)}
* { box-sizing: border-box; margin: 0; padding: 0; }
#app  { color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.6; min-height: 100vh; }

.container { max-width: 1128px; margin: 0 auto;  position: relative; z-index: 1; }
.calc-header {  padding-bottom: 0; background-image: url('../img/top-bg.svg'); background-repeat: no-repeat; background-size: 100% 100%; background-position: bottom center; margin: 0 auto;max-width: 1388px;position: relative;z-index: 0;margin-bottom: -84px;}
.calc-header .container{max-width: 1177px;}
.header-label { font-family: var(--sans); font-size: 11px; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
#app h1 { font-size: 58px; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.33;margin-bottom: 0.3em;}
h1 span { color: var(--text-muted); font-weight: 300; }
.h1-desc { color: #fff; font-size: 17px;line-height: 1.45;margin-bottom: 2.3em;}

.top-text-wrapper { max-width: 482px; width: 50%; padding: 0 0 165px 22px;}
.top-img-wrapper { width: 50%; }
.top-wrapper { display: flex; align-items: flex-end;}
.top-img { width: 179.6%; margin-left: -21.8%;max-width: inherit;}
.top-btn{background: var(--text);border: none;color: #fff;font-weight: bold;padding: 24px 32px;font-size: 17px;display: none;}


.h2-desc{text-align: center;max-width: 427px;margin-bottom: 1.9em  !important;}
.icon-select:before{content:"";position: absolute;right: 10px;background-image: url(../img/icon-arr.svg);width: 13px;height: 30px;background-size: cover;z-index: 2;top: 18px;pointer-events: none;}

.section { border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
.section-blue-wrapper { background: var(--surface2); padding-top: 72px;margin-bottom: 54px;}
.section-header { padding: 0 50px 0 50px; display: flex; align-items: center; gap: 10px; flex-direction: column; }
.section-title {  font-size: 34px; font-weight: 600; color: var(--text);   max-width: 630px;text-align: center;line-height: 1.1;margin-bottom: 0.1em;}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.section-body { padding: 0 93px; }
.params-grid { display: flex;  gap: 24px; margin-bottom: 27px;}
.field { display: flex; flex-direction: column; gap: 6px; position: relative; padding-left: 39px; width: 33.33%;}
.field label {  font-size: 14px;   text-align: center;font-weight: bold;padding-left: 56px;}
.field input, .field select { background: #fff; border: none; border-radius: 5px; color: var(--text);  font-size: 20px; padding: 20px 0 20px 54px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; text-align: center;font-weight: bold;cursor: pointer;}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
.field select option { background: var(--surface2); }
.field-input-wrapper{overflow: hidden;border: 1px solid var(--surface3);position: relative;cursor: pointer;}
.field-input-wrapper input, .field-input-wrapper select{width: calc(100% + 40px);text-indent: -45px;}

.select-display { background-color:#fff; position: absolute;  inset: 0;  display: flex;  align-items: center;  justify-content: center;  font-size: 17px;  font-weight: bold;  color: var(--text);  pointer-events: none;}


.icon-circle { position: absolute; width: 96px; height: 96px; left: 0; bottom: -13px;  z-index: 1;}
.computed-val {font-family: var(--sans);color: var(--accent);  font-weight: bold;font-size: 20px;}


.imt-wrapper{display: flex;gap: 30px;justify-content: center;padding: 24px 93px 24px 93px;}
.imt-wrapper .field{display: flex;flex-direction: row;padding-left: 0;width: auto;align-items: first baseline;}
.imt-wrapper .field label{padding: 0;font-size: 20px;text-align: left;}


.weight-info { font-family: var(--sans); /*! font-size: 11px; */ color: var(--text); margin-top: 3px; }
.results-title{font-size: 24px;font-weight: bold;text-align: center;max-width: 470px;line-height: 1.2;margin-bottom: 1em;}
.buttons-header{}
.buttons-body{padding: 8px 96px 88px 96px;}
.buttons-body:after{content:"";background: var(--surface2);position: absolute;width: 40px;height: 40px;bottom: -20px;transform: rotate(45deg);left: calc(50% - 20px);border-radius: 4px;}
.buttons-title{font-weight: bold;text-align: center;}

.phase-pills { display: flex;   background-color: #fff; border-radius: 40px; position: relative; padding-left: 105px; border: 1px solid var(--surface3);justify-content: space-between;}
.phase-icon { position: absolute; width: 96px; height: 96px; left: 0; top: 50%; transform: translateY(-50%); }
.phase-pill { padding: 16px 38px; border-radius: 31px; border: 1px solid #fff; background: transparent; color: var(--text);  font-size: 20px; cursor: pointer; transition: all 0.15s; opacity: 0.4; font-weight: bold;}
.phase-pill:hover { border-color: #fff; color: var(--accent); }
.phase-pill.active { background: var(--text); border-color: var(--text); color: #fff; opacity: 1; }

.selected-params{display: flex;gap: 16px;margin-bottom: 24px;justify-content: center;}
.selected-item{background: var(--surface3);display: flex;gap: 10px;padding: 10px 17px 10px 12px;border-radius: 7px;font-weight: bold;font-size: 17px;white-space: nowrap;align-items: center;}
.selected-item img{width: 28px;height: 28px;}
.days-table {  width: 100%;    font-size: 13px;margin: 0 auto 54px auto;max-width: 754px;}
.days-table-head {  display: grid;  grid-template-columns: 108px 1fr 1fr 1fr;  border-bottom: 1px solid var(--surface3);  background: var(--surface2);}
.days-table-head .dt-cell {  padding: 13px 14px;  color: var(--text);  font-weight: 600;  font-size: 17px;border-top: 1px solid var(--surface3);border-left: 1px solid var(--surface3);text-align: center;}
.days-table-head .dt-cell:last-child{border-right: 1px solid var(--surface3);}
.days-table .phase-row {  padding: 8px 14px;  background: var(--surface2);  font-size: 17px;  font-weight: 600;  border-bottom: 1px solid var(--surface3);  border-left: 1px solid var(--surface3);  border-right: 1px solid var(--surface3);}
.days-table-row {  display: grid;  grid-template-columns: 108px 1fr 1fr 1fr;  border-bottom: 1px solid var(--surface3);  transition: background 0.12s;}
.days-table-row:hover {  background: rgba(88,166,255,0.04);}
.days-table-row .dt-cell {  padding: 13px 14px;  color: var(--text);  display: flex;  align-items: center;border-left: 1px solid var(--surface3);justify-content: center;font-size: 17px;}
.days-table-row .dt-cell:last-child {border-right: 1px solid var(--surface3);}

.dt-kcal { color: var(--accent); }
.dt-prot { color: #d2a8ff; }
.no-data {  text-align: center;  padding: 32px;  color: var(--text-muted);  font-family: var(--sans);  font-size: 12px;}
.mixture-table {  width: 100%;  font-size: 13px;  margin-bottom: 100px;}
.mixture-table-head {  display: grid;  grid-template-columns: 92px 2fr 171px 137px 143px 137px 134px 170px;  border: 1px solid var(--surface3);  background: var(--surface2);}
.mixture-table-head .mt-cell {  padding: 18px 12px;  font-size: 17px;  font-weight: 600;  color: var(--text);  white-space: wrap;  text-align: center;  border-left: 1px solid var(--surface3);display: flex;align-items: center;justify-content: center;line-height: 1.12;}
.mixture-table-head .mt-cell:first-child{border-left: none}
.mixture-table .mixture-phase-header {  padding: 8px 12px;  background: var(--surface2);  font-size: 17px;  font-weight: 600;  border-bottom: 1px solid var(--surface3);  border-left: 1px solid var(--surface3);  border-right: 1px solid var(--surface3);}
.mixture-table-row {  display: grid;  grid-template-columns: 92px 2fr 171px 137px 143px 137px 134px 170px; border-bottom: 1px solid var(--surface3);  transition: background 0.12s;}
.mixture-table-row:last-child { border-bottom: none;}
.mixture-table-row:hover { background: rgba(88,166,255,0.03);}
.mixture-table-row .mt-cell {  padding: 15px 12px;  display: flex;  align-items: center;  color: var(--text);border-left: 1px solid var(--surface3);justify-content: center;font-size: 17px;line-height: 1.2;}
.mixture-table-row .mt-cell:last-child{border-right: 1px solid var(--surface3);}
.mt-cell{text-align: center;}
.mt-day { color: var(--text); font-size: 11px; }
.mt-name { color: var(--text); font-size: 13px; }
.mt-vol { color: var(--text); }
.mt-speed { color: var(--text); }
.mt-time { color: var(--text-muted); }
.mt-kcal { color: var(--text); }
.mt-prot { color: var(--text); }

.status-ok { display: inline-flex; align-items: center; gap: 4px; background: var(--text); color: #fff; border-radius: 24px;  font-size: 12px; font-weight: 600; width: 20px;height: 20px;text-align: center;justify-content: center;}
.status-warn { gap: 4px; background: red;color: #fff;border-radius: 20px; padding: 0;font-size: 12px;font-weight: 600;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;line-height: 1;}

.fresubin-wrapper{display: flex;gap: 32px;justify-content: center;margin-bottom: 52px;}
.fresubin-btn{color: #fff;font-weight: bold;background-color: var(--text);text-decoration: none;padding: 22px 41px;border-radius: 8px;}
.fresubin-desc{margin-bottom: 0.8em;}
.fresubin-doze{font-size: 11px;color: #333;opacity: 0.5;font-style: italic;}
.fresubin-img{width: 100%;max-width: 257px;margin-bottom: 20px;}
.fresubin-item{display: flex;flex-direction: column;text-align: center;gap: 10px;justify-content: center;align-items: center;width: 355px;border: 1px solid var(--surface3);padding: 30px 14px;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='355' height='116' fill='none'%3E%3Cpath fill='%23f2f9ff' d='M355 0C231.16 57.23 66.74 77.16 0 79.97V174h355z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: bottom center;background-size: 100% auto;}
.fresubin-title{font-weight: bold;font-size: 24px;margin-bottom: 1em;}
.fresubin-item-title{font-weight: bold;font-size: 24px;margin-bottom: 0.4em;}

.calculated { overflow: hidden;   max-height: 0;   opacity: 0;   transition: max-height 0.7s ease, opacity 0.5s ease;   pointer-events: none; }

  /* Внутренний .calculated внутри section-blue-wrapper */
  .section-blue-wrapper > .calculated {  margin-top: 0;  }

  /* Состояние «показано» */
  .calculated.is-visible {   max-height: 5000px;    opacity: 1;    pointer-events: auto;  }
  .section-pdf-export {    padding: 0 20px 40px 20px;  }
  .pdf-export-btn {    display: inline-flex;    align-items: center;    gap: 10px;    background: #0063BE;    color: #fff;    border: none;    border-radius: 8px;    padding: 14px 28px;    font-size: 15px;    font-weight: 600;    cursor: pointer;    transition: background 0.2s, opacity 0.2s;	height: 60px;  }
  .pdf-export-btn:hover:not(:disabled) {    background: #0052a0;  } 
  .pdf-export-btn:disabled {    opacity: 0.45;    cursor: not-allowed;  }
  .pdf-export-btn svg{width: 20px}
  .pdf-note {    margin-top: 8px;    font-size: 13px;    color: #6b7a99;  }
  .calc-btn-wrapper {display:flex; justify-content: center;padding-bottom: 30px;}

  .btns-wrapper{display:flex;gap:20px}

@media (max-width: 1120px) {
  .section-body{padding: 0 20px}
  .buttons-body{padding: 8px 20px 88px 20px;}
  .mixture-table{padding: 0 20px;}
  .mixture-table-head .mt-cell{font-size:13px}
  .mixture-table .mixture-phase-header{font-size:13px}
  .mixture-table-row .mt-cell{font-size:13px}
  .fresubin-wrapper{padding: 0 20px;gap: 20px;}
  .mixture-table-head {grid-template-columns: 8.214vw 2fr 15.268vw 12.232vw 12.768vw 12.232vw 11.964vw 15.179vw;}
  .mixture-table-row {grid-template-columns: 8.214vw 2fr 15.268vw 12.232vw 12.768vw 12.232vw 11.964vw 12.5vw;}
  .mixture-table-row .mt-cell {padding: 1.339vw 1.071vw; font-size: 1.518vw;}
  .mixture-table-head .mt-cell {padding: 1.607vw 1.071vw; font-size: 1.518vw;}
  .mixture-table .mixture-phase-header {padding: 0.714vw 1.071vw; font-size: 1.518vw;}
}

@media (max-width:1024px){
  .calc-header {max-width: 135.547vw; margin-bottom: -8.203vw;}
  .calc-header .container {}
  .header-label {font-size: 1.074vw; margin-bottom: 0.781vw;}
  #app h1 {font-size: 5.664vw;}
  .top-text-wrapper {max-width: 47.07vw; padding: 0 0 16.113vw 2.148vw;}
  .top-btn {padding: 2.344vw 3.125vw; font-size: 1.66vw;}
  .h1-desc {font-size: 1.66vw;}

  .params-grid {gap: 2.344vw; margin-bottom: 2.637vw;}
  .icon-circle {width: 9.375vw; height: 9.375vw; bottom: -1.27vw;}
  .field {gap: 0.586vw; padding-left: 3.809vw;}
  .field label { padding-left: 5.469vw;}
  .field input, .field select {border-radius: 5px; font-size: 1.953vw; padding: 1.953vw 0 1.953vw 5.273vw;}
  .field-input-wrapper input, .field-input-wrapper select {width: calc(100% + 3.906vw); text-indent: -1.465vw;}
  .phase-pill {padding: 1.563vw 3.011vw; border-radius: 31px;  font-size: 1.953vw;}
  .phase-icon {width: 9.375vw; height: 9.375vw;}
  .phase-pills {border-radius: 40px; padding-left: 10.254vw; }
}


@media (max-width: 768px) {
  .select-display{font-size:14px}
  .calc-header{margin: 0;background-position: top center;overflow: hidden;}
  .container { padding: 0 16px; }
  .calc-header .container{padding: 38px 16px 0px 16px; }
  #app h1 {text-align: center;font-size: 31px;margin-bottom: 0.4em;}
  .h1-desc{text-align: center;max-width: 320px;margin: 0 auto;font-size: 14px;}
  .section-title { font-size: 24px; margin-bottom: 0em;line-height: 1.2;}
  .section-header { padding: 35px 16px 0 16px; }
  .section-body { padding: 0 32px 0 32px; }
  .top-img{width: 135.7%;margin: 0;margin-bottom: -48.8%;margin-left: -11.5%;}
  .top-wrapper { flex-direction: column; }
  .top-text-wrapper { width: 100%;  left: 0;max-width: 100%;padding: 0;}
  .top-img-wrapper { width: 100%; margin: 0;}
  .params-grid { flex-direction: column; gap: 16px;margin-bottom: 13px;}
  .phase-pills {  display: flex;flex-direction: column;border-radius: 0;padding-left: 40px;margin-left: 18px;}
  .phase-pills::before {  content: "";  position: absolute;    background-image: url(../img/icon-arr.svg);      background-size: cover;  z-index: 2;    pointer-events: none;width: 10px;height: 25px;right: 15px;top: 16px;}
  
  .imt-wrapper {flex-direction: column; padding: 24px 32px 24px 32px;gap: 20px;}
  .imt-wrapper .field label{font-size: 14px;line-height: 1.2;}
  .days-table-head,
  .days-table-row { grid-template-columns: 58px 1fr 1fr 1fr;  }
  .days-table-head .dt-cell,
  .days-table-row .dt-cell { padding: 8px 8px;  font-size: 13px;  line-height: 1.2;display: flex;align-items: center;justify-content: center;}
  .mixture-table-head { display: none; }
  .mixture-table-row {    display: none;  }
  .mixture-card { display: block;    background: #fff;        margin-bottom: 15px;    overflow: hidden;      border: 1px solid var(--surface3);}
  .mixture-card-header { display: flex;    align-items: center;    justify-content: center;    padding: 14px 14px;    background: #D6EBFF;    color: var(--text);  border-bottom: 1px solid var(--surface3);}
  .mixture-card-day { font-size: 13px;    font-weight: 600;              text-align: center;}
  .mixture-card-name { font-family: var(--sans);    font-size: 12px;    font-weight: 600;    color: #fff;    flex: 1;   margin: 0 10px;  text-align: right; }
  .mixture-card-body { display: grid;    grid-template-columns: 1fr 1fr;    gap: 0;  }
  .mixture-card-field { padding: 10px 14px;    border-bottom: 1px solid #e0eef8;    border-right: 1px solid #e0eef8;  }
  .mixture-card-field:nth-child(even) {    border-right: none;  }
  .mixture-card-field:nth-last-child(-n+2) {    border-bottom: none;  }
  .mixture-card-label { font-size: 13px; width: 33.333%;text-align: center;font-weight: bold;display: flex;justify-content: center;align-items: center;line-height: 1.25;padding: 8px 5px;border-left: 1px solid var(--surface3);}
  .mixture-card-label:first-child{border-left: none; }
  .mixture-card-value { font-size: 13px; width: 33.333%;text-align: center;line-height: 1.25;display: flex;justify-content: center;align-items: center;min-height: 50px;border-left: 1px solid var(--surface3);padding: 8px 5px;}
  .mixture-card-value:first-child{border-left: none; }
  .mixture-card-footer {    padding: 10px 14px;    border-top: 1px solid #e0eef8;    display: flex;    align-items: center;    justify-content: space-between;  gap: 5px;min-height: 50px;}
  .mixture-card-footer>div{display: flex; justify-content: center;width: 100%;gap: 7px;}
  .mixture-card-footer-label {    font-family: var(--sans);    font-size: 11px;    color: var(--text-muted);  }
  .mixture-phase-header {    padding: 8px 12px;    font-size: 11px;        font-weight: 600;            border-bottom: none;    background: transparent;      font-size: 14px;line-height: 1.25;border-top: 1px solid var(--surface3);margin-bottom: 10px;text-transform: uppercase;text-align: center;}
  .mixture-card-label-row{display: flex;justify-content: space-between;border-bottom: 1px solid var(--surface3);background: var(--surface2);border-top: 1px solid var(--surface3);}
  .mixture-card-value-row{display: flex;justify-content: space-between;}
  .field{width: 100%;}
  .results-title{font-size: 20px;}
  .h2-desc{font-size: 12px;max-width: 310px;}
  .section-blue-wrapper{padding-top: 4px;padding-bottom: 46px;margin-bottom: 23px;}
  .icon-circle { width: 72px;height: 72px;bottom: -8px;}
  .field label { font-size: 12px;font-weight: 400;}
  .phase-pill{font-size: 13px;border-radius: 0;display: none;}
  .phase-pill.active{display: flex;background: #fff;color: var(--text);padding: 18px;border: 1px solid var(--surface3);border-left: none;text-indent: 35px;font-size: 14px;}
  .field input, .field select { }
  .icon-select::before{width: 10px;height: 25px;right: 15px;top: 16px;}
  .field-input-wrapper input, .field-input-wrapper select {font-size: 14px;padding: 19px 10px;width: calc(100% + 50px);text-indent: -30px;}
  .phase-icon { left: -18px;}
  .buttons-header{margin: 15px 0 5px 0;padding-left: 47px;}
  .buttons-body{padding: 0 32px 7px 32px;position: relative;}
  .buttons-title{font-weight: 400;font-size: 12px;}
  .selected-item{padding: 7px 10px;font-size: 14px;}
  .selected-item img{width: 18px; height: 18px}
  .selected-params{gap: 7px;}
  .days-table{margin: 0 auto;}
  .fresubin-wrapper{overflow-x: auto;width: 100%;justify-content: flex-start;}
  .fresubin-item{min-width: 268px;}
  .mixture-table .mixture-phase-header{font-size: 16px; padding: 10px 10px;}
  .mixture-table{padding: 0}
  .buttons-body::after{bottom: -60px;}

  .phase-pills-desktop { display: none !important; }
  .phase-pills-mobile { display:  flex !important; }
  .phase-pills-mobile { display: flex; flex-direction: column; border-radius: 0; padding-left: 0; margin-left: 18px; border: 1px solid var(--surface3); background: #fff; }
  .phase-pills-mobile::before { content: ""; position: absolute; background-image: url(../img/icon-arr.svg); background-size: cover; z-index: 2; pointer-events: none; width: 10px; height: 25px; right: 15px; top: 16px; background-color: #fff;}
  .phase-pills-mobile .phase-icon { left: -18px; }
  .phase-pills-mobile select { background: #fff; border: none; border-radius: 5px; color: var(--text); font-size: 14px; padding: 20px 0 20px 53px; outline: none; width: calc(100% + 20px); text-indent: -10px; font-weight: bold; cursor: pointer; text-align: center; }
  .phase-pills-mobile .field-input-wrapper { overflow: hidden; border: 1px solid var(--surface3); position: relative; cursor: pointer; }

  
  .fresubin-wrapper {gap: 17px; margin-bottom: 0;}
  .fresubin-btn {padding: 19px 30px;font-size: 12px;width: 100%;}
  .fresubin-doze {font-size: 10px;margin-bottom: -0.6em;}
  .fresubin-desc{font-size: 12px;}
  .fresubin-img {max-width: 181px; margin-bottom: 4px;}
  .fresubin-item {gap: 10px;   padding: 30px 30px;}
  .fresubin-title {font-size: 24px;}
  .fresubin-item-title {font-size: 16px;margin-bottom: -0.4em;}
  
  .pdf-export-btn{font-size:12px;justify-content: center;width: 257px;}
  .btns-wrapper{flex-direction:column;align-items: center;}
}


@media (min-width: 769px) {
  .mixture-card { display: none; }
  .phase-pills-mobile { display: none !important; }
  .phase-pills-desktop { display: flex !important; }
}


.target-bar { display: flex; flex-wrap: wrap; gap: 20px; padding: 16px 20px; background: var(--surface2); border-top: 1px solid var(--border); }
.target-item { display: flex; align-items: center; gap: 8px; }
.target-label { font-family: var(--sans); font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em; }
.target-value { font-family: var(--sans); font-size: 13px; font-weight: 600; }
footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-family: var(--sans); font-size: 11px; color: var(--text-dim); text-align: center; }


.in-favorite path {fill:#fff!important}  

.footnote{margin: 30px 0 0 0; font-size: 12px; opacity: 0.8}



/* Login modal */
.login-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.login-modal {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.login-modal-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #1a2540;
  margin-bottom: 28px;
  line-height: 1.5;
}
.login-modal-btn {
  display: inline-block;
  background: #0063BE;
  color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 40px;
  border-radius: 10px;
  transition: background 0.2s;
}
.login-modal-btn:hover {
  background: #0052a0;
}