/* Slide-in "Start Free Trial" popup used by cpe-firm-plan-detail.blade.php.
   Ported from the mycpe_pricing_comparison mockup's .ts-panel/.ts-overlay design;
   position changed from absolute->fixed since this page has no positioned wrapper card. */

/* Disabled Continue CTA, matching free-trial-second-form.blade.php's #continueBtn:disabled
   pattern - stays greyed out until Section 1's required fields all validate. */
#continueBtn_popup:disabled { opacity: 0.5; cursor: not-allowed; }
#continueBtn_popup { transition: opacity 0.3s ease; }

.ts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    /* Below Bootstrap's own modal system (.modal-backdrop: 1050, .modal: 1055) so that
       the Terms/Privacy modal opened from the checkbox (.firm_checkbox change handler in
       firm_terms_and_condition_sign_up_js.blade.php) renders on top of this popup instead
       of getting trapped behind it - still comfortably above normal page content/header. */
    z-index: 1030;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.ts-overlay.open { opacity: 1; pointer-events: auto; }

.ts-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* width: 460px; */
    width: 520px;
    max-width: 90%;
    background: #FFFFFF;
    box-shadow: -8px 0 32px rgba(16, 24, 40, 0.14);
    padding: 26px 26px 24px;
    transform: translateX(100%);
    transition: transform 0.32s ease;
    z-index: 1035;
    overflow-y: auto;
}
.ts-panel.open { transform: translateX(0); }

.ts-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
/* Title text styling now comes from the site-wide h3.Get_started_title rule
   (team-landing-new*.css) so the popup heading matches the real form's heading exactly. */
