/* ===================================================================
   Indian Loop Premium — leads.css
   Contact page: hero, quick-action cards, tab bar, premium form,
   floating labels, gradient submit button, status banners, mobile FAB.
   =================================================================== */

/* ----- Hero ----- */
.ilp-contact { padding-bottom: 60px; }
.ilp-contact__hero {
    background: linear-gradient(135deg, #d50000 0%, #7a0000 100%);
    color: #fff;
    padding: 40px 0 36px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.ilp-contact__hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.12), transparent 50%);
    pointer-events: none;
}
.ilp-contact__hero .ilp-breadcrumbs,
.ilp-contact__hero .ilp-breadcrumbs a { color: rgba(255,255,255,.85); }
.ilp-contact__hero .ilp-breadcrumbs__sep { color: rgba(255,255,255,.4); }
.ilp-contact__title { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 14px 0 8px; letter-spacing: -.01em; }
.ilp-contact__sub   { color: rgba(255,255,255,.9); max-width: 720px; font-size: clamp(15px, 1.6vw, 17px); margin: 0 0 24px; line-height: 1.7; }

/* Quick contact buttons */
.ilp-contact__quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.ilp-contact__qbtn {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
    color: #fff; padding: 12px 16px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    transition: background var(--ilp-trans), transform var(--ilp-trans);
}
.ilp-contact__qbtn:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.ilp-contact__qbtn span:first-child { font-size: 22px; line-height: 1; }
.ilp-contact__qbtn strong { display: block; font-size: 14px; line-height: 1.2; }
.ilp-contact__qbtn em     { display: block; font-size: 12px; opacity: .85; font-style: normal; margin-top: 2px; }

/* ----- Main ----- */
.ilp-contact__main { display: block; }

