/* Top order action and collapsible CRM section for RabotaLive24 */

.priority-workers-actions{
  display:flex;
  justify-content:center;
  margin:-2px 0 20px;
}

.priority-workers-order-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:290px;
  min-height:54px;
  padding:0 24px;
  border:1px solid #15803d;
  border-radius:17px;
  color:#fff !important;
  background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);
  box-shadow:0 16px 34px rgba(22,163,74,.26),inset 0 1px 0 rgba(255,255,255,.24);
  font-size:16px;
  font-weight:900;
  line-height:1.15;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.priority-workers-order-btn:hover,
.priority-workers-order-btn:focus-visible{
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 21px 42px rgba(22,163,74,.34),inset 0 1px 0 rgba(255,255,255,.28);
  filter:brightness(1.03);
  outline:none;
}

.priority-workers-order-btn:active{
  transform:translateY(0);
}

.crm-collapsible-section{
  padding:38px 0;
  background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%);
  border-top:1px solid rgba(37,99,235,.08);
  border-bottom:1px solid rgba(37,99,235,.08);
}

.crm-collapse-toggle{
  width:100%;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 48px;
  align-items:center;
  gap:16px;
  padding:19px 20px;
  border:1px solid rgba(191,219,254,.20);
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(720px 220px at 0 0,rgba(96,165,250,.22),transparent 62%),
    linear-gradient(180deg,#183d67 0%,#102b4e 100%);
  box-shadow:0 22px 52px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.10);
  text-align:left;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.crm-collapse-toggle:hover,
.crm-collapse-toggle:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(147,197,253,.42);
  box-shadow:0 28px 62px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.14);
  outline:none;
}

