/* ==========================================================================
   signup-embed.css — the /get-started-now signup form, embeddable anywhere.

   Loaded by resources/views/partials/signup-form.blade.php, which the
   [signup_form] shortcode renders into any DB page body. It exists because the
   form's styles live in theme/css/startfreestyles.css, and that file CANNOT be
   linked on an ordinary page: it ends with four page-chrome rules that would
   wreck the host page —

       footer { display: none; }
       .logo-area { background-color: #fff !important; }
       .SignupModalMenu { display: none !important; }
       @media (min-width:1025px) { #cssmenu>ul>li:last-child>a { display:none } }

   So this file gathers the form's rules instead, in three fenced parts:

     PART 1  copied from theme/css/main.css — rules that DO reach
             /get-started-now through the core bundle but are purged from every
             other template's bundle, because PurgeCSS only ever saw these
             selectors on that one page.
     PART 2  copied verbatim from startfreestyles.css, from the line ranges
             named inline, minus the page-chrome, carousel, rating-card and
             dashboard sections.
     PART 3  embed-specific — rules that exist nowhere else, either lifted out
             of the /get-started-now DB blob's inline <style> or written for
             sitting in a host page's column.

   Parts 1 and 2 are in that order deliberately: it is the order the real
   cascade puts them in, and at least one pair of equal-specificity rules
   depends on it (see PART 1's header).

   UPKEEP: if you restyle the form in startfreestyles.css or main.css, re-copy
   the changed rule into the matching part. Parts 1 and 2 are pure copies —
   put anything new in PART 3.
   ========================================================================== */

/* ==========================================================================
   PART 1 — rules from theme/css/main.css.
   ==========================================================================
   main.css IS in the shared core bundle, so these rules exist on
   /get-started-now. They do NOT reach an ordinary page: PurgeCSS builds one
   bundle per template and only ever saw these selectors on the get-started
   page, so bundle-page.content.*.css has no trace of them. Without this block
   the embedded form loses its two-column country/timezone row and its
   full-width submit button.

   They come FIRST because that is where they sit in the real cascade
   (bootstrap → main → theme-style → new-style, then startfreestyles last).
   Order matters at least once: `.get-started-form-new .form-control` and
   `.floating-label-group .form-control` in Part 2 have equal specificity and
   both set padding — the floating-label one has to win, as it does on
   /get-started-now.

   Verify after any purge rebuild with:
     grep -c cntry_timezone_main public/theme/css/bundle-page.content.*.css
   ========================================================================== */

.cntry_timezone_main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.get-started-form-cnt {
    grid-template-columns: 1fr;
    box-shadow: none;
    padding: 0;
    margin-top: 20px;
    background: #fff;
}

.get-started-form-new .form-control {
    padding: .6rem .75rem;
    border-radius: .1rem;
}

.get-started-form-new button.get-started-submit {
    padding: .4rem .75rem;
    border-radius: .1rem;
    font-size: 1.2em;
    width: 100%;
    margin-left: 0;
}

.get-started-form-new .no-card {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 0;
}

.get-started-form-new .no-card span {
    font-weight: 500;
}

/* ==========================================================================
   PART 2 — rules from theme/css/startfreestyles.css, copied verbatim.
   ==========================================================================
   One edit to the copies: seven selectors that startfreestyles.css writes bare
   (.get-started-submit and the .button__icon-* pair) are prefixed with
   .dl-signup-embed here. `.get-started-submit` is NOT form-specific — the
   site-wide CTA box in partials/get-started-cta.blade.php uses the same class —
   and this file's `background-color: var(--clr)` would blank that button's
   green on any page carrying both, since --clr is only defined on the embed.
   The prefix cannot flip the intended cascade: every rule that has to beat
   these is already more specific (.sf-modal-hero-section … / main.css's
   .get-started-form-new button.get-started-submit in PART 1).
   ========================================================================== */

/* ---- startfreestyles.css:68-88 — hero subtitle ('Already have an account?') ---- */
.sf-modal-hero-section .sf-hero-subtitle {
  font-size: 1rem;
  text-align: left;
  font-weight: 400;
  margin-top: 5px;
  color: #636c79;
  margin-bottom: 10px;
}

