/* path: src/tariffs/static/tariffs/css/tariff_cards.css */

.TariffCard{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  padding:15px 14px;
  background:var(--surface);
  border:1px solid var(--divider);
  border-radius:var(--r-m);
  transition:
    border-color .18s ease,
    background .18s ease;
}

/* -----------------------------------------------------------------------------
   States
----------------------------------------------------------------------------- */

.TariffCard[data-expanded="true"][data-selected="false"]{
  border-color:var(--divider);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012) 0%,
      rgba(255,255,255,0) 100%
    ),
    var(--surface);
}

.TariffCard[data-expanded="true"][data-selected="true"]{
  border-color:rgba(207,133,36,.18);
  background:
    linear-gradient(
      180deg,
      rgba(207,133,36,.028) 0%,
      rgba(207,133,36,.008) 100%
    ),
    var(--surface);
}

/* -----------------------------------------------------------------------------
   Head
----------------------------------------------------------------------------- */

.TariffCard__head{
  min-width:0;
}

.TariffCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.TariffCard__row--top{
  align-items:flex-start;
}

.TariffCard__row--action{
  justify-content:flex-end;
  margin-top:8px;
}

.TariffCard__title{
  margin:0;
  min-width:0;
  color:var(--text);
  font-size:1.1rem;
  line-height:1.14;
  letter-spacing:-.01em;
}

.TariffCard__price{
  margin:0;
  flex:0 0 auto;
  color:var(--accent);
  font-size:1.08rem;

  line-height:1.1;
  text-align:right;
  white-space:nowrap;
}

.TariffCard__meta{
  margin:0 0 6px;
  color:var(--text-2);
  font-size:.93rem;
  line-height:1.35;
}

