/**
 * Tent Quote Options — Form Styles
 * Grand Events Texas — getx-custom plugin
 * Enqueued via getx-custom.php on product pages
 */

/* ── Wrapper ────────────────────────────────────────── */
.getx-tent-options {
    --tent-accent:       #2c6e49;
    --tent-accent-hover: #245c3d;
    --tent-border:       #d8dde3;
    --tent-bg:           #f8f9fa;
    --tent-label:        #1a1a2e;
    --tent-label-sm:     #555f6d;
    --tent-pill-bg:      #eef0f3;
    --tent-pill-active:  #2c6e49;
    --tent-pill-text:    #3a3a3a;
    --tent-radius:       6px;
    --tent-gap:          18px;

    font-family: inherit;
    color: var(--tent-label);
    max-width: 600px;
}

/* ── Section heading ────────────────────────────────── */
.getx-tent-options-heading {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tent-accent);
    color: var(--tent-label);
}

/* ── Form layout ────────────────────────────────────── */
.getx-tent-options-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tent-gap);
    align-items: start;
}

/* Fields that need full width */
.getx-tent-field.getx-tent-quantity-row,
.getx-tent-actions,
.getx-tent-field--full {
    grid-column: 1 / -1;
}

.getx-tent-options-form > .getx-tent-bottom-row {
    grid-column: 1 / -1;
}

/* ── Individual field ───────────────────────────────── */
.getx-tent-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ── Labels ─────────────────────────────────────────── */
.getx-tent-field .field-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tent-label-sm);
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ── Dropdowns ──────────────────────────────────────── */
.getx-tent-select {
    width: 100%;
    padding: 9px 32px 9px 11px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--tent-label);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555f6d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    border: 1px solid var(--tent-border);
    border-radius: var(--tent-radius);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.4;
    height: auto;
    box-shadow: none;
}

.getx-tent-select:focus {
    outline: none;
    border-color: var(--tent-accent);
    box-shadow: 0 0 0 3px rgba(44, 110, 73, 0.12);
}

.getx-tent-select:hover {
    border-color: #9aa5b1;
}

/* ── Radio groups — pill style ──────────────────────── */
.getx-tent-radio-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.radio-option {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Hide the actual radio input */
.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* The pill itself */
.radio-option .radio-label-text,
.radio-option > span {
    display: inline-block;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--tent-pill-text);
    background: var(--tent-pill-bg);
    border: 1px solid var(--tent-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

/* Since the label wraps the input + text directly (no inner span in current markup),
   we style using the sibling pattern via JS class toggle */
.radio-option:hover .radio-label-text,
.radio-option:hover > span {
    border-color: var(--tent-accent);
    color: var(--tent-accent);
}

.radio-option.is-selected .radio-label-text,
.radio-option.is-selected > span {
    background: var(--tent-accent);
    border-color: var(--tent-accent);
    color: #fff;
}

/* ── Text type field (textarea) ─────────────────────── */
.getx-tent-textarea {
    width: 100%;
    padding: 9px 11px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--tent-label);
    background: #fff;
    border: 1px solid var(--tent-border);
    border-radius: var(--tent-radius);
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.getx-tent-text-input {
    width: 100%;
    padding: 9px 11px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--tent-label);
    background: #fff;
    border: 1px solid var(--tent-border);
    border-radius: var(--tent-radius);
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    height: auto;
}

.getx-tent-text-input:focus {
    outline: none;
    border-color: var(--tent-accent);
    box-shadow: 0 0 0 3px rgba(44, 110, 73, 0.12);
}

.getx-tent-text-input:hover { border-color: #9aa5b1; }

.getx-tent-text-input::placeholder { color: #aab0b8; }

.getx-tent-textarea:focus {
    outline: none;
    border-color: var(--tent-accent);
    box-shadow: 0 0 0 3px rgba(44, 110, 73, 0.12);
}

.getx-tent-textarea::placeholder { color: #aab0b8; }

/* ── Quantity row ───────────────────────────────────── */
.getx-tent-quantity-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid var(--tent-border);
    margin-top: 4px;
}

.getx-tent-quantity-row .field-label {
    white-space: nowrap;
    min-width: 60px;
}

.getx-tent-quantity {
    width: 72px !important;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--tent-label);
    background: #fff;
    border: 1px solid var(--tent-border);
    border-radius: var(--tent-radius);
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -moz-appearance: textfield;
}

.getx-tent-quantity::-webkit-inner-spin-button,
.getx-tent-quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.getx-tent-quantity:focus {
    outline: none;
    border-color: var(--tent-accent);
    box-shadow: 0 0 0 3px rgba(44, 110, 73, 0.12);
}

/* ── Actions row ────────────────────────────────────── */
.getx-tent-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Submit button ──────────────────────────────────── */
button.getx-tent-add-to-cart.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top:20px;
    padding: 11px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--tent-accent);
    border: 2px solid transparent;
    border-radius: var(--tent-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    min-width: 160px;
    line-height: 1;
}

.getx-tent-add-to-cart.button:hover {
    background-color: var(--tent-accent-hover);
    box-shadow: 0 2px 8px rgba(44, 110, 73, 0.25);
}

.getx-tent-add-to-cart.button:active {
    transform: translateY(1px);
}

.getx-tent-add-to-cart.button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ── Feedback message ───────────────────────────────── */
.getx-tent-message {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0;
    min-height: 1em;
}

.getx-tent-message.success {
    color: var(--tent-accent);
}

.getx-tent-message.error {
    color: #c0392b;
}

@media (max-width: 600px) {
    .getx-tent-options-form {
        grid-template-columns: 1fr;
    }

    .getx-tent-bottom-row {
        flex-wrap: wrap;
    }
    .getx-tent-textarea {
    width: 100%;
    }
}

/* ── Responsive: stack to single column under 480px ─── */
@media (max-width: 480px) {
    .getx-tent-options-form {
        grid-template-columns: 1fr;
    }

    .getx-tent-field.getx-tent-quantity-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =====================================================
 * Fabrication form — alias all tent form rules
 * getx-fabrication-options-form shares all layout/style
 * with getx-tent-options-form. Add selectors here rather
 * than duplicating rules above.
 * ===================================================== */

.getx-fabrication-options-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tent-gap);
    align-items: start;
}

.getx-fabrication-options-form .getx-tent-field--full,
.getx-fabrication-options-form .getx-tent-actions {
    grid-column: 1 / -1;
}

.getx-fabrication-options-form > .getx-tent-bottom-row {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .getx-fabrication-options-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .getx-fabrication-options-form {
        grid-template-columns: 1fr;
    }
}