/* Tabs */
.ilp-contact-tabs {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 0 0 18px;
    scrollbar-width: thin;
}
.ilp-contact-tabs::-webkit-scrollbar { height: 4px; }
.ilp-contact-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--ilp-bg);
    border: 1px solid var(--ilp-line);
    color: var(--ilp-fg);
    padding: 12px 20px; border-radius: 14px;
    cursor: pointer; transition: all var(--ilp-trans);
    flex-shrink: 0;
    min-width: 110px;
    font-weight: 600; font-size: 13px;
}
.ilp-contact-tab:hover { border-color: var(--ilp-primary); color: var(--ilp-primary); transform: translateY(-2px); }
.ilp-contact-tab.is-active {
    background: linear-gradient(135deg, var(--ilp-primary), var(--ilp-primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(213,0,0,.32);
}
.ilp-contact-tab__icon { font-size: 22px; }
.ilp-contact-tab__label { white-space: nowrap; }

/* Form card */
.ilp-contact-card {
    background: var(--ilp-bg);
    border: 1px solid var(--ilp-line);
    border-radius: 18px;
    padding: 32px;
    box-shadow: var(--ilp-shadow-md);
}
.ilp-contact-card--info { margin: 28px 0 0; padding: 24px; }
.ilp-contact-card--info h2 { margin-top: 0; font-size: 18px; }

@media (max-width: 560px) { .ilp-contact-card { padding: 22px 18px; border-radius: 14px; } }

.ilp-contact-panel { animation: ilpFade .3s ease; }
.ilp-contact-panel[hidden] { display: none; }
@keyframes ilpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ilp-contact-panel__head { margin: 0 0 22px; }
.ilp-contact-panel__head h2 { margin: 0 0 6px; font-size: clamp(20px, 2vw, 24px); display: flex; align-items: center; gap: 10px; }
.ilp-contact-panel__icon  { font-size: 28px; }
.ilp-contact-panel__head p { color: var(--ilp-subtle); margin: 0; line-height: 1.6; }

/* Field rows */
.ilp-contact-form__rows {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 720px) { .ilp-contact-form__rows { grid-template-columns: 1fr; } }
.ilp-contact-form__row--full  { grid-column: 1 / -1; }
.ilp-contact-form__row--half  { grid-column: span 1; }
@media (max-width: 720px) {
    .ilp-contact-form__row--half { grid-column: 1 / -1; }
}

/* Honeypot */
.ilp-contact-form__hp {
    position: absolute !important; left: -9999px !important; top: auto !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* Floating label */
.ilp-float { position: relative; }
.ilp-float input,
.ilp-float select,
.ilp-float textarea {
    width: 100%;
    padding: 18px 14px 8px;
    border: 1.5px solid var(--ilp-line);
    border-radius: 10px;
    background: var(--ilp-bg);
    color: var(--ilp-fg);
    font: inherit;
    transition: border-color var(--ilp-trans), box-shadow var(--ilp-trans);
    outline: none;
}
.ilp-float textarea { min-height: 110px; resize: vertical; padding-top: 22px; }
.ilp-float select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%236b7280'><path d='M0 0l6 8 6-8z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.ilp-float label {
    position: absolute; top: 16px; left: 14px;
    color: var(--ilp-subtle);
    font-size: 14px;
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease;
    background: var(--ilp-bg);
    padding: 0 4px;
    max-width: calc(100% - 28px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ilp-float input:focus,
.ilp-float select:focus,
.ilp-float textarea:focus { border-color: var(--ilp-primary); box-shadow: 0 0 0 4px rgba(213,0,0,.10); }
.ilp-float input:focus + label,
.ilp-float input:not(:placeholder-shown) + label,
.ilp-float select:focus + label,
.ilp-float select:valid + label,
.ilp-float textarea:focus + label,
.ilp-float textarea:not(:placeholder-shown) + label {
    top: -8px; font-size: 12px; color: var(--ilp-primary); font-weight: 600;
}
.ilp-required { color: var(--ilp-primary); }

/* Help text */
.ilp-contact-form__help { display: block; color: var(--ilp-subtle); font-size: 12px; margin-top: 6px; }

/* File input */
.ilp-file { position: relative; }
.ilp-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ilp-file__label {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 16px;
    border: 1.5px dashed var(--ilp-line);
    border-radius: 10px;
    background: var(--ilp-muted);
    color: var(--ilp-fg);
    cursor: pointer;
    transition: border-color var(--ilp-trans), background var(--ilp-trans);
    min-height: 60px;
}
.ilp-file:hover .ilp-file__label,
.ilp-file input:focus + .ilp-file__label { border-color: var(--ilp-primary); background: rgba(213,0,0,.04); }
.ilp-file__icon { font-size: 22px; }
.ilp-file__text strong { display: block; font-size: 14px; }
.ilp-file__text em { display: block; font-size: 12px; color: var(--ilp-subtle); font-style: normal; margin-top: 2px; }
.ilp-file.is-picked .ilp-file__label { border-style: solid; background: rgba(19,136,8,.05); border-color: #138808; }

/* Checkbox */
.ilp-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px 0; }
.ilp-check input { accent-color: var(--ilp-primary); margin-top: 3px; }
.ilp-check span { font-size: 14px; line-height: 1.5; }

/* Gradient submit */
.ilp-btn--gradient {
    background: linear-gradient(135deg, #d50000, #ff5722);
    color: #fff;
    padding: 14px 32px;
    border-radius: var(--ilp-radius-pill);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(213,0,0,.32);
    transition: transform var(--ilp-trans), box-shadow var(--ilp-trans);
    display: inline-flex; align-items: center; gap: 8px;
    position: relative; overflow: hidden;
}
.ilp-btn--gradient:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(213,0,0,.4); }
.ilp-btn--gradient:disabled { cursor: wait; opacity: .7; }
.ilp-btn--gradient.is-loading .ilp-contact-form__btn-label,
.ilp-btn--gradient.is-loading .ilp-contact-form__btn-icon { opacity: 0; }
.ilp-contact-form__btn-spinner {
    position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    border-radius: 50%; opacity: 0;
    animation: ilpSpin .8s linear infinite;
}
.ilp-btn--gradient.is-loading .ilp-contact-form__btn-spinner { opacity: 1; }

.ilp-contact-form__footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.ilp-contact-form__legal { color: var(--ilp-subtle); font-size: 12px; }

/* Status banner */
.ilp-contact-form__status {
    margin-top: 18px; padding: 14px 18px;
    border-radius: 12px;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b;
    font-weight: 600;
    animation: ilpPopIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ilp-contact-form__status.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Tip notice */
.ilp-tip-notice {
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--ilp-muted);
    border-left: 4px solid var(--ilp-primary);
    border-radius: 0 10px 10px 0;
    font-size: 14px; line-height: 1.6;
}

/* Office card */
.ilp-contact__office { margin-top: 16px; }

/* Floating WhatsApp FAB on mobile */
.ilp-contact-fab {
    position: fixed; right: 16px; bottom: 88px; z-index: 95;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 12px 32px rgba(37,211,102,.45);
    animation: ilpPulse 2s ease-in-out infinite;
}
.ilp-contact-fab:hover { color: #fff; transform: scale(1.06); }

/* Dark mode */
html[data-theme="dark"] .ilp-contact-card { background: var(--ilp-muted); }
html[data-theme="dark"] .ilp-contact-tab { background: var(--ilp-muted); }
html[data-theme="dark"] .ilp-float input,
html[data-theme="dark"] .ilp-float select,
html[data-theme="dark"] .ilp-float textarea {
    background: var(--ilp-bg); border-color: var(--ilp-line); color: var(--ilp-fg);
}
html[data-theme="dark"] .ilp-float label { background: var(--ilp-bg); }
html[data-theme="dark"] .ilp-file__label { background: var(--ilp-bg); }
html[data-theme="dark"] .ilp-contact-form__status { background: #052e1a; border-color: #15803d; color: #a7f3d0; }
html[data-theme="dark"] .ilp-contact-form__status.is-error { background: #2a0a0a; border-color: #991b1b; color: #fecaca; }