/**
 * GF French Address Autocomplete — Styles
 *
 * Designed to feel native within any Gravity Forms theme.
 * Override --gffaa-accent and --gffaa-radius to match your brand.
 *
 * @package GF_French_Address_Autocomplete
 */

/* ============================================================
   Custom properties (theming)
   ============================================================ */
:root {
    --gffaa-accent : #0073aa;
    --gffaa-radius : 4px;
    --gffaa-shadow : 0 4px 12px rgba( 0, 0, 0, 0.12 );
    --gffaa-bg     : #ffffff;
    --gffaa-border : #dddddd;
    --gffaa-hover  : #f0f6ff;
    --gffaa-text   : #333333;
    --gffaa-sub    : #666666;
}

/* ============================================================
   Suggestion list (dropdown)
   ============================================================ */
.gffaa-suggestions {
    position        : absolute;
    top             : 100%;
    left            : 0;
    z-index         : 9999;
    min-width       : 100%;
    background      : var( --gffaa-bg );
    border          : 1px solid var( --gffaa-border );
    border-radius   : var( --gffaa-radius );
    box-shadow      : var( --gffaa-shadow );
    max-height      : 260px;
    overflow-y      : auto;
    list-style      : none;
    margin          : 2px 0 0;
    padding         : 0;
    box-sizing      : border-box;
}

.gffaa-suggestions[hidden] {
    display : none;
}

/* ============================================================
   Individual suggestion items
   ============================================================ */
.gffaa-suggestions li {
    padding         : 10px 14px;
    cursor          : pointer;
    min-height      : 44px;      /* WCAG touch target */
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    color           : var( --gffaa-text );
    border-bottom   : 1px solid var( --gffaa-border );
    line-height     : 1.4;
    transition      : background 0.1s ease;
}

.gffaa-suggestions li:last-child {
    border-bottom : none;
}

.gffaa-suggestions li:hover,
.gffaa-suggestions li:focus,
.gffaa-suggestions li[aria-selected="true"] {
    background : var( --gffaa-hover );
    outline    : none;
}

/* ============================================================
   Label & sub-label
   ============================================================ */
.gffaa-label {
    font-size   : 0.95em;
    font-weight : 500;
}

.gffaa-sublabel {
    font-size  : 0.8em;
    color      : var( --gffaa-sub );
    margin-top : 2px;
}

/* ============================================================
   Query highlight
   ============================================================ */
.gffaa-suggestions mark {
    background  : none;
    font-weight : 700;
    color       : inherit;
}

/* ============================================================
   Loading indicator on the input
   ============================================================ */
.gffaa-loading {
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%230073aa' stroke-width='2' stroke-dasharray='40 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 8px center;
    background-size     : 18px 18px;
    padding-right       : 34px !important;
}

/* ============================================================
   Informational messages (no results / error)
   ============================================================ */
.gffaa-no-results,
.gffaa-error {
    padding    : 10px 14px;
    color      : var( --gffaa-sub );
    font-style : italic;
    cursor     : default;
}

.gffaa-error {
    color : #cc0000;
}

/* ============================================================
   Visually-hidden live region (screen reader announcements)
   ============================================================ */
.gffaa-sr-only {
    position    : absolute !important;
    width       : 1px;
    height      : 1px;
    padding     : 0;
    margin      : -1px;
    overflow    : hidden;
    clip        : rect( 0, 0, 0, 0 );
    white-space : nowrap;
    border      : 0;
}