/* Compact, polished login modal layout for Tormami.
 * This stylesheet loads after the base login modal styles and intentionally
 * owns the final sizing/composition of the public sign-in modal.
 */

/* Keep the modal above the sticky marketplace header. */
.tml-modal{
  z-index:2147483647!important;
  isolation:isolate;
  padding:20px!important;
}

.tml-backdrop{
  z-index:0!important;
  background:rgba(7,19,34,.60)!important;
  backdrop-filter:blur(10px) saturate(112%)!important;
}

/* Desktop modal: intentionally much smaller than the viewport. */
.tml-dialog{
  z-index:2!important;
  width:min(940px,calc(100vw - 40px))!important;
  max-height:min(640px,calc(100dvh - 40px))!important;
  grid-template-columns:minmax(0,.98fr) minmax(420px,1.02fr)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 34px 90px rgba(5,18,34,.28)!important;
}

.tml-close{
  top:13px!important;
  right:13px!important;
  width:36px!important;
  height:36px!important;
  box-shadow:0 7px 20px rgba(16,35,65,.08)!important;
}

.tml-close svg{width:16px!important;height:16px!important}

/* --------------------------------------------------------------------------
   Left visual panel
   The photo now uses a proper landscape frame across the panel instead of a
   narrow/right-aligned crop. Feature cards stay above it and never overlap.
   -------------------------------------------------------------------------- */
.tml-visual{
  min-height:610px!important;
  padding:30px 28px 24px!important;
  overflow:hidden!important;
}

.tml-kicker{
  min-height:25px!important;
  padding:0 10px!important;
  font-size:8.5px!important;
  letter-spacing:.095em!important;
}

.tml-visual>h2{
  max-width:390px!important;
  margin:12px 0 7px!important;
  font-size:clamp(36px,2.65vw,43px)!important;
  line-height:.99!important;
  letter-spacing:-.052em!important;
}

.tml-visual>p:not(.tml-handwritten){
  max-width:395px!important;
  font-size:12px!important;
  line-height:1.5!important;
}

.tml-benefits{
  max-width:none!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  margin-top:14px!important;
}

.tml-benefits>div{
  min-height:82px!important;
  padding:9px 9px 8px!important;
  border-radius:12px!important;
}

.tml-benefit-icon{
  width:30px!important;
  height:30px!important;
  margin-bottom:5px!important;
  border-radius:9px!important;
}

.tml-benefit-icon svg{width:15px!important;height:15px!important}
.tml-benefits b{font-size:9.5px!important;line-height:1.2!important}
.tml-benefits small{margin-top:2px!important;font-size:7.6px!important;line-height:1.24!important}

/* Proper framed marketplace image — wide, balanced and fully contained. */
.tml-visual__image-wrap{
  left:28px!important;
  right:28px!important;
  bottom:57px!important;
  width:auto!important;
  height:190px!important;
  display:block!important;
  overflow:hidden!important;
  border:1px solid rgba(16,39,75,.08)!important;
  border-radius:18px!important;
  background:#eaf1f7!important;
  box-shadow:0 15px 34px rgba(16,35,65,.12)!important;
}

.tml-visual__image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 38%!important;
  filter:none!important;
  transform:none!important;
}

/* Floating callouts sit inside the photo frame. */
.tml-floating-card{
  padding:7px 9px!important;
  gap:7px!important;
  border-radius:10px!important;
  box-shadow:0 8px 20px rgba(16,35,65,.12)!important;
}

.tml-floating-card--top{
  top:10px!important;
  left:10px!important;
  transform:rotate(-1.5deg)!important;
}

.tml-floating-card--bottom{
  right:10px!important;
  bottom:10px!important;
  transform:rotate(1deg)!important;
}

.tml-floating-card--top span{font-size:7.6px!important}
.tml-floating-card--top strong{font-size:9.5px!important}
.tml-floating-card--bottom>span{font-size:17px!important}
.tml-floating-card--bottom strong{font-size:9.4px!important}
.tml-floating-card--bottom small{font-size:7.3px!important}

.tml-handwritten{
  left:28px!important;
  bottom:16px!important;
  max-width:210px!important;
  font-size:17px!important;
  line-height:1.02!important;
  transform:rotate(-3deg)!important;
}

/* --------------------------------------------------------------------------
   Right sign-in panel
   Reduced type, controls and whitespace keep the form calm and compact.
   -------------------------------------------------------------------------- */
.tml-panel{
  min-height:610px!important;
  padding:42px 34px 28px!important;
}

.tml-panel__head{
  gap:10px!important;
  margin-bottom:17px!important;
  padding-right:24px!important;
}

.tml-panel__icon{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
  border-radius:11px!important;
}

.tml-panel__icon svg{width:18px!important;height:18px!important}
.tml-panel__head h2{font-size:28px!important;line-height:1.05!important}
.tml-panel__head p{margin-top:5px!important;font-size:11.5px!important;line-height:1.42!important}