.crm-collapse-icon{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:19px;
  color:#0b2a49;
  background:linear-gradient(135deg,#dbeafe 0%,#93c5fd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 26px rgba(37,99,235,.22);
  font-size:24px;
}

.crm-collapse-copy{
  min-width:0;
  display:grid;
  gap:4px;
}

.crm-collapse-eyebrow{
  color:rgba(191,219,254,.86);
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.crm-collapse-copy strong{
  color:#fff;
  font-size:clamp(25px,3vw,34px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.crm-collapse-copy small{
  color:rgba(226,232,240,.84);
  font-size:14px;
  font-weight:650;
  line-height:1.45;
}

.crm-collapse-chevron{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:17px;
  transition:transform .38s cubic-bezier(.22,.61,.36,1),background .2s ease;
}

.crm-collapsible-section.is-open .crm-collapse-chevron{
  transform:rotate(180deg);
  background:rgba(255,255,255,.14);
}

.crm-collapse-body{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    grid-template-rows .46s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease,
    margin-top .46s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .46s;
}

.crm-collapsible-section.is-open .crm-collapse-body{
  grid-template-rows:1fr;
  margin-top:22px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    grid-template-rows .46s cubic-bezier(.22,.61,.36,1),
    opacity .32s ease .08s,
    margin-top .46s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}

.crm-collapse-inner{
  min-height:0;
  overflow:hidden;
}

.crm-collapse-panel{
  padding:28px;
  border:1px solid rgba(37,99,235,.12);
  border-radius:28px;
  background:linear-gradient(180deg,#fff 0%,#f7faff 100%);
  box-shadow:0 20px 48px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.9);
}

.crm-collapse-intro{
  max-width:940px;
  margin:0 auto 24px;
  color:#526b88;
  font-size:16px;
  font-weight:650;
  line-height:1.72;
  text-align:center;
}

/* CRM is expanded as one complete block. Its inner cards remain fully visible. */
.crm-collapsible-section .module-card-toggle{
  display:none !important;
}

.crm-collapsible-section .module-card{
  min-height:286px !important;
  height:100% !important;
  transform:none !important;
}

.crm-collapsible-section .module-card .module-content{
  min-height:286px !important;
  padding:24px !important;
}

.crm-collapsible-section .module-card .module-content h3{
  font-size:25px !important;
}

.crm-collapsible-section .module-card .module-badge{
  opacity:1 !important;
  max-height:48px !important;
  margin-bottom:10px !important;
  transform:none !important;
  pointer-events:auto !important;
}

.crm-collapsible-section .module-card .module-content > p{
  opacity:1 !important;
  max-height:220px !important;
  margin-top:12px !important;
  transform:none !important;
  pointer-events:auto !important;
  font-size:16px !important;
  line-height:1.55 !important;
}

.crm-collapsible-section .module-card .module-button{
  opacity:1 !important;
  max-height:70px !important;
  margin-top:16px !important;
  transform:none !important;
  pointer-events:auto !important;
  font-size:15px !important;
}

@media(max-width:767px){
  .priority-workers-section{
    padding-top:14px !important;
  }

  .priority-workers-actions{
    margin:0 0 14px;
  }

  .priority-workers-order-btn{
    width:100%;
    min-width:0;
    min-height:58px;
    border-radius:16px;
    padding:0 18px;
    font-size:17px;
  }

  .crm-collapsible-section{
    padding:22px 0;
  }

  .crm-collapse-toggle{
    grid-template-columns:46px minmax(0,1fr) 40px;
    gap:11px;
    padding:15px 14px;
    border-radius:21px;
  }

  .crm-collapse-icon{
    width:46px;
    height:46px;
    border-radius:15px;
    font-size:19px;
  }

  .crm-collapse-copy strong{
    font-size:23px;
  }

  .crm-collapse-copy small{
    font-size:12px;
    line-height:1.35;
  }

  .crm-collapse-chevron{
    width:38px;
    height:38px;
    border-radius:13px;
  }

  .crm-collapsible-section.is-open .crm-collapse-body{
    margin-top:14px;
  }

  .crm-collapse-panel{
    padding:16px;
    border-radius:22px;
  }

  .crm-collapse-intro{
    margin-bottom:16px;
    font-size:14px;
    line-height:1.6;
    text-align:left;
  }

  .crm-collapsible-section .module-card{
    min-height:236px !important;
  }

  .crm-collapsible-section .module-card .module-content{
    min-height:236px !important;
    padding:19px !important;
  }

  .crm-collapsible-section .module-card .module-content h3{
    font-size:23px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .priority-workers-order-btn,
  .crm-collapse-toggle,
  .crm-collapse-chevron,
  .crm-collapse-body{
    transition:none !important;
  }
}




/* Restore the compact centered priority cards shown in the approved layout. */
.priority-workers-section .container{
  max-width:1180px !important;
}

.priority-workers-section .module-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  width:min(100%,1180px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:10px !important;
  align-items:stretch !important;
}

.priority-workers-section .module-card{
  width:100% !important;
  min-width:0 !important;
  min-height:112px !important;
  height:auto !important;
  border-radius:18px !important;
}

.priority-workers-section .module-card .module-content{
  min-height:112px !important;
  height:auto !important;
  padding:14px 16px !important;
}

.priority-workers-section .module-card .module-content h3{
  font-size:22px !important;
  line-height:1.08 !important;
}

@media (min-width:768px) and (max-width:1100px){
  .priority-workers-section .module-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:min(100%,900px) !important;
  }
}

@media (max-width:767px){
  .priority-workers-section .module-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .priority-workers-section .module-card,
  .priority-workers-section .module-card .module-content{
    min-height:88px !important;
    height:auto !important;
  }

  .priority-workers-section .module-card .module-content{
    padding:14px 58px 14px 15px !important;
  }
}

/* Desktop hero: use the full useful viewport width and separate both panels. */
@media (min-width: 1101px){
  .conversion-main-page > .container{
    width:min(1480px, calc(100% - 56px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .conversion-main-page .conversion-shell{
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1.72fr) minmax(360px, .68fr) !important;
    gap:clamp(44px, 5.5vw, 104px) !important;
    align-items:stretch !important;
    justify-content:space-between !important;
  }

  .conversion-main-page .conversion-main-card,
  .conversion-main-page .conversion-offer-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .conversion-main-page .conversion-offer-card{
    justify-self:end !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px){
  .conversion-main-page > .container{
    width:min(100% - 36px, 1080px) !important;
    max-width:none !important;
  }

  .conversion-main-page .conversion-shell{
    grid-template-columns:minmax(0, 1.45fr) minmax(310px, .75fr) !important;
    gap:28px !important;
    align-items:stretch !important;
  }

  .conversion-main-page .conversion-main-card,
  .conversion-main-page .conversion-offer-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
}


/* Final fix: priority cards stay compact, but can expand on desktop hover and mobile arrow. */
.priority-workers-section .module-card.is-card-open,
.priority-workers-section .module-card:focus-visible{
  min-height:232px !important;
  height:auto !important;
}

.priority-workers-section .module-card.is-card-open .module-content,
.priority-workers-section .module-card:focus-visible .module-content{
  min-height:232px !important;
  height:auto !important;
  padding:20px !important;
}

@media (hover:hover) and (pointer:fine){
  .priority-workers-section .module-card:hover{
    min-height:232px !important;
    height:auto !important;
  }

  .priority-workers-section .module-card:hover .module-content{
    min-height:232px !important;
    height:auto !important;
    padding:20px !important;
  }
}

@media (max-width:900px){
  .priority-workers-section .module-card.is-card-open{
    min-height:216px !important;
    height:auto !important;
  }

  .priority-workers-section .module-card.is-card-open .module-content{
    min-height:216px !important;
    height:auto !important;
    padding:18px 58px 18px 16px !important;
  }
}


/* FINAL: five priority directions in one desktop row. */
@media (min-width:1000px){
  .priority-workers-section > .container{
    width:min(1480px,calc(100vw - 48px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .priority-workers-section .module-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-auto-flow:column !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    gap:14px !important;
    align-items:stretch !important;
  }

  .priority-workers-section .module-grid > *,
  .priority-workers-section .module-card-shell,
  .priority-workers-section .module-card{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  .priority-workers-section .module-card .module-content h3{
    font-size:clamp(19px,1.35vw,23px) !important;
    line-height:1.08 !important;
    overflow-wrap:anywhere;
  }
}

@media (min-width:768px) and (max-width:999px){
  .priority-workers-section .module-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
  }
}
