.panel[data-view="price-screen"]{
  overflow:hidden;
  background:#5641b2;
}

.panel[data-view="price-screen"]::before{
  display:none;
}

.price-screen{
  box-sizing:border-box;
  font-family:var(--taif-font-family);
}

.price-screen--desktop-board{
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:clamp(36px, 5.4vh, 52px) minmax(0, 1fr) clamp(32px, 4.9vh, 46px);
  gap:clamp(4px, .55vw, 8px);
  padding:clamp(4px, .55vw, 8px);
  direction:rtl;
  color:#ffffff;
  background:
    radial-gradient(circle at 12% 5%, rgba(255,255,255,.10), transparent 25%),
    radial-gradient(circle at 88% 100%, rgba(255,255,255,.08), transparent 26%),
    linear-gradient(135deg, #533cae 0%, #6648c1 48%, #7757cb 100%);
}

.price-screen--mobile-table{
  display:none;
}

.price-screen__desktop-title,
.price-screen__desktop-footer{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  color:#ffffff;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 3px 10px rgba(0,0,0,.28);
}

.price-screen__desktop-title{
  padding:0 clamp(14px, 2vw, 36px);
  font:900 clamp(24px, 3.35vw, 46px)/1.04 var(--taif-font-family);
  letter-spacing:.02em;
}

.price-screen__desktop-footer{
  padding:0 clamp(14px, 2vw, 36px);
  font:900 clamp(20px, 2.55vw, 36px)/1.04 var(--taif-font-family);
  letter-spacing:.01em;
}

.price-screen__desktop-body{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(236px, 18.5vw, 360px);
  gap:clamp(12px, 1.4vw, 22px);
  padding:clamp(12px, 1.3vw, 20px) clamp(12px, 1.3vw, 18px);
  overflow:hidden;
  direction:ltr;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 15% 10%, rgba(108,84,42,.06), transparent 35%),
    linear-gradient(180deg, #fffefb 0%, #fbfaf5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 14px 32px rgba(74,56,145,.16);
}

.price-screen__desktop-cards{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(3, minmax(0, 1fr));
  gap:clamp(10px, 1.2vh, 15px) clamp(12px, 1.05vw, 16px);
  direction:ltr;
}

.price-screen__desktop-card{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:clamp(54px, 6.6vh, 72px) minmax(0, 1fr);
  overflow:hidden;
  direction:rtl;
  border:2px solid rgba(104,83,196,.82);
  border-radius:12px;
  background:#fffefb;
  box-shadow:0 4px 12px rgba(83,61,160,.10), inset 0 1px 0 rgba(255,255,255,.95);
}

.price-screen__desktop-card--interactive{
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.price-screen__desktop-card--interactive:hover{
  transform:translateY(-1px);
  border-color:rgba(237,189,69,.92);
  box-shadow:0 10px 22px rgba(47,32,102,.14), inset 0 1px 0 rgba(255,255,255,.95);
}

.price-screen__desktop-card--interactive:focus-visible{
  outline:4px solid rgba(237,189,69,.36);
  outline-offset:3px;
}

.price-screen__desktop-card-head{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, .85vw, 14px);
  padding:0 clamp(10px, 1.15vw, 18px);
  overflow:hidden;
  color:#ffffff;
  background:linear-gradient(135deg, #694dca 0%, #5d41bb 54%, #5135ab 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.price-screen__desktop-pair-title{
  min-width:0;
  overflow:hidden;
  color:#ffffff;
  font:900 clamp(21px, 2.3vw, 34px)/1.14 var(--taif-font-family);
  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:0 2px 8px rgba(0,0,0,.24);
  display:block;
  padding-bottom:3px;
  transform:translateY(-2px);
}

.price-screen__desktop-flag{
  flex:0 0 auto;
  width:clamp(34px, 2.75vw, 46px);
  height:clamp(34px, 2.75vw, 46px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}

.price-screen__desktop-flag-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.price-screen__desktop-rate-grid{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  direction:ltr;
  background:linear-gradient(180deg, #fffefa 0%, #faf9f4 100%);
}

.price-screen__desktop-rate-cell{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(5px, .65vh, 8px);
  padding:clamp(8px, 1.15vh, 12px) clamp(8px, .9vw, 14px);
  color:#070707;
  text-align:center;
}

.price-screen__desktop-rate-cell--buy{
  border-left:2px solid rgba(132,132,132,.34);
}

.price-screen__desktop-rate-cell > span{
  display:block;
  color:#111111;
  font:900 clamp(18px, 1.95vw, 28px)/1.12 var(--taif-font-family);
  white-space:nowrap;
  transform:translateY(-1px);
}

.price-screen__desktop-rate-cell > strong{
  max-width:100%;
  overflow:hidden;
  color:#000000;
  font:900 clamp(25px, 2.75vw, 40px)/1 var(--taif-font-family);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.price-screen__desktop-rate-cell .taif-control-text,
.price-screen__desktop-rate-cell .taif-control-text *{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
}

.price-screen__desktop-card--empty{
  opacity:.58;
}

.price-screen__desktop-brand{
  min-width:0;
  min-height:0;
  padding:clamp(4px, .55vw, 8px);
  overflow:hidden;
  direction:rtl;
  border-radius:20px;
  border:2px solid rgba(108,90,197,.56);
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 22px rgba(80,61,154,.12), inset 0 1px 0 rgba(255,255,255,.82);
}

.price-screen__desktop-brand-inner{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  border-radius:16px;
  border:2px solid rgba(104,85,193,.72);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.07), transparent 36%),
    linear-gradient(165deg, #7056d4 0%, #6245bf 52%, #5538aa 100%);
}

.price-screen__desktop-brand-stack{
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1.2vw, 16px);
  padding:clamp(12px, 1.15vw, 18px);
}

.price-screen__desktop-brand-slot{
  flex:1 1 0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:2px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.12) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(57,36,126,.10);
}

.price-screen__desktop-brand-slot-inner{
  width:calc(100% - clamp(18px, 2vw, 26px));
  height:calc(100% - clamp(18px, 2vw, 26px));
  border-radius:14px;
  border:2px dashed rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
}

.price-screen__desktop-brand-slot--image{
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 100%);
  border-color:rgba(255,255,255,.42);
}

.price-screen__desktop-brand-slot-inner--image{
  display:grid;
  place-items:center;
  overflow:hidden;
  border-style:solid;
  border-color:rgba(255,255,255,.55);
  background:#ffffff;
}

.price-screen__desktop-brand-slot-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#ffffff;
}

