/* ==========================================================================
   Consultation forms: description box + attachment (site-wide)

   Markup comes from partials/consultation-extra-template.blade.php and is
   placed by assets/js/tbtk-consultation-extra.js. The JS copies the Email
   input's colours, border, radius and font into the --tk-cx-* variables on
   each row, so the box matches whichever form variant and theme it sits in;
   the values below are only fallbacks taken from the approved homepage form.
   ========================================================================== */

.tk-cx-field {
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* gravity forms that are not a CSS grid lay fields out as blocks */
.gform_fields > .tk-cx-field {
    margin-top: 0;
}

.tk-cx-field .tk-cx-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- The box (textarea + bottom bar share one bordered surface) -------- */
.tk-cx-field .tk-cx-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border: var(--tk-cx-border-width, 1px) solid var(--tk-cx-border, rgba(15, 23, 42, 0.16));
    border-radius: var(--tk-cx-radius, 10px);
    background: var(--tk-cx-bg, #FFFFFF);
    transition: box-shadow 0.18s ease;
}

.tk-cx-field .tk-cx-box:focus-within {
    border-color: var(--primary-color, #0073FC);
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.18);
}

.tk-cx-field.gfield_error .tk-cx-box,
.tk-cx-field.has-error .tk-cx-box,
.tk-cx-field .tk-cx-box:has(.tk-cx-bar.gfield_error),
.tk-cx-field .tk-cx-box:has(.tk-cx-bar.has-error) {
    border-color: #FF6262;
}

.tk-cx-field textarea.tk-cx-textarea {
    display: block;
    width: 100% !important;
    min-height: 128px;
    max-height: 420px;
    margin: 0 !important;
    padding: 14px 18px 6px !important;
    border: 0 !important;
    border-radius: var(--tk-cx-radius, 10px) var(--tk-cx-radius, 10px) 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tk-cx-color, #14161A) !important;
    font-family: var(--tk-cx-font, inherit);
    font-size: var(--tk-cx-font-size, 15.5px);
    line-height: 1.5;
    resize: vertical;
    outline: none !important;
}

.tk-cx-field textarea.tk-cx-textarea::placeholder {
    color: #7A828B;
    opacity: 1;
}

/* ---- Bottom bar: hint on the left, attach button bottom-right ---------- */
.tk-cx-field .tk-cx-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    padding: 4px 8px 8px 18px;
}

.tk-cx-field .tk-cx-hint {
    margin-right: auto;
    overflow: hidden;
    color: #7A828B;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tk-cx-field [hidden] {
    display: none !important;
}

/* the real <input type=file> stays focusable but invisible; the label is
   the visible control. Beats the shared sheet's `.gfield input` styling. */
.tk-cx-field input.tk-cx-input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
}

