/**
 * Data Storage Converter — widget styles.
 *
 * Styles the front-end data storage converter widget: a centered card
 * containing two columns (From / To), each with a large numeric input stacked
 * over a unit <select>. Light-themed (dark text on a light surface), fully
 * themeable via the shared `--ci-*` custom properties with hard-coded
 * genbuz-palette fallbacks so the widget still looks right when the global
 * variables are unavailable.
 *
 * Colour palette (genbuz.net brand):
 *   - Primary blue  : #0058be  (--ci-primary)
 *   - Text primary  : #404040
 *   - Text secondary: #7c839b
 *   - Surfaces/borders keep their functional slate/grey values by design.
 *
 * Each rule below only affects elements inside `.ciw-container`, so multiple
 * widgets on the same page do not collide.
 */

/* Outer wrapper: centres the widget card and adds vertical breathing room. */
.ciw-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0px 40px 0px;
}

/* The widget card itself. */
.ciw-converter {
    width: 100%;
    max-width: 750px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ci-text-primary, #404040);
    background-color: var(--ci-background, #ffffff);
    border: 1px solid var(--ci-border, #e2e8f0);
    border-radius: var(--ci-radius-md, 12px);
    padding: 24px;
    box-shadow: var(--ci-shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
}

/* Two-column layout: From (left) | To (right). */
.ciw-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* A single From/To column: stacks the value input directly on the unit select. */
.ciw-column {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Large numeric value input (top half of a column). */
.ciw-value {
    width: 100%;
    display: block;
    margin: auto;
    text-align: center;
    padding: 12px 14px;
    font-size: 3rem !important;
    font-weight: 500;
    font-family: inherit;
    color: var(--ci-text-primary, #404040);
    background-color: var(--ci-input-background, #e8e8e8);
    border: 1px solid var(--ci-border, #e2e8f0);
    border-bottom: none !important;
    border-radius: var(--ci-radius-base, 8px);
    /* Square off the bottom corners so the input visually joins the select below. */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -moz-appearance: textfield;
}

/* Hide the native number spinners in WebKit/Blink browsers. */
.ciw-value::-webkit-outer-spin-button,
.ciw-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ciw-value::placeholder {
    color: var(--ci-text-secondary, #7c839b) !important;
}

/* Focused value input: subtle border change, no glow. */
.ciw-value:focus {
    outline: none;
    border-color: var(--ci-border-dark, #cbd5e1) !important;
    box-shadow: none !important;
}

/* Unit <select> (bottom half of a column) with a custom chevron icon. */
.ciw-unit-select {
    width: 100%;
    padding: 15px 40px 15px 20px;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--ci-text-primary, #404040);
    background-color: var(--ci-surface, #f8fafc);
    border: 1px solid var(--ci-border, #e2e8f0);
    border-top: none;
    border-radius: var(--ci-radius-base, 8px);
    /* Square off the top corners to meet the input above. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    cursor: pointer;
    appearance: none;
    /* Inline SVG chevron (encoded). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focused unit select: genbuz brand-blue ring. */
.ciw-unit-select:focus {
    outline: none;
    border-color: var(--ci-primary, #0058be);
    box-shadow: 0 0 0 3px rgba(0, 88, 190, 0.15);
}

.ciw-unit-select:hover {
    border-color: var(--ci-border-dark, #cbd5e1);
}

/* Tablet: drop the outer horizontal padding. */
@media (max-width: 1024px) {
    .ciw-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Phone: tighten the card padding and shrink the input/select text. */
@media (max-width: 479px) {
    .ciw-converter {
        padding: 16px;
    }

    .ciw-columns {
        gap: 12px;
    }

    .ciw-value {
        padding: 10px 12px;
        font-size: 0.9375rem;
    }

    .ciw-unit-select {
        font-size: 0.8125rem;
    }
}