.tml-alert{
  margin:-4px 0 12px!important;
  padding:9px 11px!important;
  font-size:10.5px!important;
}

.tml-form{gap:11px!important}
.tml-field{gap:5px!important;margin:0!important}
.tml-field>span{font-size:10px!important}
.tml-control{height:48px!important;border-radius:10px!important}
.tml-control>svg{width:17px!important;height:17px!important;margin-left:13px!important}
.tml-control input{font-size:11px!important;padding-left:10px!important;padding-right:42px!important}
.tml-password-toggle{right:6px!important;width:34px!important;height:34px!important}
.tml-password-toggle svg{width:17px!important;height:17px!important}

.tml-form-row{gap:10px!important}
.tml-remember,.tml-link{font-size:9.8px!important}
.tml-remember{gap:6px!important}
.tml-remember>span{width:16px!important;height:16px!important;border-radius:4px!important}

.tml-submit{
  height:48px!important;
  border-radius:10px!important;
  font-size:11px!important;
  box-shadow:0 10px 24px rgba(255,90,10,.20)!important;
}

.tml-submit svg{width:16px!important;height:16px!important}
.tml-divider{margin:12px 0!important;gap:10px!important}
.tml-divider span{font-size:9.5px!important}

.tml-create-account{
  height:44px!important;
  border-radius:10px!important;
  font-size:10px!important;
}

.tml-create-account svg{width:18px!important;height:18px!important}
.tml-security{margin-top:12px!important;font-size:8.8px!important;gap:6px!important}
.tml-security svg{width:15px!important;height:15px!important}

/* Medium desktop/tablet keeps two columns while using the available width. */
@media(max-width:1050px) and (min-width:881px){
  .tml-modal{padding:16px!important}
  .tml-dialog{
    width:min(900px,calc(100vw - 32px))!important;
    max-height:min(620px,calc(100dvh - 32px))!important;
    grid-template-columns:minmax(0,.96fr) minmax(390px,1.04fr)!important;
  }
  .tml-visual,.tml-panel{min-height:580px!important}
  .tml-visual{padding:28px 24px 22px!important}
  .tml-visual>h2{font-size:38px!important}
  .tml-visual>p:not(.tml-handwritten){font-size:11.5px!important}
  .tml-benefits{gap:6px!important;margin-top:12px!important}
  .tml-benefits>div{min-height:78px!important;padding:8px!important}
  .tml-visual__image-wrap{
    left:24px!important;
    right:24px!important;
    bottom:52px!important;
    height:175px!important;
  }
  .tml-handwritten{left:24px!important;bottom:14px!important;font-size:16px!important}
  .tml-panel{padding:39px 29px 26px!important}
}

/* On smaller screens the visual panel is removed so login stays quick/useful. */
@media(max-width:880px){
  .tml-modal{padding:12px!important}
  .tml-dialog{
    width:min(520px,calc(100vw - 24px))!important;
    max-height:calc(100dvh - 24px)!important;
    grid-template-columns:1fr!important;
    overflow:auto!important;
    border-radius:22px!important;
  }
  .tml-visual{display:none!important}
  .tml-panel{min-height:0!important;padding:46px 28px 27px!important}
  .tml-panel__head{padding-right:32px!important}
  .tml-panel__head h2{font-size:28px!important}
  .tml-close{top:10px!important;right:10px!important}
}

@media(max-width:520px){
  .tml-modal{padding:6px!important}
  .tml-dialog{
    width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    border-radius:18px!important;
  }
  .tml-panel{padding:42px 16px 21px!important}
  .tml-panel__head{gap:8px!important;margin-bottom:16px!important}
  .tml-panel__icon{width:36px!important;height:36px!important;flex-basis:36px!important}
  .tml-panel__head h2{font-size:24px!important}
  .tml-panel__head p{font-size:10.8px!important}
  .tml-control{height:48px!important}
  .tml-submit{height:48px!important}
  .tml-create-account{height:44px!important}
  .tml-security{font-size:8.5px!important;text-align:center!important}
}

/* Short laptop displays: preserve all controls without pushing off-screen. */
@media(max-height:690px) and (min-width:881px){
  .tml-dialog{max-height:calc(100dvh - 22px)!important}
  .tml-visual,.tml-panel{min-height:535px!important}
  .tml-visual{padding-top:23px!important}
  .tml-panel{padding-top:32px!important;padding-bottom:21px!important}
  .tml-visual>h2{font-size:35px!important}
  .tml-visual>p:not(.tml-handwritten){font-size:10.8px!important}
  .tml-benefits{margin-top:10px!important}
  .tml-benefits>div{min-height:70px!important}
  .tml-visual__image-wrap{height:158px!important;bottom:48px!important}
  .tml-panel__head{margin-bottom:13px!important}
  .tml-form{gap:9px!important}
  .tml-control,.tml-submit{height:44px!important}
  .tml-create-account{height:41px!important}
  .tml-divider{margin:9px 0!important}
}