.tk-cx-field .tk-cx-attach {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(0, 115, 252, 0.28);
    border-radius: 8px;
    background: rgba(0, 115, 252, 0.08);
    color: var(--primary-color, #0073FC);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.tk-cx-field .tk-cx-attach:hover {
    border-color: rgba(0, 115, 252, 0.5);
    background: rgba(0, 115, 252, 0.14);
}

.tk-cx-field .tk-cx-input:focus-visible + .tk-cx-attach {
    outline: 2px solid var(--primary-color, #0073FC);
    outline-offset: 2px;
}

/* ---- Chosen file chip --------------------------------------------------- */
.tk-cx-field .tk-cx-file {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin-right: auto;
    padding: 4px 4px 4px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--tk-cx-color, #14161A);
    font-size: 12.5px;
    line-height: 1.3;
}

.tk-cx-field .tk-cx-file-icon {
    flex: 0 0 auto;
    color: var(--primary-color, #0073FC);
}

.tk-cx-field .tk-cx-file-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tk-cx-field .tk-cx-remove {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
}

.tk-cx-field .tk-cx-remove:hover {
    background: rgba(15, 23, 42, 0.08);
    opacity: 1;
}

/* ---- Errors ------------------------------------------------------------ */
.tk-cx-field .tk-cx-error {
    display: block;
    margin: 5px 4px 0;
    padding: 0;
    border: 0;
    background: 0 0;
    color: #FF8585;
    font-size: 12px;
}

.tk-cx-field .tk-cx-error:empty {
    display: none;
}

html[data-tk-theme="light"] .tk-cx-field .tk-cx-error {
    color: #D63B3B;
}

/* ---- Forms whose inputs are dark (some legacy variants) ---------------- */
.tk-cx-field.tk-cx-on-dark textarea.tk-cx-textarea::placeholder,
.tk-cx-field.tk-cx-on-dark .tk-cx-hint {
    color: rgba(255, 255, 255, 0.55);
}

.tk-cx-field.tk-cx-on-dark .tk-cx-file {
    background: rgba(255, 255, 255, 0.08);
}

.tk-cx-field.tk-cx-on-dark .tk-cx-remove:hover {
    background: rgba(255, 255, 255, 0.12);
}

.tk-cx-field.tk-cx-on-dark .tk-cx-attach {
    border-color: rgba(102, 172, 255, 0.4);
    background: rgba(0, 115, 252, 0.16);
    color: var(--primary-color-light, #66ACFF);
}

@media (max-width: 480px) {
    .tk-cx-field .tk-cx-hint {
        display: none;
    }
}

/* ---- Guard against legacy section rules ------------------------------- */
/* Some host sections style every descendant <span>/<label> (e.g. the
   website pages' `.our-brands-box span` badge rule: blue, display:block).
   These pins keep the row identical wherever it is placed. */
.tk-cx-field .tk-cx-hint {
    display: block !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #7A828B !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.tk-cx-field .tk-cx-file {
    display: inline-flex !important;
    color: var(--tk-cx-color, #14161A) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.tk-cx-field .tk-cx-file-name {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: inherit !important;
}

.tk-cx-field .tk-cx-attach {
    display: inline-flex !important;
    color: var(--primary-color, #0073FC) !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.tk-cx-field .tk-cx-attach span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

.tk-cx-field.tk-cx-on-dark .tk-cx-hint {
    color: rgba(255, 255, 255, 0.55) !important;
}

.tk-cx-field.tk-cx-on-dark .tk-cx-attach {
    color: var(--primary-color-light, #66ACFF) !important;
}

.tk-cx-field [hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .tk-cx-field .tk-cx-hint {
        display: none !important;
    }
}

/* ---- Icons ------------------------------------------------------------- */
/* Legacy section rules such as `.row .service_desc svg { position:absolute;
   width:calc(100% + 20px) ... }` would blow the paperclip up over the whole
   box, turning the description area into one big file-picker target. The
   icons are pinned to their own size and kept in flow. */
.tk-cx-field svg {
    position: static !important;
    inset: auto !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    pointer-events: none !important;
}

.tk-cx-field .tk-cx-file-icon {
    width: 14px !important;
    height: 14px !important;
}

/* Only the textarea and the attach button take clicks in the box. */
.tk-cx-field .tk-cx-box,
.tk-cx-field .tk-cx-bar {
    position: relative !important;
    overflow: hidden;
}

.tk-cx-field svg path,
.tk-cx-field svg rect,
.tk-cx-field svg circle {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
    filter: none !important;
}

.tk-cx-field svg,
.tk-cx-field svg path {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

/* Gravity maps .gfield--width-full to `grid-column: span 12`. On pages whose
   mobile CSS collapses the field grid to one column, that span invents 11
   empty implicit columns and squeezes every other field into the first one.
   `1 / -1` covers exactly the explicit columns, whatever their count. */
.gform_fields > .tk-cx-field,
.tk-cx-field.gfield--width-full {
    grid-column: 1 / -1 !important;
}