/* Brisbane Gravity Forms — frontend-forms.css */

/* Wrapper */
.bgf-form-wrap { width: 100%; }
.bgf-form { width: 100%; }

/* Honeypot */
.bgf-hp-wrap { position: absolute;    left: -9999px;    height: 0;    overflow: hidden; }

/* 12-column grid: 1 col=100%, 2 col=50%, 3 col=33.3%, 4 col=25% */
.bgf-grid { display: grid;    grid-template-columns: repeat(12, 1fr);    gap: 12px; }
.bgf-col-1 { grid-column: span 12; }
.bgf-col-2 { grid-column: span 6; }
.bgf-col-3 { grid-column: span 4; }
.bgf-col-4 { grid-column: span 3; }

@media (max-width: 680px) {
    .bgf-col-1, .bgf-col-2, .bgf-col-3, .bgf-col-4 { grid-column: span 12; }
}

/* Field wrapper */
.bgf-field { position: relative;    width: 100%; }

/* Inputs & textarea */
.bgf-field input,
.bgf-field select,
.bgf-field textarea,
.bgf-field input[type=text] { display: block;    width: 100%;    box-sizing: border-box;    padding: 22px 14px 8px;    font-size: inherit;    line-height: 1.4;    color: inherit;    background: #fff!important;    border: 2px solid #eee;    border-radius: 0.4rem;    outline: none;    transition: border-color 0.2s ease, box-shadow 0.2s ease;    appearance: none;    -webkit-appearance: none;    font-family: inherit; }
.bgf-field textarea { resize: vertical;    min-height: 130px; }

/* Select arrow */
.bgf-field--select::after { content: '';    position: absolute;    right: 14px;    top: 50%;    transform: translateY(-50%);    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 6px solid #888;    pointer-events: none; }
.bgf-field select { padding-right: 36px;    cursor: pointer; }

/* Focus ring */
.bgf-field--focused input,
.bgf-field--focused select,
.bgf-field--focused textarea {  }

/* Floating label */
.bgf-field label { position: absolute;    left: 14px;    top: 50%;    transform: translateY(-50%);    font-size: 1rem;    color: #888;    pointer-events: none;    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;    white-space: nowrap;    line-height: 1; }

/* Textarea: anchor label to top */
.bgf-field--textarea label { top: 18px;    transform: none; }

/* Raised state */
.bgf-field--focused label,
.bgf-field--filled label,
.bgf-label--raised label { top: 8px;    transform: none;    font-size: 0.72rem;    color: #555;    letter-spacing: 0.01em; }

/* Textarea raised */
.bgf-field--textarea.bgf-field--focused label,
.bgf-field--textarea.bgf-field--filled label,
.bgf-field--textarea.bgf-label--raised label { top: 6px; }

/* Active label colour */
.bgf-field--focused label { color: inherit; }

/* Optional tag */
.bgf-optional { font-size: 0.78em;    color: #aaa; }

/* Submit */
.bgf-submit-wrap { margin-top: 12px; }
.bgf-submit-wrap--full { width: 100%; }
button.bgf-submit { display: inline-block;    padding: 5px 10px!important;    font-size: 17px!important;    font-weight: bold!important;    font-family: inherit;    color: #fff;    background: #1a1a1a;    border: none;    border-radius: 0.4rem;    cursor: pointer;    transition: background 0.2s ease, opacity 0.2s ease;    letter-spacing: 0!important;    text-align: center!important; }
.bgf-submit--full { display: block;    width: 100%!important; }
.bgf-submit:hover { background: #333; }
.bgf-submit:active { background: #000; }
.bgf-submit--loading,
.bgf-submit:disabled { opacity: 0.55;    cursor: not-allowed; }

/* Privacy notice */
.bgf-privacy-notice { font-size: 12px!important;    color: #999!important;    line-height: 1.3!important;    max-width: 75%;    margin: 12px auto; }
.bgf-privacy-notice a { color: #999;    text-decoration: underline!important;    border: none!important;    box-shadow: none!important;    transition: none!important; }
.bgf-privacy-notice a:hover { color: #333!important;    text-decoration: underline!important;    border: none!important;    box-shadow: none!important;    transition: none!important; }

/* Custom dropdown */
.bgf-field--dropdown { cursor: pointer; }
.bgf-dropdown-display { display: flex;    align-items: center;    justify-content: space-between;    padding: 14px 14px 4px 12px;    font-size: inherit;    color: inherit;    background: #fff;    border: 2px solid #eee!important;    border-radius: 0.4rem;    outline: none;    transition: border-color 0.2s ease, box-shadow 0.2s ease;    min-height: 51px;    box-sizing: border-box;    text-align: left!important; }
.bgf-dropdown-display:focus,
.bgf-field--dropdown.bgf-field--focused .bgf-dropdown-display { border-color: inherit; }
.bgf-dropdown-text { flex: 1;    color: inherit; }
.bgf-dropdown-text:empty { color: transparent; }
.bgf-dropdown-arrow { width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 6px solid #888;    margin-left: 10px;    transition: transform 0.2s ease;    flex-shrink: 0;    margin-top: -12px; }
.bgf-field--dropdown.bgf-field--open .bgf-dropdown-arrow { transform: rotate(180deg); }
.bgf-dropdown-list { display: none;    position: absolute;    top: 100%;    left: 0;    right: 0;    background: #fff;    border: 2px solid #eee!important;    border-top: none;    border-radius: 0 0 0.4rem 0.4rem;    list-style: none;    margin: 0;    padding: 0;    z-index: 100;    box-shadow: 0 4px 12px rgba(0,0,0,0.1);    max-height: 220px;    overflow-y: auto;    text-align: left!important; }
.bgf-field--dropdown.bgf-field--open .bgf-dropdown-list { display: block; }
.bgf-dropdown-option { padding: 5px 14px;    font-size: 16px!important;    color: inherit;    cursor: pointer;    transition: background 0.15s; }
.bgf-dropdown-option:hover,
.bgf-dropdown-option.bgf-dropdown-option--active { background: #f5f5f5; }
.bgf-field--dropdown .bgf-field--focused label,
.bgf-field--dropdown.bgf-field--filled label,
.bgf-field--dropdown.bgf-field--open label { top: 8px;    transform: none;    font-size: 0.72rem;    color: #555;    letter-spacing: 0.01em; }
.bgf-field--dropdown.bgf-field--open label { color: inherit; }

/* Human checkbox — CapSentry widget */
.bgf-human-wrap { margin-top: 12px; }
.bgf-human-wrap--hidden { visibility: hidden;    pointer-events: none; }
.bgf-human-inner { display: flex;    align-items: center;    justify-content: space-between;    border: 1px solid #ddd;    border-radius: 0.4rem;    background: #fafafa;    padding: 12px 16px;    gap: 12px;    position: relative;    overflow: hidden;    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif!important; }
.bgf-human-inner::after { content: '';    position: absolute;    top: 0;    left: 0;    width: 65%;    height: 100%;    background-image: radial-gradient(circle, #333 1px, transparent 1px);    background-size: 9px 9px;    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.2) 0%, transparent 100%);    mask-image: linear-gradient(to right, rgba(0,0,0,0.2) 0%, transparent 100%);    pointer-events: none;    z-index: 0; }
.bgf-checkbox--checked .bgf-human-inner::after { background-image: radial-gradient(circle, #2a9d2a 1px, transparent 1px); }
.bgf-checkbox--manual .bgf-human-inner::after { background-image: radial-gradient(circle, #f0a500 1px, transparent 1px); }
.bgf-checkbox--error .bgf-human-inner::after { background-image: radial-gradient(circle, #d63638 1px, transparent 1px); }
.bgf-human-label { display: flex;    align-items: center;    gap: 12px;    cursor: default;    user-select: none;    flex: 1;    position: relative;    z-index: 1;    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif!important; }
.bgf-human-box { width: 26px;    height: 26px;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    flex-shrink: 0;    position: relative;    cursor: default; }
.bgf-checkbox--manual .bgf-human-label { cursor: pointer; }
.bgf-checkbox--manual .bgf-human-box { cursor: pointer; }
.bgf-checkbox--manual .bgf-human-inner { border-color: #f0a500;    background: #fffdf5; }
.bgf-checkbox--error .bgf-human-inner { border-color: #d63638;    background: #fff8f8; }

/* Icons — all stacked, shown one at a time */
.bgf-icon { position: absolute;    top: 0;    left: 0;    width: 26px;    height: 26px;    display: block;    transition: opacity 0.25s ease, transform 0.25s ease;    opacity: 0;    transform: scale(0.7);    pointer-events: none; }
.bgf-icon--blocks { color: #aaa;    opacity: 1;    transform: scale(1); }

/* Circle SVG internals */
.bgf-circle-bg { stroke: #ddd; }
.bgf-circle-track { stroke: #ddd;    stroke-dasharray: 69.1;    stroke-dashoffset: 69.1;    transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease; }
.bgf-tick-path { stroke-dasharray: 22;    stroke-dashoffset: 22;    transition: stroke-dashoffset 0.35s ease 0.15s; }

/* State: manual (blocks hide, circle appears amber) */
.bgf-checkbox--manual .bgf-icon--blocks { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--manual .bgf-icon--circle { opacity: 1;    transform: scale(1); }
.bgf-checkbox--manual .bgf-circle-track { stroke: #f0a500;    stroke-dashoffset: 0;    animation: bgf-pulse 1.5s ease-in-out infinite; }

/* State: star (brief flash, green) */
.bgf-checkbox--star .bgf-icon--blocks { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--star .bgf-icon--circle { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--star .bgf-icon--star { opacity: 1;    transform: scale(1);    color: #2a9d2a; }

/* State: checked (tick SVG appears) */
.bgf-checkbox--checked .bgf-icon--blocks { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--checked .bgf-icon--circle { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--checked .bgf-icon--star { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--checked .bgf-icon--tick { opacity: 1;    transform: scale(1); }
.bgf-checkbox--checked .bgf-tick-path { stroke-dashoffset: 0; }

/* State: error (circle red, shake) */
.bgf-checkbox--error .bgf-icon--blocks { opacity: 0;    transform: scale(0.7); }
.bgf-checkbox--error .bgf-icon--circle { opacity: 1;    transform: scale(1); }
.bgf-checkbox--error .bgf-circle-track { stroke: #d63638;    stroke-dashoffset: 0; }
.bgf-checkbox--error .bgf-human-box { animation: bgf-shake 0.3s ease; }

.bgf-human-text { flex: 1;    text-align: left!important; }
.bgf-human-status { font-size: 0.9rem;    color: #000;    font-weight: 700;    transition: color 0.2s ease;    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif!important;    position: relative;    line-height: 1.1!important;    display: block!important; }
.bgf-checkbox--checked .bgf-human-status { color: #000; }
.bgf-checkbox--manual .bgf-human-status,
.bgf-checkbox--error .bgf-human-status { color: #000; }
.bgf-human-brand { display: flex;    flex-direction: column;    align-items: center;    gap: 0px;    flex-shrink: 0;    border-left: 1px solid #e0e0e0;    padding-left: 16px;    position: relative;    z-index: 1; }
.bgf-brand-logo { display: block;    height: 15px!important;    width: auto!important; }
img.bgf-brand-logo { margin: 0!important;    width: auto!important;    height: 15px!important;    object-fit: contain!important; }
.bgf-brand-link { font-size: 8px!important; line-height: 1.7!important;    color: #aaa!important;    text-decoration: none!important;    white-space: nowrap;    border: none!important;    box-shadow: none!important;    transition: color 0.2s ease!important;    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif!important; }
.bgf-brand-link:hover { color: #555!important;    text-decoration: underline!important; }

@keyframes bgf-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes bgf-pulse { 0%,100%{stroke-opacity:1} 50%{stroke-opacity:0.4} }

/* ── Field error state ── */
.bgf-field.bgf-field--error input,
.bgf-field.bgf-field--error input[type=text],
.bgf-field.bgf-field--error select,
.bgf-field.bgf-field--error textarea,
.bgf-field.bgf-field--error .bgf-dropdown-display { border: 2px solid #d63638 !important;    transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.bgf-field.bgf-field--error label { color: #d63638; }

/* ── Submit spinner ── */
@keyframes bgf-spin { to { transform: rotate(360deg); } }
.bgf-submit--loading { position: relative;    color: transparent !important; }
.bgf-submit--loading::after { content: '';    position: absolute;    top: 50%;    left: 50%;    width: 18px;    height: 18px;    margin: -12px 0 0 -9px;    border: 2px solid rgba(255,255,255,0.35);    border-top-color: #fff;    border-radius: 50%;    animation: bgf-spin 0.7s linear infinite; }

/* ── Upload spinner ── */
.bhw-thumb--loading { display:flex;    align-items:center;    justify-content:center;    background:#f6f7f7; }
.bhw-loading { display:flex;    align-items:center;    justify-content:center;    width:100%;    height:100%; }
.bhw-spinner { width:28px;    height:28px;    border:3px solid #ddd;    border-top-color:#2271b1;    border-radius:50%;    animation:bhw-spin 0.7s linear infinite; }
@keyframes bhw-spin { to { transform:rotate(360deg); } }

/* ── Password field ── */
.bgf-field--password { position:relative; }
.bgf-field--password input { padding-right:44px; }
.bgf-password-toggle { position:absolute;    right:12px;    bottom:9px;    cursor:pointer;    color:#888;    z-index:2;    line-height:0;    transition:color 0.15s ease; }
.bgf-password-toggle:hover { color:#333; }

/* ── File Upload Field — BHW style ── */
/* ── File Upload Field ── */
.bgf-form .bgf-upload-input { display: none; }
.bgf-form .bhw-artwork-upload { margin: 0; padding: 0; border: 2px dashed #2271b1; border-radius: 0.4rem!important; transition: background 0.2s ease; cursor: pointer; margin: 0!important; }
.bgf-form .bhw-upload-label { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 20px 10px; width: 100%; font-size: 14px; line-height: 1.3; color: #000; box-sizing: border-box; }
.bgf-form .bhw-upload-label:hover { text-decoration: underline; }
.bgf-form .bhw-upload-label svg { flex-shrink: 0; }
.bgf-form .bhw-artwork-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.bgf-form .bhw-thumb { position: relative; width: 100%; aspect-ratio: 5/3; border: 1px solid #ccc; overflow: hidden; border-radius: 0.3rem; background: #fff; }
.bgf-form .bhw-thumb img { object-fit: cover!important; width: 100%!important; height: 100%!important; display: block; margin: 0!important; }
.bgf-form .bhw-filethumb { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: #333; }
.bgf-form .bhw-filethumb svg { width: 28px; height: 28px; fill: #2271b1; }
.bgf-form .bhw-filethumb div { margin-top: 3px; text-align: center; }
.bgf-form .bhw-filename { font-size: 9px !important; opacity: 0.6; margin-top: 2px !important; padding: 0 4px; word-break: break-all; line-height: 1.3; }
.bgf-form .bhw-del { position: absolute; top: 2px; right: 4px; cursor: pointer; background: #fff; border-radius: 50%; font-weight: bold; line-height: 1; font-size: 14px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.bgf-form .bhw-del:hover { opacity: 0.7; }
.bgf-form #bgf2-artwork-preview:not(:empty) { margin: 0px 15px 15px 15px!important; }



/* Error list */
.bgf-upload-list { list-style: none;    margin: 0;    padding: 0; }
/* Hint text */
.bgf-upload-hint { margin: 0 10px 10px !important;    font-size: 0.78rem !important;    color: #888 !important;    line-height: 1.4;    display: block; }

/* MOBILE */
@media only screen and (max-width: 1000px) {

}

@media only screen and (max-width: 690px) {
  .bgf-human-status { font-size: 0.7rem!important; }
}