/* ============================================================
   KSHIPRA ACADEMY — ZOHO CRM INTEGRATED FORMS
   Three styled forms feeding into one Zoho CRM Webform.
   Drop into assets/css/ and link in every page that uses forms.
============================================================ */

/* ---- Form Section Wrapper ---- */
.kf-section {
  padding: 4rem 0;
  position: relative;
}

/* ---- Form Card ---- */
.kf-card {
  background: var(--clr-dark-card);
  border: 1px solid var(--clr-dark-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.kf-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ---- Form Header ---- */
.kf-header {
  text-align: center;
  margin-bottom: 2rem;
}

.kf-header .kf-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto 1rem;
}

.kf-icon-lms    { background: rgba(232,115,42,0.15); color: var(--clr-accent); }
.kf-icon-corp   { background: rgba(178,34,52,0.15);  color: var(--clr-primary-light); }
.kf-icon-enquiry{ background: rgba(212,160,23,0.15); color: var(--clr-gold); }

.kf-header h3 {
  font-family: var(--ff-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--clr-white);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.kf-header p {
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

.kf-trust-pills {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.kf-trust-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  background: var(--clr-dark-surface);
  border: 1px solid var(--clr-dark-border);
  border-radius: 20px;
  padding: 0.2rem 0.7rem;
  letter-spacing: 0.03em;
}

/* ---- Form Fields ---- */
.kf-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.kf-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kf-label {
  font-family: var(--ff-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-text-muted);
}

.kf-label .kf-req {
  color: var(--clr-accent);
  margin-left: 2px;
}

.kf-input,
.kf-select,
.kf-textarea {
  width: 100%;
  background: var(--clr-dark-surface);
  border: 1px solid var(--clr-dark-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-size: 0.92rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.kf-input::placeholder,
.kf-textarea::placeholder {
  color: rgba(154,150,164,0.5);
}

.kf-input:focus,
.kf-select:focus,
.kf-textarea:focus {
  border-color: rgba(232,115,42,0.5);
  box-shadow: 0 0 0 3px rgba(232,115,42,0.1);
}

.kf-input.kf-valid   { border-color: rgba(37,211,102,0.5); box-shadow: 0 0 0 3px rgba(37,211,102,0.08); }
.kf-input.kf-invalid { border-color: rgba(224,82,82,0.5);  box-shadow: 0 0 0 3px rgba(224,82,82,0.08); }

.kf-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A96A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.kf-select option {
  background: var(--clr-dark-card);
  color: var(--clr-text);
}

.kf-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

/* ---- Phone wrap & Country Code Dropdown ---- */
.kf-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--clr-dark-surface, #1e1e28);
  border: 1px solid var(--clr-dark-border, rgba(255,255,255,0.07));
  border-radius: var(--radius-sm, 8px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.kf-phone-wrap:focus-within {
  border-color: rgba(232,115,42,0.5);
  box-shadow: 0 0 0 3px rgba(232,115,42,0.1);
}

.kf-phone-wrap.kf-valid {
  border-color: rgba(37,211,102,0.5);
  box-shadow: 0 0 0 3px rgba(37,211,102,0.08);
}

.kf-phone-wrap.kf-invalid {
  border-color: rgba(224,82,82,0.5);
  box-shadow: 0 0 0 3px rgba(224,82,82,0.08);
}

.kf-phone-country-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.65rem 0.75rem 0.85rem;
  border-right: 1px solid var(--clr-dark-border, rgba(255,255,255,0.1));
  flex-shrink: 0;
  min-width: 75px;
  cursor: pointer;
}

.kf-country-code-val {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text, #F0EEF0);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.kf-country-arrow {
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A96A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.kf-phone-country-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kf-phone-country-select option {
  background: var(--clr-dark-card, #17171E);
  color: var(--clr-text, #F0EEF0);
  padding: 0.5rem;
}

.kf-phone-wrap .kf-input.kf-phone-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
  width: 100%;
  padding-left: 0.75rem;
  box-shadow: none !important;
}

/* ---- Error message ---- */
.kf-error {
  font-size: 0.75rem;
  color: #e05252;
  font-weight: 500;
  min-height: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  display: none;
}
.kf-error.visible { display: block; }

/* ---- Submit Button ---- */
.kf-submit {
  width: 100%;
  padding: 0.95rem;
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--ff-heading);
  font-size: 1rem;
  font-weight: 800;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 25px rgba(232,115,42,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
}

.kf-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(232,115,42,0.5);
}

.kf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.kf-submit .kf-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kf-spin 0.7s linear infinite;
  margin-right: 0.5rem;
}

.kf-submit.loading .kf-spinner { display: inline-block; }
.kf-submit.loading .kf-btn-text { opacity: 0.7; }

@keyframes kf-spin {
  to { transform: rotate(360deg); }
}

/* ---- Footer note ---- */
.kf-footer-note {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.kf-footer-note i { color: var(--clr-accent); font-size: 0.7rem; }

/* ---- Success State ---- */
.kf-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: 1rem;
}

.kf-success.visible { display: flex; }

.kf-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(37,211,102,0.12);
  border: 2px solid rgba(37,211,102,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #25D366;
  animation: kf-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes kf-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.kf-success h4 {
  font-family: var(--ff-heading);
  font-size: 1.2rem;
  color: var(--clr-white);
}

.kf-success p {
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* ============================================================
   INTL-TEL-INPUT — DARK MODE COUNTRY DROPDOWN
   Makes country names prominent against the dark background
============================================================ */
.iti__country-list {
  background-color: var(--clr-dark-card, #17171E) !important;
  border: 1px solid var(--clr-dark-border, rgba(255,255,255,0.07)) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
  color: var(--clr-text, #F0EEF0) !important;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.iti__country-list::-webkit-scrollbar {
  width: 6px;
}
.iti__country-list::-webkit-scrollbar-track {
  background: transparent;
}
.iti__country-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.iti__country {
  background-color: transparent !important;
}

.iti__country-name,
.iti__dial-code {
  color: var(--clr-text, #F0EEF0) !important;
}

.iti__country-name {
  font-weight: 500;
}

.iti__dial-code {
  color: var(--clr-text-muted, #9A96A4) !important;
}

.iti__country.iti__highlight,
.iti__country:hover {
  background-color: var(--clr-dark-surface, #1E1E28) !important;
}

.iti__country.iti__active {
  background-color: rgba(232,115,42,0.15) !important;
}

.iti__country.iti__active .iti__country-name {
  color: var(--clr-accent, #E8732A) !important;
  font-weight: 600;
}

.iti__divider {
  border-bottom-color: var(--clr-dark-border, rgba(255,255,255,0.07)) !important;
}

/* Search input inside dropdown (if enabled) */
.iti__search-input {
  background: var(--clr-dark-surface, #1E1E28) !important;
  border: 1px solid var(--clr-dark-border, rgba(255,255,255,0.07)) !important;
  color: var(--clr-text, #F0EEF0) !important;
}

/* ============================================================
   LIGHT MODE OVERRIDES
============================================================ */
html.light-mode .kf-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

html.light-mode .kf-header h3 { color: #1A1A2E; }
html.light-mode .kf-header p  { color: #5A5570; }

html.light-mode .kf-trust-pill {
  background: #F4F2F7;
  border-color: rgba(0,0,0,0.1);
  color: #5A5570;
}

html.light-mode .kf-label { color: #5A5570; }

html.light-mode .kf-input,
html.light-mode .kf-textarea {
  background: #F4F2F7 !important;
  border: 1.5px solid rgba(0,0,0,0.25) !important;
  color: #1A1A2E !important;
}

html.light-mode .kf-input::placeholder,
html.light-mode .kf-textarea::placeholder {
  color: #5A5570 !important;
  opacity: 0.85 !important;
}

html.light-mode .kf-select {
  background-color: #F4F2F7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5570' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  border: 1.5px solid rgba(0,0,0,0.25) !important;
  color: #1A1A2E !important;
}

html.light-mode .kf-phone-wrap {
  background: #F4F2F7;
  border-color: rgba(0,0,0,0.25);
}

html.light-mode .kf-phone-country-box {
  border-right-color: rgba(0,0,0,0.15);
}

html.light-mode .kf-country-code-val {
  color: #1A1A2E;
}

html.light-mode .kf-country-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A5570' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

html.light-mode .kf-phone-country-select option {
  background: #FFFFFF;
  color: #1A1A2E;
}

html.light-mode .kf-phone-wrap .kf-input.kf-phone-input {
  color: #1A1A2E;
}

html.light-mode .kf-footer-note { color: #5A5570; }

html.light-mode .kf-success h4 { color: #1A1A2E; }
html.light-mode .kf-success p  { color: #5A5570; }

/* intl-tel-input light mode resets */
html.light-mode .iti__country-list {
  background-color: #FFFFFF !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  color: #1A1A2E !important;
}
html.light-mode .iti__country-name { color: #1A1A2E !important; }
html.light-mode .iti__dial-code { color: #5A5570 !important; }
html.light-mode .iti__country.iti__highlight,
html.light-mode .iti__country:hover {
  background-color: #F4F2F7 !important;
}
html.light-mode .iti__country.iti__active {
  background-color: rgba(232,115,42,0.10) !important;
}
html.light-mode .iti__divider {
  border-bottom-color: rgba(0,0,0,0.09) !important;
}
html.light-mode .iti__search-input {
  background: #F4F2F7 !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #1A1A2E !important;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 520px) {
  .kf-card { padding: 2rem 1.25rem; border-radius: var(--radius-md); }
  .kf-row  { grid-template-columns: 1fr; }
}
/* ============================================================
   LMS FORM — "Experience Now" spinning border glow
   Mirrors .form-btn-glow-spin from homeold.css
============================================================ */
@property --kf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

[data-kf-form="lms"] .kf-submit {
  overflow: visible;
}

[data-kf-form="lms"] .kf-submit::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50px;
  padding: 3px;
  background: conic-gradient(
    from var(--kf-angle, 0deg),
    transparent 0%,
    transparent 40%,
    rgba(232,115,42,0.9) 60%,
    rgba(255,180,80,1)   75%,
    rgba(232,115,42,0.9) 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: kf-border-spin 1.5s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes kf-border-spin {
  to { --kf-angle: 360deg; }
}
/* ============================================================
   ENQUIRY TOGGLE — Individual / Corporate tab switcher
   Sits inside .kf-card, below the trust pills
============================================================ */
.kf-type-toggle {
  display: flex;
  gap: 0;
  background: var(--clr-dark-surface);
  border: 1px solid var(--clr-dark-border);
  border-radius: 50px;
  padding: 0.3rem;
  margin: 0 auto 1.5rem;
  width: fit-content;
}

.kf-type-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  font-family: var(--ff-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.kf-type-btn i {
  font-size: 0.8rem;
}

.kf-type-btn.active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(178,34,52,0.35);
}

.kf-type-btn:not(.active):hover {
  color: var(--clr-white);
  background: rgba(255,255,255,0.06);
}

/* Light mode */
html.light-mode .kf-type-toggle {
  background: #F4F2F7;
  border-color: rgba(0,0,0,0.10);
}

html.light-mode .kf-type-btn {
  color: #5A5570;
}

html.light-mode .kf-type-btn.active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(178,34,52,0.25);
}

html.light-mode .kf-type-btn:not(.active):hover {
  color: #1A1A2E;
  background: rgba(0,0,0,0.05);
}

@media (max-width: 380px) {
  .kf-type-toggle { width: 100%; justify-content: center; }
  .kf-type-btn    { flex: 1; justify-content: center; padding: 0.6rem 0.75rem; }
}