.price-screen__desktop-brand-slot--top-logo{
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 100%);
}

.price-screen__desktop-brand-slot-inner--top-logo{
  padding:clamp(8px, .8vw, 14px);
}

.price-screen__desktop-brand-slot-image--top-logo{
  object-fit:contain;
  background:transparent;
}

@media (max-width:1180px) and (min-width:821px){
  .price-screen--desktop-board{
    grid-template-rows:40px minmax(0, 1fr) 36px;
    gap:4px;
    padding:4px;
  }

  .price-screen__desktop-body{
    grid-template-columns:minmax(0, 1fr) clamp(208px, 19.5vw, 280px);
    gap:10px;
    padding:11px;
  }

  .price-screen__desktop-cards{
    gap:8px 10px;
  }

  .price-screen__desktop-card{
    grid-template-rows:46px minmax(0, 1fr);
  }

  .price-screen__desktop-pair-title{
    font-size:clamp(19px, 2.25vw, 29px);
    line-height:1.14;
  }

  .price-screen__desktop-flag{
    width:32px;
    height:32px;
  }

  .price-screen__desktop-rate-cell > span{
    font-size:clamp(16px, 1.9vw, 24px);
  }

  .price-screen__desktop-rate-cell > strong{
    font-size:clamp(22px, 2.6vw, 34px);
  }

  .price-screen__desktop-brand-stack{
    gap:10px;
    padding:10px;
  }

  .price-screen__desktop-brand-slot{
    border-radius:16px;
  }
}

@media (max-height:690px) and (min-width:821px){
  .price-screen--desktop-board{
    grid-template-rows:36px minmax(0, 1fr) 32px;
    gap:5px;
    padding:5px;
  }

  .price-screen__desktop-title{
    font-size:clamp(21px, 3vw, 36px);
  }

  .price-screen__desktop-footer{
    font-size:clamp(18px, 2.3vw, 30px);
  }

  .price-screen__desktop-body{
    padding:10px;
  }

  .price-screen__desktop-cards{
    gap:7px 8px;
  }

  .price-screen__desktop-card{
    grid-template-rows:42px minmax(0, 1fr);
  }

  .price-screen__desktop-rate-cell{
    gap:4px;
    padding:5px 7px;
  }

  .price-screen__desktop-brand-stack{
    gap:7px;
    padding:7px;
  }

  .price-screen__desktop-brand-slot{
    border-radius:14px;
  }
}

