/*
 * Laravel-specific style overrides for the landing frontend.
 *
 * Files under public/landing/assets/ are copied as-is from the frontend repo
 * (masna3y-pro-html) and must not be edited, so they can be replaced on every
 * frontend update. Put every style change here instead. Loaded right after
 * assets/css/style.css, so rules with the same selector win.
 */

/* ================================
     TRIAL FORM PHONE COUNTRY CODE
   Uses the dashboard countrySelect plugin (public/custom/countryphone), which
   wraps the input in .country-select. style.css styles every .form-control in
   a .form-group (border, height, background) with !important, so the plugin
   input needs !important overrides to sit inside the phone field cleanly.
   Layout: [flag ▾ +20 | number ...] at the field start in LTR, end in RTL.
================================= */

.phone-input .country-select {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: 14px !important;
  right: auto !important;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center;
  width: 100px !important;
  min-width: 100px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-inline-start: 1px solid #dcdfdf !important;
  z-index: 11;
}

html[dir=ltr] .phone-input .country-select {
  left: auto !important;
  right: 14px !important;
}

/* The "+" in front of the dial code (the input holds digits only, e.g. 20). */
.phone-input .country-select::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 49px;
  transform: translateY(-50%);
  color: var(--gray-color);
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}

.phone-input .country-select.inside input.country-input-all {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 4px 0 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  direction: ltr !important;
  text-align: left !important;
  color: var(--gray-color);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.phone-input .country-select .flag-dropdown {
  top: 0;
  bottom: 0;
  left: 0 !important;
  right: auto !important;
  padding: 0;
}

.phone-input .country-select .selected-flag {
  width: 46px;
  height: 100%;
  padding: 0 0 0 8px;
  background: transparent !important;
}

.phone-input .country-select .selected-flag .flag {
  left: 10px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.phone-input .country-select .selected-flag .arrow {
  left: 34px;
}

.phone-input .country-select .country-list {
  top: calc(100% + 10px);
  width: 290px !important;
  min-width: 290px !important;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #ebeded;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  direction: ltr;
  text-align: left;
  white-space: nowrap;
}

html[dir=rtl] .phone-input .country-select .country-list {
  left: -14px;
  right: auto;
}

html[dir=ltr] .phone-input .country-select .country-list {
  left: auto;
  right: -14px;
}

.phone-input .country-select .country-list .country {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}

.phone-input .country-select .country-list .country.highlight,
.phone-input .country-select .country-list .country:hover {
  background-color: #fbf1ec;
}

.phone-input .country-select .country-list .country-search-wrapper {
  padding: 4px 10px 8px;
}

.phone-input .country-select .country-list .country-search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ebeded;
  border-radius: 10px;
  background: #f7f7f7;
  font-size: 14px;
}

.phone-input input[name="phone"] {
  padding-inline-end: 128px !important;
}

/* ================================
     TRIAL FORM FIELD ERRORS
   Slots: <span class="field-error" data-error-for="field"> under each field,
   filled by the server (no-JS) or by custom.js (AJAX). The field before a
   filled slot gets .has-error.
================================= */

.form-contain {
  --error-color: #d93025;
  --error-soft: #fdecea;
}

.form-contain .field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -12px 0 16px;
  padding-inline: 6px;
  color: var(--error-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  animation: field-error-in 0.2s ease-out;
}

.form-contain .field-error::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  line-height: 1.5;
  flex-shrink: 0;
}

.form-contain .field-error:empty {
  display: none;
}

/* Selects (country, activity) have no bottom margin of their own except mb-4. */
.form-contain .custom-select-field + .field-error {
  margin: 8px 0 0;
}

.form-contain .custom-select-field.mb-4 + .field-error {
  margin: -16px 0 16px;
}

/* Text inputs */
.form-contain .has-error .form-control {
  border-color: var(--error-color) !important;
}

/* Custom selects (country, activity) */
.form-contain .custom-select-field.has-error .custom-select-trigger {
  border-color: var(--error-color) !important;
}

/* Radio / checkbox groups (job title, challenges) */
.contact-us .form-contain .job-options.has-error .job-option span {
  border-color: var(--error-color);
}

.form-contain .challenges-grid.has-error .challenge-item .checkmark {
  border-color: var(--error-color);
}

/* Cloudflare Turnstile widget */
.form-contain .trial-captcha {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.form-contain .trial-captcha .field-error {
  margin: 6px 0 0;
}

/* Form-level message (too many attempts, expired page, server error) */
.form-contain .form-error {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--error-color);
  border-radius: 12px;
  background-color: var(--error-soft);
  color: var(--error-color);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.form-contain .form-error:empty {
  display: none;
}

/* Submitting */
.form-contain.is-submitting [type="submit"] {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

@keyframes field-error-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}