/*
 * GeoMyth GeoForming — account panel styling
 * CSS-only revision: no changes to plugin logic or form fields.
 * All selectors are scoped to .geof-account to avoid affecting Elementor,
 * Profile Builder or other forms elsewhere on the website.
 */

.geof-account {
    --geof-ink: #303439;
    --geof-muted: #666d73;
    --geof-line: #d8d5cd;
    --geof-surface: #faf9f6;
    --geof-surface-soft: #f1f0eb;
    --geof-accent: #edc36b;
    --geof-accent-hover: #dfb351;
    width: 100%;
    max-width: 900px;
    color: var(--geof-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.geof-account,
.geof-account * {
    box-sizing: border-box;
}

/* Title and quota. Explicit heading sizes override Elementor's global h2. */
.geof-account .geof-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
}

.geof-account .geof-header h2 {
    margin: 0 !important;
    padding: 0;
    color: var(--geof-ink) !important;
    font-family: inherit;
    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    text-transform: none !important;
}

.geof-account .geof-count {
    display: inline-block;
    margin: 0 !important;
    padding: 5px 10px;
    border: 1px solid var(--geof-line);
    border-radius: 6px;
    background: var(--geof-surface-soft);
    color: var(--geof-ink) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Independent cards for Computer 1 and Computer 2. */
.geof-account .geof-slot {
    margin: 0 0 14px;
    padding: 20px 22px;
    border: 1px solid var(--geof-line);
    border-radius: 10px;
    background: var(--geof-surface);
    box-shadow: 0 1px 2px rgba(34, 39, 43, 0.03);
    color: var(--geof-ink);
}

.geof-account .geof-slot h3 {
    margin: 0 0 9px !important;
    padding: 0;
    color: var(--geof-ink) !important;
    font-family: inherit;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em;
    text-transform: none !important;
}

.geof-account .geof-slot p {
    margin: 4px 0 !important;
    color: var(--geof-ink);
    font-size: 14px;
    line-height: 1.55;
}

.geof-account .geof-slot > p:first-of-type {
    margin: 0 0 9px !important;
    color: var(--geof-ink) !important;
    font-size: 14px;
    font-weight: 600;
}

.geof-account .geof-detail {
    color: var(--geof-muted) !important;
    font-size: 13px !important;
    font-weight: 400;
    opacity: 1 !important;
    overflow-wrap: anywhere;
}

.geof-account .geof-slot a {
    color: #876217 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.geof-account .geof-slot a:hover,
.geof-account .geof-slot a:focus-visible {
    color: #60450f !important;
}

/* Notices are visually separate from the cards. */
.geof-account > .geof-note {
    margin: 0 0 14px !important;
    padding: 10px 12px;
    border-left: 3px solid var(--geof-accent);
    border-radius: 0 5px 5px 0;
    background: var(--geof-surface-soft);
    color: var(--geof-ink) !important;
    font-size: 13px !important;
    line-height: 1.5;
    opacity: 1 !important;
}

.geof-account .geof-slot .geof-note,
.geof-account > .geof-note:last-child {
    color: var(--geof-muted) !important;
    font-size: 13px !important;
    line-height: 1.5;
    opacity: 1 !important;
}

/* Activation/replacement forms: single column, predictable reading order. */
.geof-account .geof-slot form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 15px 0 0 !important;
    padding: 15px 0 0;
    border: 0;
    border-top: 1px solid var(--geof-line);
    background: transparent;
}

/* Explicit color overrides fix white-on-light labels from global styles. */
.geof-account .geof-slot form label {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    color: var(--geof-ink) !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    opacity: 1 !important;
    visibility: visible !important;
}

.geof-account .geof-slot form input[type="file"] {
    display: block;
    width: 100%;
    max-width: 530px;
    min-height: 43px;
    margin: 7px 0 0 !important;
    padding: 6px 8px !important;
    border: 1px solid var(--geof-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--geof-ink) !important;
    font-family: inherit;
    font-size: 13px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.geof-account .geof-slot form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 10px;
    border: 1px solid #d6d3cb;
    border-radius: 4px;
    background: #eae9e4;
    color: var(--geof-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.geof-account .geof-slot form input[type="file"]::file-selector-button:hover {
    background: #dcd9d1;
}

/* Checkbox and its entire explanatory text stay visible as one row. */
.geof-account .geof-slot form label:has(> input[type="checkbox"]) {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e3e0d8;
    border-radius: 6px;
    background: var(--geof-surface-soft);
    color: var(--geof-ink) !important;
    font-weight: 400;
    cursor: pointer;
}

.geof-account .geof-slot form input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
    display: inline-block !important;
    position: static !important;
    flex: 0 0 17px;
    width: 17px !important;
    min-width: 17px;
    height: 17px !important;
    min-height: 17px;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    accent-color: #ad7a19;
    opacity: 1 !important;
    vertical-align: top;
    cursor: pointer;
}

.geof-account .geof-slot form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    min-height: 42px;
    margin: 0 !important;
    padding: 10px 17px !important;
    border: 1px solid #ddb35d !important;
    border-radius: 6px !important;
    background: var(--geof-accent) !important;
    color: #292d32 !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.geof-account .geof-slot form button[type="submit"]:hover {
    background: var(--geof-accent-hover) !important;
    border-color: #cca047 !important;
    color: #292d32 !important;
}

.geof-account .geof-slot form button[type="submit"]:focus-visible,
.geof-account .geof-slot form input:focus-visible,
.geof-account .geof-slot a:focus-visible {
    outline: 2px solid #a5751d !important;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .geof-account .geof-header h2 {
        font-size: 21px !important;
    }

    .geof-account .geof-slot {
        padding: 16px;
    }

    .geof-account .geof-slot form input[type="file"] {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .geof-account .geof-slot form button[type="submit"] {
        transition: none;
    }
}