/* ==========================================================================
   VWW Portal Form Style (matches screenshot: clean labels + underline inputs)
   Apply by wrapping portal forms in: <div class="vww-portal"> ... </div>
   ========================================================================== */

.vww-portal {
    --vww-text: #111;
    --vww-muted: #8a8a8a;
    --vww-line: #cfcfcf;
    --vww-line-focus: #111;
    --vww-error: #e14b4b;
    --vww-bg: #fff;

    color: var(--vww-text);
    background: var(--vww-bg);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.vww-portal .vww-form {
    max-width: 720px;
}

.vww-portal .vww-field {
    margin: 0 0 28px;
}

.vww-portal .vww-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--vww-text);
}
.vww-portal  label {
    font-weight: bold;
}
.vww-portal .vww-label .required,
.vww-portal .vww-label .vww-required {
    color: var(--vww-error);
    margin-left: 2px;
    font-weight: 700;
}

.vww-portal input[type="text"],
.vww-portal input[type="email"],
.vww-portal input[type="tel"],
.vww-portal input[type="number"],
.vww-portal input[type="url"],
.vww-portal input[type="date"],
.vww-portal input[type="password"],
.vww-portal select,
.vww-portal textarea {
    width: 100%;
    box-sizing: border-box;

    /* underline look */
    border: 0;
    border-bottom: 1px solid var(--vww-line);
    border-radius: 0;

    background: transparent;
    color: var(--vww-text);

    font-size: 16px;
    line-height: 1.35;
    padding: 10px 0 18px;
    margin-bottom: 15px;
    outline: none;
    box-shadow: none;
}

/* placeholder style (light gray like screenshot) */
.vww-portal input::placeholder,
.vww-portal textarea::placeholder {
    color: #b0b0b0;
    opacity: 1;
}

/* focus state */
.vww-portal input:focus,
.vww-portal select:focus,
.vww-portal textarea:focus {
    border-bottom-color: var(--vww-line-focus);
}

/* textarea similar spacing */
.vww-portal textarea {
    min-height: 110px;
    resize: vertical;
    padding-top: 6px;
}

/* select arrow (simple, consistent) */
.vww-portal select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 28px;
    background-image:
            linear-gradient(45deg, transparent 50%, var(--vww-text) 50%),
            linear-gradient(135deg, var(--vww-text) 50%, transparent 50%);
    background-position:
            calc(100% - 14px) 55%,
            calc(100% - 9px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* date input: keep it clean */
.vww-portal input[type="date"] {
    min-height: 44px;
}

/* Error state (underline red + message) */
.vww-portal .vww-field.is-error input,
.vww-portal .vww-field.is-error select,
.vww-portal .vww-field.is-error textarea,
.vww-portal input.is-error,
.vww-portal select.is-error,
.vww-portal textarea.is-error {
    border-bottom-color: var(--vww-error);
}

.vww-portal .vww-error {
    margin-top: 8px;
    font-size: 13px;
    color: var(--vww-error);
}

/* Helpful optional hint text */
.vww-portal .vww-hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--vww-muted);
}

/* Submit button (bottom right vibe) */
.vww-portal .vww-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.vww-portal button,
.vww-portal .vww-button,
.vww-portal input[type="submit"] {
    appearance: none;
    border: 0;
    border-radius: 2px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;

    background: #d9d9d9;
    color: #fff;
    cursor: pointer;
}

.vww-portal button:hover,
.vww-portal .vww-button:hover,
.vww-portal input[type="submit"]:hover {
    filter: brightness(0.96);
}

.vww-portal button:disabled,
.vww-portal .vww-button.is-disabled,
.vww-portal input[type="submit"]:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

