/* ==========================================================================
   ROG Gift Card — frontend styles
   Themed to match the Red October Games theme. Values reference the theme's
   CSS custom properties (--rog-*) with hard fallbacks so the cards still look
   right if the stylesheet ever loads without the theme.
   - .rss-gc-fields   → purchase form on the single gift-card product page
   - .rss-gc-wrapper  → redemption field on the cart / checkout pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Purchase form (single product page)
   -------------------------------------------------------------------------- */

.rss-gc-fields {
    margin: 1.5em 0;
    padding: 1.5em 1.6em;
    background: var(--rog-bg-light, #383838);
    border: 1px solid var(--rog-border, #4a4a4a);
    border-radius: var(--rog-radius, 6px);
    color: var(--rog-text, #f0f0f0);
}

.rss-gc-fields__title {
    position: relative;
    margin: 0 0 1.2em;
    padding-bottom: 0.55em;
    font-family: var(--rog-font-heading, 'DM Serif Display', Georgia, serif);
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.2;
    color: var(--rog-text, #f0f0f0);
    border-bottom: 1px solid var(--rog-border, #4a4a4a);
}

.rss-gc-fields__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: var(--rog-primary, #b50505);
}

/* Single-column layout — neutralise WooCommerce's float-based half-width rows. */
.rss-gc-fields .form-row {
    float: none;
    width: 100%;
    margin: 0 0 1.1em;
    padding: 0;
}

.rss-gc-fields .form-row:last-of-type {
    margin-bottom: 0;
}

.rss-gc-fields label {
    display: block;
    margin-bottom: 0.45em;
    font-family: var(--rog-font-body, 'Inter', -apple-system, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rog-text-muted, #a0a0a0);
}

.rss-gc-fields abbr.required {
    border: none;
    text-decoration: none;
    color: var(--rog-primary, #b50505);
}

.rss-gc-fields .input-text {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: var(--rog-bg, #2e2e2e);
    border: 1px solid var(--rog-border, #4a4a4a);
    border-radius: var(--rog-radius, 6px);
    color: var(--rog-text, #f0f0f0);
    font-family: var(--rog-font-body, 'Inter', -apple-system, sans-serif);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color var(--rog-transition, 0.25s ease),
                box-shadow var(--rog-transition, 0.25s ease);
}

.rss-gc-fields .input-text::placeholder {
    color: var(--rog-text-muted, #a0a0a0);
    opacity: 1;
}

.rss-gc-fields .input-text:focus {
    outline: none;
    border-color: var(--rog-accent, #ee780a);
    box-shadow: 0 0 0 3px rgba(238, 120, 10, 0.18);
}

.rss-gc-fields textarea.input-text {
    min-height: 90px;
    resize: vertical;
}

/* Render the native date picker (calendar icon) in dark mode. */
.rss-gc-fields input[type="date"].input-text {
    color-scheme: dark;
}

.rss-gc-fields .description {
    display: block;
    margin-top: 0.5em;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--rog-text-muted, #a0a0a0);
}

/* --------------------------------------------------------------------------
   Redemption field (cart / checkout pages)
   -------------------------------------------------------------------------- */

.rss-gc-wrapper {
    margin: 1.5em 0;
    padding: 1.2em 1.4em;
    background: var(--rog-bg-light, #383838);
    border: 1px solid var(--rog-border, #4a4a4a);
    border-radius: var(--rog-radius, 6px);
    color: var(--rog-text, #f0f0f0);
}

.rss-gc-heading {
    margin: 0 0 0.8em;
    font-family: var(--rog-font-heading, 'DM Serif Display', Georgia, serif);
    font-size: 1.2rem;
    font-weight: normal;
    color: var(--rog-text, #f0f0f0);
}

.rss-gc-applied {
    list-style: none;
    margin: 0 0 0.8em;
    padding: 0;
}

.rss-gc-applied li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4em 0;
    border-bottom: 1px solid var(--rog-border, #4a4a4a);
    font-size: 0.9em;
}

.rss-gc-gan {
    font-family: monospace;
    color: var(--rog-text-muted, #a0a0a0);
    flex: 1;
}

.rss-gc-amount {
    font-weight: 600;
    color: var(--rog-success, #28a745);
}

.rss-gc-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rog-danger, #dc3545);
    font-size: 1.1em;
    line-height: 1;
    padding: 0 0.2em;
    transition: color var(--rog-transition, 0.25s ease);
}

.rss-gc-remove:hover {
    color: var(--rog-primary, #b50505);
}

.rss-gc-input-row {
    display: flex;
    gap: 0.5em;
    align-items: center;
    flex-wrap: wrap;
}

.rss-gc-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    background: var(--rog-bg, #2e2e2e);
    border: 1px solid var(--rog-border, #4a4a4a);
    border-radius: var(--rog-radius, 6px);
    color: var(--rog-text, #f0f0f0);
    font-family: monospace;
    letter-spacing: 1px;
    transition: border-color var(--rog-transition, 0.25s ease),
                box-shadow var(--rog-transition, 0.25s ease);
}

.rss-gc-input::placeholder {
    color: var(--rog-text-muted, #a0a0a0);
    letter-spacing: normal;
}

.rss-gc-input:focus {
    outline: none;
    border-color: var(--rog-accent, #ee780a);
    box-shadow: 0 0 0 3px rgba(238, 120, 10, 0.18);
}

.rss-gc-apply {
    white-space: nowrap;
    padding: 10px 18px;
    background: var(--rog-primary, #b50505);
    color: #fff;
    border: none;
    border-radius: var(--rog-radius, 6px);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--rog-transition, 0.25s ease);
}

.rss-gc-apply:hover {
    background: var(--rog-primary-dark, #8a0404);
}

.rss-gc-message {
    margin-top: 0.6em;
    font-size: 0.9em;
    min-height: 1.2em;
}

.rss-gc-message.success {
    color: var(--rog-success, #28a745);
}

.rss-gc-message.error {
    color: var(--rog-danger, #dc3545);
}