.sf-modal-hero-section .sf-hero-subtitle a {
  color: #14406f;
  font-size: 0.9rem;
  font-style: italic;
}

.sf-hero-subtitle svg {
  width: 12px!important;
  height: auto!important;
  margin-left: 1px;
}

/* ---- startfreestyles.css:93-238 — form box, fields, submit button, terms ---- */
.sf-modal-hero-section .sf-form-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-modal-hero-section .sf-form-box {
  background-color: white;
  border-radius: 10px;
  /* box-shadow: 0px 0px 153px 5px rgba(0, 0, 0, 0.14); */
  z-index: 1;
  width: 70%;
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
  margin: auto;
}


.sf-modal-hero-section .sf-form-box .form-control::placeholder {
  color: #a0aec0;
}

.sf-modal-hero-section .sf-form-box .form-control:focus {
  border-color: #d2e3bc;
  box-shadow: 0 0 0 1px rgb(124 176 61 / 51%);
}

.sf-modal-hero-section .sf-form-box .fa-eye {
  color: #77a517;
}

.sf-modal-hero-section .sf-form-box select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23718096' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}

.sf-modal-hero-section .sf-form-box .no-card {
  text-align: center;
  font-size: 0.78em !important;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: 5px;
  font-family: 'Inter', 'Inter Fallback', sans-serif !important;
}

.sf-modal-hero-section .sf-form-box .get-started-form-cnt {
  box-shadow: none;
  background: none;
  width: 99%;
  margin: auto;
  padding: 25px 0;
  grid-template-columns: 1fr;
  z-index: 2;
  position: relative;
}

.sf-modal-hero-section .get-started-form-new .form-control {
  border-radius: 7px;
}


.sf-modal-hero-section .get-started-form-new button.get-started-submit {
  border-radius: 7px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-weight: 400;
  justify-content: center;
  padding: 10px 0;
}



.dl-signup-embed .get-started-submit {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--clr);
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.dl-signup-embed .button__icon-wrapper {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  color: #ffffff;
  /* background-color: #fff; */
  border-radius: 20%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid white;
}

/* .button__icon-svg path {
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
} */

.dl-signup-embed .get-started-submit:hover {
  background-color: #00487a;
}

.dl-signup-embed .get-started-submit:hover .button__icon-wrapper {
  color: #fff;
}

.dl-signup-embed .button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.dl-signup-embed .get-started-submit:hover .button__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.dl-signup-embed .get-started-submit:hover .button__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}


.signup-terms-link {
  margin-bottom: 0;
  font-family: "Inter", "Inter Fallback", sans-serif !important;
}

/* ---- startfreestyles.css:721-731 — visually-hidden helper ---- */
.sf-form-container .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- startfreestyles.css:843-925 — floating labels, errors, submit loader ---- */
.floating-label-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.floating-label-group .form-control {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 18px 12px 10px;
  width: 100%;
  font-size: 1rem;
  background: #fff;
  height: fit-content;
  transition: all 0.2s ease;
}

.floating-label-group .sf-form-label {
  position: absolute;
  top: 36%;
  left: 12px;
  transform: translateY(-50%);
  color: #888;
  font-size: 1rem;
  background: #fff;
  height: fit-content;
  padding: 0 4px;
  transition: 0.2s ease all;
  pointer-events: none;
  z-index: 1;
}

.floating-label-group .form-control:focus~.sf-form-label,
.floating-label-group .form-control:not(:placeholder-shown)~.sf-form-label,
.floating-label-group .form-control:invalid~.sf-form-label,
.floating-label-group .form-control.error~.sf-form-label {
  top: 0 !important;
  left: 10px !important;
  font-size: 0.85rem;
  color: #495057;
  opacity: 1;
}

#user-register-form-popup label.error {
  margin-top: 4px;
  text-align: right;
}


#user-register-form-popup label#country-error {
  text-align: left;
}


/* ==========================================================================
   EDIT - Submit button loader image
   ========================================================================== */


#popupsubmit img#loading-image {
  display: none;
  width: 20px;
  margin-left: 0px;
  margin-bottom: 0;
}