/* Reduce weird browser autofill colors */
.vww-portal input:-webkit-autofill,
.vww-portal textarea:-webkit-autofill,
.vww-portal select:-webkit-autofill {
    -webkit-text-fill-color: var(--vww-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* ==========================================================================
   VWW FIX: don't override portal page typography/background, and keep inputs white
   Add at bottom of portal.css
   ========================================================================== */

/* Do NOT force global text/background in the portal container */
.vww-portal {
    color: inherit !important;
    background: transparent !important;
}

/* Force form controls to have a white background (prevents grey showing through) */
.vww-portal input[type="text"],
.vww-portal input[type="email"],
.vww-portal input[type="tel"],
.vww-portal input[type="number"],
.vww-portal input[type="url"],
.vww-portal input[type="date"],
.vww-portal input[type="password"],
.vww-portal select,
.vww-portal textarea {
    background-color: #fff !important;
}

/* If your theme applies grey backgrounds via wrappers, keep the input itself white */
.vww-portal input,
.vww-portal select,
.vww-portal textarea {
    background-image: none !important;
}


/* ==========================================================================
   VWW FIX: Admin selector list text inherits white from theme buttons
   ========================================================================== */

.vww-portal .vww-admin-selector,
.vww-portal .vww-admin-selector * {
    color: inherit;
}

/* Force readable text inside the selector buttons */
.vww-portal .vww-admin-selector__list button,
.vww-portal .vww-admin-selector__list button * {
    color: #111 !important;
}

/* Keep the input white and readable too (in case theme styles it) */
.vww-portal .vww-admin-selector input[type="text"] {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #ddd !important;
}

/* Optional: make the button look consistent even if theme styles buttons globally */
.vww-portal .vww-admin-selector__list button {
    background: #fff !important;
    border: 1px solid #ddd !important;
}

/* ==========================================================================
   VWW FIX: secondary buttons inheriting white text from theme
   ========================================================================== */

/* Default (secondary) portal buttons: dark text on white background */
.vww-portal button[type="button"] {
    color: #111 !important;
}

/* Primary / dark buttons keep white text */
.vww-portal button[type="button"][style*="background:#111"],
.vww-portal button[type="button"].vww-button--primary {
    color: #fff !important;
}


/* ==========================================================================
   VWW Gallery thumbnail remove button (hover-only, visible X)
   ========================================================================== */

/* Thumbnail wrapper (the div around img + button) */
.vww-portal .vww-gallery-thumb {
    position: relative;
}

/* Hide remove button by default */
.vww-portal .vww-gallery-thumb .vww-gallery-remove {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Show remove button on hover */
.vww-portal .vww-gallery-thumb:hover .vww-gallery-remove {
    opacity: 1;
    pointer-events: auto;
}

/* Remove (X) button styling */
.vww-portal .vww-gallery-remove {
    position: absolute;
    top: 6px;
    right: 6px;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: none;

    background: rgba(0, 0, 0, 0.75);
    color: #fff !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    z-index: 5;
}

/* Ensure themes don't override button text color */
.vww-portal .vww-gallery-remove *,
.vww-portal .vww-gallery-remove::before,
.vww-portal .vww-gallery-remove::after {
    color: #fff !important;
}

/* Optional hover feedback */
.vww-portal .vww-gallery-remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   VWW QR Codes & Sharing
   ========================================================================== */

.vww-portal .vww-qr-wrap {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 10px;
}

.vww-portal .vww-qr-box {
    width: 220px;
    height: 220px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vww-portal .vww-qr-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vww-portal .vww-qr-note {
    opacity: .75;
    font-size: 13px;
    margin-top: 6px;
}

/* ==========================================================================
   VWW Portal Tabs
   ========================================================================== */

.vww-portal .vww-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 0;
}

.vww-portal .vww-tab {
    appearance: none;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vww-portal .vww-tab:hover {
    border-color: #bbb;
}

.vww-portal .vww-tab.is-active {
    background: #111;
    border-color: #111;
    color: #fff !important; /* needed because you force button text color elsewhere */
}

.vww-portal .vww-tab:focus {
    outline: 2px solid rgba(0,0,0,0.35);
    outline-offset: 2px;
}

.vww-portal .vww-tabpanels {
    margin-top: 10px;
}

.vww-portal .vww-panel[hidden] {
    display: none !important;
}
.vww-portal .vww-panel[hidden] {
    display: none !important;
}

/* ==========================================================================
   VWW Portal – Boxed Fields (Clearer Inputs)
   ========================================================================== */

/* Make portal form controls look like distinct fields (not just underlines) */
.vww-portal input[type="text"],
.vww-portal input[type="email"],
.vww-portal input[type="tel"],
.vww-portal input[type="number"],
.vww-portal input[type="url"],
.vww-portal input[type="date"],
.vww-portal input[type="password"],
.vww-portal select,
.vww-portal textarea {
    border: 1px solid #d8d8d8 !important;
    border-radius: 10px !important;
    padding: 12px 12px !important;
    margin-bottom: 14px !important;
    background-color: #fff !important;
}

/* Keep textarea comfortable */
.vww-portal textarea {
    padding-top: 12px !important;
}

/* Stronger focus ring so it's obvious what you're editing */
.vww-portal input:focus,
.vww-portal select:focus,
.vww-portal textarea:focus {
    border-color: #111 !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.12) !important;
}

/* Make checkboxes/radios not get weird boxed styles */
.vww-portal input[type="checkbox"],
.vww-portal input[type="radio"] {
    width: auto !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Add a subtle border/padding around each card section in the portal */
.vww-portal .vww-card,
.vww-portal .vww-panel > div,
.vww-portal .vww-panel .vww-form-section {
    /* safe no-op unless classes exist; helps if you add wrappers later */
}

/* Improve label spacing and reduce “crowding” */
.vww-portal label,
.vww-portal .vww-label {
    margin-top: 14px;
    margin-bottom: 6px;
}

/* Small helper: make instructional note text less cramped */
.vww-portal .vww-qr-note {
    margin-top: 10px;
}