/*
 * Refund Checker — stylesheet
 * Version: 1.5
 *
 * Colour strategy:
 *   All colour values use Divi 5 global CSS custom properties so the widget
 *   automatically follows any change made in Divi > Theme Customiser > Global
 *   Colours. Each var() call includes a hardcoded fallback after the comma —
 *   this keeps the widget looking correct if Divi hasn't loaded or the variable
 *   name ever changes.
 *
 *   --gcid-primary-color   #89023e   Deep crimson  — buttons, accents, focus
 *   --gcid-secondary-color #f7b84b   Amber         — hover state, border accent
 *   --gcid-heading-color   #f1ebeb   Near-white    — (available if needed)
 *   --gcid-body-color      #605f5f   Dark grey     — labels, result text
 *   --gcid-link-color      #93b7be   Muted teal    — (available if needed)
 *   --gcid-y43rzvjcdl      #ffffff   White         — button text, backgrounds
 *
 * Specificity strategy:
 *   All selectors are prefixed with .refund-checker so they outrank Divi 5's
 *   own form/button resets without needing !important.
 *
 * File location: assets/refund-style.css inside the plugin folder.
 */

/* ---------------------------------------------------------------------------
   Wrapper card
--------------------------------------------------------------------------- */

.refund-checker {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* White background using the Divi global white swatch. */
    background: var( --gcid-y43rzvjcdl, #ffffff );
    padding: 1.5em;
    /* Subtle border using the secondary/accent colour. */
    border: 1px solid var( --gcid-secondary-color, #f7b84b );
    border-radius: 8px;
    margin: 1em 0;
}

/* ---------------------------------------------------------------------------
   Form layout
--------------------------------------------------------------------------- */

.refund-checker form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0;    /* Override Divi 5 form margin resets. */
    padding: 0;
}

.refund-checker label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.25em;
    /* Body colour for labels — informational, not primary. */
    color: var( --gcid-body-color, #605f5f );
}

/* ---------------------------------------------------------------------------
   Date input and time select
--------------------------------------------------------------------------- */

.refund-checker input[type="date"],
.refund-checker select {
    padding: 0.5em;
    font-size: 1em;
    border-radius: 4px;
    /* Neutral border at rest — colour appears only on focus (see below). */
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    /* White fill using the global white swatch. */
    background: var( --gcid-y43rzvjcdl, #ffffff );
    /* Body colour for the selected/typed text. */
    color: var( --gcid-body-color, #605f5f );
    line-height: 1.4; /* Divi 5 can set this to 1; reset it. */
}

/* Focus state — primary brand colour signals the active field clearly. */
.refund-checker input[type="date"]:focus,
.refund-checker select:focus {
    outline: 2px solid var( --gcid-primary-color, #89023e );
    outline-offset: 2px;
    border-color: var( --gcid-primary-color, #89023e );
}

/* ---------------------------------------------------------------------------
   Submit button
   Divi 5 targets buttons with its own CSS custom properties and data-*
   attributes. Prefixing with .refund-checker gives sufficient specificity
   to override those styles without !important.
--------------------------------------------------------------------------- */

.refund-checker button[type="submit"] {
    display: inline-block;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 4px;
    border: none;
    width: 100%;
    box-sizing: border-box;
    /* Primary brand crimson for the button background. */
    background-color: var( --gcid-primary-color, #89023e );
    /* White text against crimson — high contrast. */
    color: var( --gcid-y43rzvjcdl, #ffffff );
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Divi 5 can apply letter-spacing and text-transform to buttons. */
    letter-spacing: normal;
    text-transform: none;
}

/* Hover: shift to secondary amber — warm, intentional, on-brand. */
.refund-checker button[type="submit"]:hover {
    background-color: var( --gcid-secondary-color, #f7b84b );
    color: var( --gcid-y43rzvjcdl, #ffffff );
}

/* Focus: match the input focus style for keyboard-navigation consistency. */
.refund-checker button[type="submit"]:focus {
    background-color: var( --gcid-primary-color, #89023e );
    color: var( --gcid-y43rzvjcdl, #ffffff );
    outline: 2px solid var( --gcid-primary-color, #89023e );
    outline-offset: 2px;
}

/* Disabled state — neutral grey while AJAX request is in flight.
   No brand colour here: colour implies interactivity. */
.refund-checker button[type="submit"]:disabled {
    background-color: #999;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Result area — base styles
--------------------------------------------------------------------------- */

.refund-result {
    margin-top: 1em;
    font-size: 1.05em;
    line-height: 1.5;
    min-height: 1.5em;   /* Prevents layout jump when result appears. */
    border-radius: 6px;
    /* Padding is 0 when empty so no coloured box flashes on page load.
       JavaScript adds a state class which triggers the padding below. */
    padding: 0;
    /* Smooth transition when the background colour and padding appear. */
    transition: background-color 0.35s ease, padding 0.35s ease,
                border-color 0.35s ease, color 0.35s ease;
    color: var( --gcid-body-color, #605f5f );
}

.refund-result p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Result area — colour-coded outcome states
   JavaScript adds one of these three classes to #refund-result after each
   AJAX response. They are cleared before each new submission so the box
   always resets cleanly.

   Colour rationale:
     Green  — universally understood as "all clear / approved"
     Amber  — caution / partial outcome; echoes --gcid-secondary-color palette
     Red    — stop / denied; universally understood

   Pastel backgrounds are used deliberately — full-saturation traffic-light
   colours feel alarming in a form context. The dark text colours maintain
   WCAG AA contrast against the pastel fills.

   The <strong> verdict word inherits the darker text colour from each state
   rather than using the brand crimson, which would be illegible against the
   red background in particular.
--------------------------------------------------------------------------- */

/* Full refund — green */
.refund-result.result-refund {
    background-color: #d4edda;
    border: 1px solid #b8dbc5;
    color: #1a5c2a;
    padding: 0.85em 1em;
}

.refund-result.result-refund p strong {
    color: #1a5c2a;
}

/* Credit voucher — amber */
.refund-result.result-voucher {
    background-color: #fff3cd;
    border: 1px solid #f0d87a;
    color: #7a4f00;
    padding: 0.85em 1em;
}

.refund-result.result-voucher p strong {
    color: #7a4f00;
}

/* No refund — red */
.refund-result.result-no-refund {
    background-color: #f8d7da;
    border: 1px solid #f0b8bc;
    color: #721c24;
    padding: 0.85em 1em;
}

.refund-result.result-no-refund p strong {
    color: #721c24;
}

/* Neutral error state — shown for validation messages and network errors.
   No colour signal — these are not booking outcomes.
   Contrast note: --gcid-body-color (#605f5f) gives 5.9:1 on #f4f4f4 — passes
   AA but not AAA. We use #595959 here instead (7.0:1 — clears AAA) as a
   conservative anchor for this error state. */
.refund-result.result-error {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    color: #595959;
    padding: 0.85em 1em;
}

.refund-result.result-error p strong {
    color: #595959;
}

/* ---------------------------------------------------------------------------
   Responsive — wider screens: constrained centred card
--------------------------------------------------------------------------- */

@media ( min-width: 768px ) {
    .refund-checker {
        max-width: 560px;
        margin: 1em auto;
    }
}