#popupsubmit.SubmitDisable img#loading-image {
  display: block;
}

#popupsubmit.SubmitDisable .button-text,
#popupsubmit.SubmitDisable .button__icon-wrapper {
  display: none;
}

.get-started-form-new input:autofill,
.get-started-form-new input:-webkit-autofill,
.get-started-form-new input:-webkit-autofill:hover, 
.get-started-form-new input:-webkit-autofill:focus, 
.get-started-form-new input:-webkit-autofill:active {
    -webkit-text-fill-color: #000; 
    color: #000; 
    box-shadow: 0 0 0 1000px #ffffff inset; 
	transition: background-color 5000s ease-in-out 0s;}

/* ==========================================================================
   PART 3 — EMBED-SPECIFIC. Nothing below this fence is a copy of anything.
   ==========================================================================

   Two groups:
   1. Rules the form needs that live in the /get-started-now DB blob's inline
      <style> (Content id 35) rather than in a stylesheet, so a copy has to
      live here for the form to work anywhere else.
   2. Overrides for sitting in a host page's column instead of owning a
      full-height hero of its own.
   ========================================================================== */

/* --- 1. Copied from the inline <style> of Content id 35 (/get-started-now) --- */

.dl-signup-embed .sf-field-error {
    display: block;
    color: #e53e3e;
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
}

.dl-signup-embed .sf-input-error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.15) !important;
}

.dl-signup-embed #loading-image {
    display: none;
}

.dl-signup-embed #popupsubmit.loading #loading-image {
    display: inline-block;
}

.dl-signup-embed #popupsubmit.loading .button__icon-wrapper {
    display: none;
}

/* Password show/hide eye button — centred vertically inside the field (the
   theme's default top offset drops it to the bottom edge) with room reserved
   so the password text never sits under the icon. */
.dl-signup-embed .password_field_pop { position: relative; }
.dl-signup-embed .password_field_pop input.form-control { padding-right: 44px; }
.dl-signup-embed .password_field_pop .eye-icon {
    position: absolute;
    top: 24px;               /* input is 48px tall → 24px is its vertical centre */
    right: 12px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #77A517;          /* Desklog green, matches the field accents */
    cursor: pointer;
    line-height: 1;
    z-index: 3;
}
.dl-signup-embed .password_field_pop .eye-icon:hover { color: #5f8412; }
.dl-signup-embed .password_field_pop .eye-icon i { font-size: 16px; line-height: 1; pointer-events: none; }

/* --- 2. Host-column overrides --- */

/* The submit button's `background-color: var(--clr)` (startfreestyles.css:178)
   references a custom property that is defined NOWHERE in the theme. An unset
   var makes the declaration invalid at computed-value time, so on
   /get-started-now the green actually comes from main.css's earlier
   `.get-started-submit{background:#77a507}`. Defining --clr here makes the
   embedded button's colour deterministic instead of a cascade accident. */
.dl-signup-embed { --clr: #77a507; }

/* The form is a real interactive element, not the decorative <img> it replaces:
   keep it above any hero overlay even on a host page whose row lacks a
   stacking context of its own (employee-productivity-software's .header-section
   already sets z-index:2 — this is for every other page). */
.dl-signup-embed {
    position: relative;
    z-index: 2;
    text-align: left;   /* .header-dashboard sets text-align:end for its image */
}

/* startfreestyles.css:99 boxes the form at 70% because it owns a half-screen
   hero. In a host column it should fill the column it was given. */
.dl-signup-embed .sf-form-box {
    width: 100%;
    max-width: 560px;
    padding: 10px 20px;
}

/* Belt and braces: `form #popupform{display:none}` lives in main.css, and
   PurgeCSS drops it from every bundle except get-started's (the only crawled
   page that used the id). The partial also ships the input as type="hidden",
   so this is the second of two guards, not the only one. */
.dl-signup-embed #popupform { display: none; }

@media (max-width: 991px) {
    /* Stacked under the hero copy — centre it and let it breathe. */
    .dl-signup-embed .sf-form-box {
        margin-left: auto;
        margin-right: auto;
    }
}