.TariffCard__hint,
.TariffCard__desc{
  margin:6px 0 0;
  color:var(--text-3);
  font-size:.93rem;
  line-height:1.36;
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__title{
  color:rgba(255,255,255,.96);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__hint{
  color:var(--text-2);
}

/* -----------------------------------------------------------------------------
   Action
----------------------------------------------------------------------------- */

.TariffCard__action{
  min-height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:.96rem;

  line-height:1.2;
  cursor:pointer;
  transition:color .15s ease;
}

.TariffCard__action:hover,
.TariffCard__action:focus{
  color:var(--text);
  outline:none;
}

.TariffCard__action:active{
  color:var(--text-2);
}

.TariffCard[data-expanded="true"][data-selected="false"] .TariffCard__action{
  color:var(--text-2);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__action{
  color:rgba(255,255,255,.82);
}

/* -----------------------------------------------------------------------------
   Expand area
----------------------------------------------------------------------------- */

.TariffCard__expand{
  display:none;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--divider);
}

.TariffCard[data-expanded="true"] .TariffCard__expand{
  display:grid;
}

.TariffCard[data-expanded="true"][data-selected="false"] .TariffCard__expand{
  border-top-color:var(--divider);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__expand{
  border-top-color:rgba(255,255,255,.07);
}

/* -----------------------------------------------------------------------------
   Controls
----------------------------------------------------------------------------- */

.TariffCard__controls{
  display:grid;
  gap:10px;
}

.TariffCard__controls--compact{
  gap:10px;
}

.TariffInlineCounter{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:7px;
}

.TariffInlineCounter__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0;
  border:0;
  border-radius:9px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font:inherit;
  font-size:1.08rem;

  line-height:1;
  cursor:pointer;
  transition:
    background .15s ease,
    color .15s ease;
}

.TariffInlineCounter__btn:hover,
.TariffInlineCounter__btn:focus{
  background:rgba(255,255,255,.065);
  color:var(--text);
  outline:none;
}

.TariffInlineCounter__btn:active{
  background:rgba(255,255,255,.045);
}

.TariffInlineCounter__value{
  min-width:0;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:.95rem;
  line-height:1.2;
  text-align:center;
}

.TariffCard[data-expanded="true"][data-selected="false"] .TariffInlineCounter__value{
  background:rgba(255,255,255,.032);
  color:var(--text);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffInlineCounter__value{
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.88);
}

/* -----------------------------------------------------------------------------
   Toggle buttons for other card types
----------------------------------------------------------------------------- */

.TariffToggle{
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--divider-2);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  cursor:pointer;
}

.TariffToggle.is-active{
  border-color:rgba(207,133,36,.42);
  background:var(--accent-soft);
}

/* -----------------------------------------------------------------------------
   Foot / Sum
----------------------------------------------------------------------------- */

.TariffCard__foot{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  border-top:1px solid var(--divider);
}

.TariffCard__sumLabel{
  color:var(--text-2);
  font-size:1rem;
  line-height:1.2;
}

.TariffCard__sum{
  color:var(--text);
  font-size:1.14rem;

  line-height:1;
  letter-spacing:-.01em;
}

.TariffCard[data-expanded="true"][data-selected="false"] .TariffCard__foot{
  border-top-color:var(--divider);
}

.TariffCard[data-expanded="true"][data-selected="false"] .TariffCard__sumLabel{
  color:var(--text-2);
}

.TariffCard[data-expanded="true"][data-selected="false"] .TariffCard__sum{
  color:var(--text);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__foot{
  border-top-color:rgba(255,255,255,.07);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__sumLabel{
  color:rgba(255,255,255,.74);
}

.TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__sum{
  color:rgba(255,255,255,.96);
  font-size:1.17rem;
}

/* -----------------------------------------------------------------------------
   Fixed card: unify divider rhythm
----------------------------------------------------------------------------- */

.TariffCard--fixed .TariffCard__expand{
  gap:0;
  margin-top:10px;
  padding-top:10px;
}

.TariffCard--fixed .TariffCard__foot{
  padding-top:0;
  border-top:0;
}

.TariffCard--fixed[data-expanded="true"][data-selected="false"] .TariffCard__foot,
.TariffCard--fixed[data-expanded="true"][data-selected="true"] .TariffCard__foot{
  border-top:0;
}

/* -----------------------------------------------------------------------------
   Tablet and up
----------------------------------------------------------------------------- */

@media (min-width: 760px){
  .TariffCard{
    padding:16px;
  }

  .TariffCard__row{
    gap:12px;
  }

  .TariffCard__row--action{
    margin-top:10px;
  }

  .TariffCard__price{
    font-size:1.16rem;
  }

  .TariffCard__hint,
  .TariffCard__desc{
    font-size:.95rem;
  }

  .TariffCard__action{
    font-size:.98rem;
  }

  .TariffCard__expand{
    gap:12px;
    margin-top:14px;
    padding-top:14px;
  }

  .TariffInlineCounter{
    grid-template-columns:38px 1fr 38px;
    gap:8px;
  }

  .TariffInlineCounter__btn{
    height:34px;
    border-radius:10px;
    font-size:1.12rem;
  }

  .TariffInlineCounter__value{
    min-height:34px;
    padding:0 12px;
    font-size:.97rem;
    border-radius:10px;
  }

  .TariffCard__foot{
    padding-top:12px;
  }

  .TariffCard__sum{
    font-size:1.2rem;
  }

  .TariffCard[data-expanded="true"][data-selected="true"] .TariffCard__sum{
    font-size:1.22rem;
  }

  .TariffCard--fixed .TariffCard__expand{
    margin-top:12px;
    padding-top:12px;
  }
}

/* -----------------------------------------------------------------------------
   Hover
----------------------------------------------------------------------------- */

@media (hover:hover){
  .TariffCard:hover{
    border-color:var(--divider);
  }

  .TariffCard[data-expanded="true"][data-selected="true"]:hover{
    border-color:rgba(207,133,36,.22);
  }
}

/* -----------------------------------------------------------------------------
   Desktop only: compact worker card inside
----------------------------------------------------------------------------- */

@media (min-width: 1200px){
  .TariffCard--worker[data-expanded="true"] .TariffCard__expand{
    gap:14px;
  }

  .TariffCard--worker[data-expanded="true"] .TariffCard__controls{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:center;
    gap:12px;
  }

  .TariffCard--worker[data-expanded="true"] .TariffInlineCounter{
    grid-template-columns:40px 1fr 40px;
    gap:10px;
  }

  .TariffCard--worker[data-expanded="true"] .TariffInlineCounter__btn{
    height:40px;
    border-radius:10px;
  }

  .TariffCard--worker[data-expanded="true"] .TariffInlineCounter__value{
    min-height:40px;
    padding:0 14px;
  }

  .TariffCard--worker[data-expanded="true"] .TariffCard__foot{
    margin-top:0;
    padding-top:14px;
  }
}

@media (min-width: 1360px){
  .TariffCard--worker[data-expanded="true"] .TariffCard__controls{
    gap:14px;
  }

  .TariffCard--worker[data-expanded="true"] .TariffInlineCounter{
    grid-template-columns:42px 1fr 42px;
  }
}

/* -----------------------------------------------------------------------------
   Desktop only: align expanded cards
----------------------------------------------------------------------------- */

@media (min-width: 1200px){
  .TariffCard--item-floor[data-expanded="true"] .TariffCard__expand{
    gap:14px;
  }

  .TariffCard--item-floor[data-expanded="true"] .TariffCard__controls{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:center;
    gap:12px;
  }

  .TariffCard--item-floor[data-expanded="true"] .TariffInlineCounter{
    grid-template-columns:40px 1fr 40px;
    gap:10px;
  }

  .TariffCard--item-floor[data-expanded="true"] .TariffInlineCounter__btn{
    height:40px;
    border-radius:10px;
  }

  .TariffCard--item-floor[data-expanded="true"] .TariffInlineCounter__value{
    min-height:40px;
    padding:0 14px;
  }

  .TariffCard--item-floor[data-expanded="true"] .TariffCard__foot{
    margin-top:0;
    padding-top:14px;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffCard__expand{
    gap:14px;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffCard__controls{
    width:100%;
    max-width:none;
    gap:0;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffInlineCounter{
    width:100%;
    grid-template-columns:40px minmax(0, 1fr) 40px;
    gap:10px;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffInlineCounter__btn{
    height:40px;
    border-radius:10px;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffInlineCounter__value{
    min-height:40px;
    padding:0 14px;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffCard__foot{
    margin-top:0;
    padding-top:14px;
  }

  .TariffCard--material[data-expanded="true"] .TariffCard__expand{
    gap:14px;
  }

  .TariffCard--material[data-expanded="true"] .TariffCard__controls{
    width:100%;
    max-width:none;
    gap:0;
  }

  .TariffCard--material[data-expanded="true"] .TariffInlineCounter{
    width:100%;
    grid-template-columns:40px minmax(0, 1fr) 40px;
    gap:10px;
  }

  .TariffCard--material[data-expanded="true"] .TariffInlineCounter__btn{
    height:40px;
    border-radius:10px;
  }

  .TariffCard--material[data-expanded="true"] .TariffInlineCounter__value{
    min-height:40px;
    padding:0 14px;
  }

  .TariffCard--material[data-expanded="true"] .TariffCard__foot{
    margin-top:0;
    padding-top:14px;
  }

  .TariffCard--fixed[data-expanded="true"] .TariffCard__expand{
    margin-top:14px;
    padding-top:14px;
  }
}

@media (min-width: 1360px){
  .TariffCard--item-floor[data-expanded="true"] .TariffCard__controls{
    gap:14px;
  }

  .TariffCard--item-floor[data-expanded="true"] .TariffInlineCounter{
    grid-template-columns:42px 1fr 42px;
  }

  .TariffCard--per-day[data-expanded="true"] .TariffInlineCounter,
  .TariffCard--material[data-expanded="true"] .TariffInlineCounter{
    grid-template-columns:42px minmax(0, 1fr) 42px;
  }
}