/* -------------------------------------------------------------------------
   Broadband Finder Widget
   Matches the "Signal Plate" tokens in broadband-card.css.
   ------------------------------------------------------------------------- */

.broadband-widget {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
    padding: 1.2rem;
    max-width: 72rem;
    margin: 0 auto;
    border-radius: 0;
    font-family: var(--bb-font-body, 'Inter', -apple-system, sans-serif);
    box-sizing: border-box;
}
.broadband-input-wrap {
    position: relative;
    width: 100%;
}

#broadband-address {
    width: 100%;
    height: 3rem;
    padding: 0 3.4rem 0 0.9rem;
    font-size: 1rem;
    font-family: var(--bb-font-mono, monospace);
    color: var(--bb-color-ink, #14181c);
    background: #ffffff;
    border: 1px solid var(--bb-color-line, rgba(20, 24, 28, 0.12));
    border-radius: 0.5rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    display: block !important;
}

#broadband-address:focus,
#broadband-address:focus-visible {
    border-color: var(--bb-color-primary, #2451ff);
}

#broadband-start {
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    right: 0.4rem;
    width: 4.6rem;
    height: 2.2rem;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-color-primary, #2451ff);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

#broadband-start svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

#broadband-start:hover:not(:disabled) {
    background: var(--bb-color-primary-dark, #1c3fcc);
}

#broadband-start:focus-visible {
    outline: 2px solid var(--bb-color-ink, #14181c);
    outline-offset: 2px;
}

#broadband-start:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Button row */
.broadband-widget button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    font-family: var(--bb-font-display, sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.broadband-widget button:focus-visible {
    outline: 2px solid var(--bb-color-ink, #14181c);
    outline-offset: 2px;
}

.broadband-widget button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#broadband-stop {
    background: transparent;
    color: var(--bb-color-ink, #14181c);
    border: 1px solid var(--bb-color-line, rgba(20, 24, 28, 0.12));
}

#broadband-stop:hover:not(:disabled) {
    border-color: var(--bb-color-ink, #14181c);
}

/* Output box */
.broadband-output {
    padding: 0;
    margin: 0;
    min-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    border-radius: 0;
}

/* Filter / sort bar */
.broadband-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: #ffffff;
    border: 1px solid var(--bb-color-line, rgba(20, 24, 28, 0.12));
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.broadband-filter-bar label {
    font-family: var(--bb-font-display, sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bb-color-ink, #14181c);
    white-space: nowrap;
}

#broadband-sort {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex: 1;
    max-width: 16rem;
    height: 2.4rem;
    padding: 0 2.2rem 0 0.8rem;
    font-family: var(--bb-font-body, 'Inter', -apple-system, sans-serif);
    font-size: 0.85rem;
    color: var(--bb-color-ink, #14181c);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    border: 1px solid var(--bb-color-line, rgba(20, 24, 28, 0.12));
    border-radius: 0.4rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

#broadband-sort:hover {
    border-color: var(--bb-color-ink, #14181c);
}

#broadband-sort:focus,
#broadband-sort:focus-visible {
    border-color: var(--bb-color-primary, #2451ff);
}

/* -------------------------------------------------------------------------
   Electricity Finder Widget
   Matches the "Signal Plate" tokens in electricity-card.css.
   ------------------------------------------------------------------------- */


.electricity-widget {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
    padding: 1.2rem;
    max-width: 72rem;
    margin: 0 auto;
    border-radius: 0;
    font-family: var(--ec-font-body, 'Inter', -apple-system, sans-serif);
    box-sizing: border-box;
}
.electricity-input-wrap {
    position: relative;
    width: 100%;
}

#electricity-address {
    width: 100%;
    height: 3rem;
    padding: 0 3.4rem 0 0.9rem;
    font-size: 1rem;
    font-family: var(--ec-font-mono, monospace);
    color: var(--ec-color-ink, #14181c);
    background: #ffffff;
    border: 1px solid var(--ec-color-line, rgba(20, 24, 28, 0.12));
    border-radius: 0.5rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    display: block !important;
}

#electricity-address:focus,
#electricity-address:focus-visible {
    border-color: var(--ec-color-primary, #1a9b4c);
}

#electricity-start {
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    right: 0.4rem;
    width: 4.6rem;
    height: 2.2rem;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ec-color-primary, #1a9b4c);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

#electricity-start svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

#electricity-start:hover:not(:disabled) {
    background: var(--ec-color-primary-dark, #157a3c);
}

#electricity-start:focus-visible {
    outline: 2px solid var(--ec-color-ink, #14181c);
    outline-offset: 2px;
}

#electricity-start:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Button row */
.electricity-widget button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    font-family: var(--ec-font-display, sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.electricity-widget button:focus-visible {
    outline: 2px solid var(--ec-color-ink, #14181c);
    outline-offset: 2px;
}

.electricity-widget button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#electricity-stop {
    background: transparent;
    color: var(--ec-color-ink, #14181c);
    border: 1px solid var(--ec-color-line, rgba(20, 24, 28, 0.12));
}

#electricity-stop:hover:not(:disabled) {
    border-color: var(--ec-color-ink, #14181c);
}

/* Output box */
.electricity-output {
    padding: 0;
    margin: 0;
    min-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    border-radius: 0;
}

/* Filter / sort bar */
.electricity-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: #ffffff;
    border: 1px solid var(--ec-color-line, rgba(20, 24, 28, 0.12));
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.electricity-filter-bar label {
    font-family: var(--ec-font-display, sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ec-color-ink, #14181c);
    white-space: nowrap;
}

#electricity-sort {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex: 1;
    max-width: 16rem;
    height: 2.4rem;
    padding: 0 2.2rem 0 0.8rem;
    font-family: var(--ec-font-body, 'Inter', -apple-system, sans-serif);
    font-size: 0.85rem;
    color: var(--ec-color-ink, #14181c);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    border: 1px solid var(--ec-color-line, rgba(20, 24, 28, 0.12));
    border-radius: 0.4rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

#electricity-sort:hover {
    border-color: var(--ec-color-ink, #14181c);
}

#electricity-sort:focus,
#electricity-sort:focus-visible {
    border-color: var(--ec-color-primary, #1a9b4c);
}