/* Mobile price screen uses the same card concept as desktop with a horizontal brand card at the bottom. */
@media (max-width:820px){
  .panel[data-view="price-screen"]{
    overflow:hidden;
    background:#5641b2;
  }

  .price-screen--desktop-board{
    display:none !important;
  }

  .price-screen--mobile-board{
    width:100%;
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:clamp(32px, 5.9vh, 44px) minmax(0, 1fr) clamp(28px, 5.1vh, 40px);
    gap:5px;
    padding:5px;
    box-sizing:border-box;
    direction:rtl;
    color:#ffffff;
    background:
      radial-gradient(circle at 12% 5%, rgba(255,255,255,.10), transparent 25%),
      radial-gradient(circle at 88% 100%, rgba(255,255,255,.08), transparent 26%),
      linear-gradient(135deg, #533cae 0%, #6648c1 48%, #7757cb 100%);
  }

  .price-screen__mobile-title,
  .price-screen__mobile-footer{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:0 10px;
    border-radius:10px;
    color:#ffffff;
    text-align:center;
    white-space:nowrap;
    text-shadow:0 3px 10px rgba(0,0,0,.28);
  }

  .price-screen__mobile-title{
    font:900 clamp(16px, 5vw, 26px)/1.05 var(--taif-font-family);
    letter-spacing:.01em;
  }

  .price-screen__mobile-footer{
    font:900 clamp(11px, 3.65vw, 16px)/1.08 var(--taif-font-family);
    letter-spacing:.01em;
  }

  .price-screen__mobile-body{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:7px;
    overflow-x:hidden;
    overflow-y:auto;
    direction:ltr;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.82);
    background:
      radial-gradient(circle at 15% 10%, rgba(108,84,42,.06), transparent 35%),
      linear-gradient(180deg, #fffefb 0%, #fbfaf5 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 14px 32px rgba(74,56,145,.16);
    scrollbar-width:thin;
    scrollbar-color:var(--taif-scrollbar-thumb) var(--taif-scrollbar-track);
    scrollbar-gutter:stable;
  }

  .price-screen__mobile-body::-webkit-scrollbar{
    width:8px;
    height:8px;
  }

  .price-screen__mobile-body::-webkit-scrollbar-track{
    border-radius:10px;
    background:var(--taif-scrollbar-track);
  }

  .price-screen__mobile-body::-webkit-scrollbar-thumb{
    border:1px solid transparent;
    border-radius:10px;
    background:var(--taif-scrollbar-thumb);
    background-clip:padding-box;
  }

  .price-screen__mobile-cards{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
    direction:ltr;
  }

  .price-screen__mobile-card{
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:minmax(38px, auto) minmax(68px, 1fr);
    overflow:hidden;
    direction:rtl;
    border:2px solid rgba(104,83,196,.82);
    border-radius:11px;
    background:#fffefb;
    box-shadow:0 4px 12px rgba(83,61,160,.10), inset 0 1px 0 rgba(255,255,255,.95);
  }

  .price-screen__mobile-card--interactive{
    cursor:pointer;
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  }

  .price-screen__mobile-card--interactive:active{
    transform:translateY(1px) scale(.995);
  }

  .price-screen__mobile-card--interactive:focus-visible{
    outline:3px solid rgba(237,189,69,.36);
    outline-offset:2px;
  }

  .price-screen__mobile-card-head{
    width:calc(100% + 4px);
    min-width:calc(100% + 4px);
    min-height:0;
    margin-top:-2px;
    margin-right:-2px;
    margin-left:-2px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:start;
    justify-self:stretch;
    gap:6px;
    padding:5px 8px;
    overflow:hidden;
    color:#ffffff;
    border-radius:9px 9px 0 0;
    background:linear-gradient(135deg, #694dca 0%, #5d41bb 54%, #5135ab 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  }

  .price-screen__mobile-pair-title{
    min-width:0;
    overflow:hidden;
    color:#ffffff;
    font:900 clamp(12px, 3.5vw, 17px)/1.15 var(--taif-font-family);
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-shadow:0 2px 8px rgba(0,0,0,.24);
    display:block;
    padding-bottom:2px;
    transform:translateY(-1px);
  }

  .price-screen__mobile-card .price-screen__desktop-flag{
    width:24px;
    height:24px;
    border-width:1.5px;
    box-shadow:0 2px 5px rgba(0,0,0,.16);
  }

  .price-screen__mobile-rate-grid{
    position:relative;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    direction:ltr;
    background:linear-gradient(180deg, #fffefa 0%, #faf9f4 100%);
  }

  .price-screen__mobile-rate-grid::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    transform:translateX(-0.5px);
    background:rgba(121, 121, 121, .20);
    pointer-events:none;
  }

  .price-screen__mobile-rate-cell{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:6px 4px;
    color:#070707;
    text-align:center;
  }

  .price-screen__mobile-rate-cell--buy{
    border-left:none;
  }

  .price-screen__mobile-rate-cell > span{
    display:block;
    color:#111111;
    font:900 clamp(12px, 3.1vw, 16px)/1.12 var(--taif-font-family);
    white-space:nowrap;
  }

  .price-screen__mobile-rate-cell > strong{
    max-width:100%;
    overflow:hidden;
    color:#000000;
    font:900 clamp(16px, 4.4vw, 22px)/1 var(--taif-font-family);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .price-screen__mobile-rate-cell .taif-control-text,
  .price-screen__mobile-rate-cell .taif-control-text *{
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
  }

  .price-screen__mobile-card--empty{
    opacity:.58;
  }

  .price-screen__mobile-brand{
    min-width:0;
    min-height:120px;
    padding:3px;
    overflow:hidden;
    direction:rtl;
    border-radius:18px;
    border:2px solid rgba(108,90,197,.56);
    background:rgba(255,255,255,.72);
    box-shadow:0 8px 22px rgba(80,61,154,.12), inset 0 1px 0 rgba(255,255,255,.82);
  }

  .price-screen__mobile-brand-inner{
    width:100%;
    min-height:112px;
    height:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
    align-items:stretch;
    padding:7px;
    box-sizing:border-box;
    overflow:hidden;
    border-radius:14px;
    border:2px solid rgba(104,85,193,.72);
    background:
      radial-gradient(circle at 50% 10%, rgba(255,255,255,.07), transparent 36%),
      linear-gradient(165deg, #7056d4 0%, #6245bf 52%, #5538aa 100%);
  }

  .price-screen__mobile-brand-slot{
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    border:2px solid rgba(255,255,255,.24);
    background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.12) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(57,36,126,.10);
    overflow:hidden;
  }

  .price-screen__mobile-brand-slot--image{
    background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 100%);
    border-color:rgba(255,255,255,.42);
  }

  .price-screen__mobile-brand-slot-inner{
    width:calc(100% - 14px);
    height:calc(100% - 14px);
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    box-sizing:border-box;
    overflow:hidden;
    border-radius:11px;
    border:2px dashed rgba(255,255,255,.28);
    background:rgba(255,255,255,.05);
  }

  .price-screen__mobile-brand-slot-inner--image{
    display:grid;
    place-items:center;
    overflow:hidden;
    border-style:solid;
    border-color:rgba(255,255,255,.55);
    background:#ffffff;
  }

  .price-screen__mobile-brand-slot--top-logo{
    background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 100%);
  }

  .price-screen__mobile-brand-slot-inner--top-logo{
    padding:10px;
  }

  .price-screen__mobile-brand-slot-image{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    display:block;
    object-fit:contain;
    object-position:center center;
    background:#ffffff;
    overflow:hidden;
  }

  .price-screen__mobile-brand-slot-image--top-logo{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    background:transparent;
  }
}

@media (max-width:430px){
  .price-screen--mobile-board{
    grid-template-rows:32px minmax(0, 1fr) 28px;
    gap:5px;
    padding:5px;
  }

  .price-screen__mobile-title{
    font-size:clamp(14px, 4.8vw, 20px);
  }

  .price-screen__mobile-footer{
    font-size:clamp(10px, 3.35vw, 14px);
  }

  .price-screen__mobile-body{
    gap:7px;
    padding:7px;
  }

  .price-screen__mobile-cards{
    gap:7px;
  }

  .price-screen__mobile-card{
    grid-template-rows:minmax(37px, auto) minmax(70px, 1fr);
  }

  .price-screen__mobile-card-head{
    width:calc(100% + 4px);
    min-width:calc(100% + 4px);
    margin-top:-2px;
    margin-right:-2px;
    margin-left:-2px;
    box-sizing:border-box;
    padding:5px 7px;
    gap:5px;
    border-radius:9px 9px 0 0;
  }

  .price-screen__mobile-pair-title{
    font-size:clamp(11px, 3.45vw, 15px);
  }

  .price-screen__mobile-card .price-screen__desktop-flag{
    width:22px;
    height:22px;
  }

  .price-screen__mobile-rate-cell{
    gap:2px;
    padding:6px 4px;
  }

  .price-screen__mobile-rate-cell > span{
    font-size:clamp(11px, 3vw, 14px);
  }

  .price-screen__mobile-rate-cell > strong{
    font-size:clamp(14px, 4.2vw, 19px);
  }

  .price-screen__mobile-brand{
    min-height:118px;
    padding:3px;
    border-radius:16px;
  }

  .price-screen__mobile-brand-inner{
    min-height:110px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding:6px;
    gap:6px;
  }

  .price-screen__mobile-brand-slot{
    border-radius:12px;
  }

  .price-screen__mobile-brand-slot-inner{
    width:calc(100% - 12px);
    height:calc(100% - 12px);
    padding:7px;
  }
}