.ts-panel-header h3.Get_started_title { margin-bottom: 0; }
.ts-panel-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #98A2B3;
    font-size: 16px;
    font-weight: 700;
    background: transparent;
    border: none;
}
.ts-panel-close:hover { background: #F2F4F7; color: #475467; }

.ts-panel-desc {
    font-size: 12.5px;
    color: #667085;
    margin-bottom: 20px;
    line-height: 1.5;
}

.ts-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ts-input {
    padding: 10px 12px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #101828;
    outline: none;
    width: 100%;
    margin-bottom: 0;
}
.ts-input:focus { border-color: #3A58EF; box-shadow: 0 0 0 3px rgba(58, 88, 239, 0.12); }
.ts-input::placeholder { color: #98A2B3; }

.ts-select {
    padding: 10px 12px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #101828;
    outline: none;
    width: 100%;
    margin-bottom: 0;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.ts-select:focus { border-color: #3A58EF; box-shadow: 0 0 0 3px rgba(58, 88, 239, 0.12); }
.ts-select.placeholder { color: #98A2B3; }

.ts-plan-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ts-plan-summary-label { font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.ts-plan-summary-box {
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #101828;
}

.ts-panel-submit {
    margin-top: 18px;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 4px;
    background: #3A58EF;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ts-panel-submit:hover { background: #314BD0; }

/* Flex wrapper used to lay out the real signup form (free-trial-second-form.blade.php's
   Section 1 / Section 2 fields) inside the narrow 380px panel, replacing that form's
   Bootstrap row/col-md-* grid, which is sized for a much wider column. */
.popup-form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.popup-form-row > div,
.popup-form-row > .form-floating,
.popup-form-row > button {
    flex: 1;
    min-width: 0;
}
.popup-form-row-3 > div,
.popup-form-row-3 > .form-floating {
    flex: 1 1 0;
}
.popup-form-full { margin-bottom: 10px; }

/* The site-wide bootstrap-select rule (style.css: ".bootstrap-select .dropdown-menu li a
   {padding-left:45px}") reserves left space for a checkmark icon shown on multi-select
   dropdowns (like the Qualifications filter it was copied from). The popup's Plan/Country/
   State/City dropdowns are all single-select with no checkmark, so that padding just left a
   gap before the text - removed here, scoped to the popup only. */
.ts-panel .bootstrap-select .dropdown-menu li a {
    padding-left: 12px;
}

/* Scoped to #team_free_signup_popup (not ".filter-selection") so this covers every
   bootstrap-select dropdown in the popup - Plan/Country/State/City (wrapped in
   ".form-floating.filter-selection") and "No of Users" (wrapped in plain ".form-floating",
   so the page's own ".filter-selection .bootstrap-select>.dropdown-toggle" rule never
   reached it at all). That page rule sizes dropdown buttons by padding alone (~44px), so it
   never reliably matches the popup's text/price boxes, which get an explicit
   "height: calc(3rem + border*2)" from the site's ".form-floating>.form-control,
   .form-select" rule (cpe-for-teams-page.css) - that rule doesn't reach this button because
   bootstrap-select renders it as a <button class="dropdown-toggle">, not a `.form-control`/
   `.form-select` element. Copying that exact same calc() here (rather than estimating a
   padding value) guarantees an identical height instead of an approximate one.
   That explicit height then made bootstrap-select's own ".filter-option{height:100%;
   overflow:hidden}" resolve to the button's full height, so its text (plain top-aligned
   content, not itself flex-centered) rendered hugging the top instead of centered - fixed by
   making filter-option/-inner/-inner-inner size to their own content and centering that
   content explicitly, instead of stretching to fill and clipping. */
#team_free_signup_popup .bootstrap-select > .dropdown-toggle {
    height: calc(3rem + calc(var(--bs-border-width) * 2));
    min-height: calc(3rem + calc(var(--bs-border-width) * 2));
    padding-top: 0;
    padding-bottom: 0;
}
#team_free_signup_popup .bootstrap-select > .dropdown-toggle .filter-option {
    height: auto;
    display: flex;
    align-items: center;
    overflow: visible;
}
#team_free_signup_popup .bootstrap-select > .dropdown-toggle .filter-option-inner,
#team_free_signup_popup .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    overflow: visible;
}


/* Back/Continue buttons: Bootstrap's "w-100" (width:100% !important) fights flex sizing
   in a side-by-side row, so these buttons are sized purely via flex-grow instead - see
   the flex:2 inline style on #proceed_to_pay_popup for the 1:2 Back/Submit ratio. */
.popup-form-row > button.Back_Btn,
.popup-form-row > button.Fill_Btn {
    width: auto;
    white-space: nowrap;
}

/* Password/confirm-password show-hide eye icons: the site-wide rule that positions these
   is scoped to ".team_free_signup .form-floating a img" (team-landing-new*.css). The popup
   form also carries that class, but this duplicate keeps the icon positioned correctly even
   if this partial is ever reused somewhere that class/CSS isn't loaded. */
.team_free_signup_popup .form-floating a img,
#team_free_signup_popup .form-floating a img {
    position: absolute;
    top: 13px;
    right: 12px;
}
#team_free_signup_popup .form-floating { position: relative; }

/* Read-only "Annual Subscription" display (#annual_subscription_display_popup /
   #annual_subscription_display_2_popup) is a <div>, not an <input> - a real form-control
   can't render the amount/suffix in two different colors/weights within one value. Keeps
   the same .form-control box (border/padding/height) via the shared class, just adds the
   two-tone text treatment, matching the ".team_annual_subscription h6/span" price styling
   used elsewhere on this page. */
.popup-price-display {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}
.popup-price-display-amount {
    color: #3A58EF;
    font-weight: 600;
}
.popup-price-display-suffix {
    color: #5D667B;
    font-weight: 400;
}

/* "How many seats..." fields (#form-section-1-popup): Bootstrap's default .form-floating
   overlays the label on top of the input/select and floats it up on focus/value - that
   works for short one-word labels but these are full questions, so the floated-up label
   wrapped and collided with the field text. Overridden here to a plain static label
   stacked above the field instead, matching the rest of the popup's stacked-label look. */
.ts-panel .popup-form-row.popup-seats-row {
    align-items: flex-start;
}
.ts-panel .popup-static-label {
    display: flex;
    flex-direction: column;
}
.ts-panel .popup-static-label > label {
    order: -1;
    position: static;
    display: block;
    height: auto;
    padding: 0 0 6px;
    font-size: 12px !important;
    font-weight: 500;
    color: #344054;
    opacity: 1 !important;
    transform: none !important;
    white-space: normal;
    line-height: 1.35;
    pointer-events: auto;
}
/* !important needed: Bootstrap's own ".form-floating>.form-control:focus,
   .form-floating>.form-control:not(:placeholder-shown)" rule matches these same
   elements at equal specificity and re-applies the floating-label padding-top
   (1.625rem) the instant the field is focused/typed into, growing the box and
   shifting the row below it - without !important that rule wins whenever its
   stylesheet happens to load after this one. */
.ts-panel .popup-static-label > .form-control,
.ts-panel .popup-static-label > .form-select,
.ts-panel .popup-static-label > .form-control:focus,
.ts-panel .popup-static-label > .form-control:not(:placeholder-shown) {
    height: auto !important;
    padding: 0.6rem 0.75rem !important;
}
.ts-panel .popup-static-label > .form-control::placeholder {
    color: #98A2B3 !important;
}

@media (max-width: 480px) {
    .ts-input-row { grid-template-columns: 1fr; }
    .ts-plan-summary { grid-template-columns: 1fr; }
    .ts-panel { width: 100%; }
    .popup-form-row,
    .popup-form-row-3 { flex-wrap: wrap; }
    .popup-form-row > div,
    .popup-form-row-3 > div { flex: 1 1 100%; }
}