/* fw-reklamace — frontend styles.
   Everything namespaced under .fwr_ so theme rules don't leak in.
   `text-transform: none` is set on labels/titles defensively because many
   WP themes uppercase h3 by default. */

.fwr_wrap {
    --fwr-radius: 10px;
    --fwr-border: #e5e7eb;
    --fwr-muted: #6b7280;
    --fwr-soft: #f9fafb;
    --fwr-customer-bg: #eff6ff;
    --fwr-customer-bd: #bfdbfe;
    --fwr-shop-bg: #f0fdf4;
    --fwr-shop-bd: #bbf7d0;
    --fwr-primary: #2563eb;
    --fwr-primary-hover: #1d4ed8;
    --fwr-primary-fg: #fff;

    max-width: 920px;
    margin: 0 auto;
    padding: 1.2em 0 2.4em 0;
    color: #1f2937;
}

.fwr_wrap *,
.fwr_wrap *::before,
.fwr_wrap *::after { box-sizing: border-box; }

.fwr_wrap h1,
.fwr_wrap h2,
.fwr_wrap h3,
.fwr_wrap h4,
.fwr_wrap .fwr_title,
.fwr_wrap label { text-transform: none; letter-spacing: 0; }

.fwr_page_title { margin: 0 0 1em 0; font-size: 1.6em; line-height: 1.25; }
.fwr_title      { margin: 1.6em 0 .6em 0; font-size: 1.1em; font-weight: 600; }

/* ---------- Header strip on detail / list / search ---------- */
.fwr_detail_head,
.fwr_facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8em;
    padding: 1em 1.2em;
    background: var(--fwr-soft);
    border: 1px solid var(--fwr-border);
    border-radius: var(--fwr-radius);
    margin-bottom: 1.2em;
}
.fwr_detail_head strong,
.fwr_facts strong       { font-size: 1.05em; }
.fwr_detail_head .fwr_order_ref,
.fwr_facts .fwr_order_ref { color: var(--fwr-muted); }

.fwr_state {
    display: inline-block;
    padding: .25em .75em;
    border-radius: 999px;
    color: #fff;
    font-size: .82em;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---------- Cards (used for description / chat block) ---------- */
.fwr_card,
.fwr_desc_customer,
.fwr_desc_eshop,
.fwr_chat {
    background: #fff;
    border: 1px solid var(--fwr-border);
    border-radius: var(--fwr-radius);
    padding: 1em 1.2em;
    margin-bottom: 1.2em;
}
.fwr_desc_customer p,
.fwr_desc_eshop p   { margin: 0; }

/* ---------- Chat ---------- */
.fwr_chat {
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: .7em;
}
.fwr_msg {
    max-width: 80%;
    padding: .7em .9em;
    border-radius: 12px;
    border: 1px solid transparent;
    position: relative;
}
.fwr_msg_body  { line-height: 1.4; }
.fwr_msg_body p { margin: 0 0 .4em 0; }
.fwr_msg_body p:last-child { margin: 0; }
.fwr_msg_meta {
    margin-top: .4em;
    font-size: .78em;
    color: var(--fwr-muted);
}
.fwr_msg_customer {
    background: var(--fwr-customer-bg);
    border-color: var(--fwr-customer-bd);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.fwr_msg_shop {
    background: var(--fwr-shop-bg);
    border-color: var(--fwr-shop-bd);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.fwr_chat .fwr_empty {
    color: var(--fwr-muted);
    font-style: italic;
    margin: 0;
    align-self: center;
}

/* ---------- Forms ---------- */
.fwr_form {
    background: #fff;
    border: 1px solid var(--fwr-border);
    border-radius: var(--fwr-radius);
    padding: 1.2em;
}
.fwr_form .form-row { margin: 0 0 1em 0; }
.fwr_form label     { display: block; font-weight: 500; margin-bottom: .35em; }
.fwr_form input[type="text"],
.fwr_form input[type="email"],
.fwr_form input[type="number"],
.fwr_form input[type="file"],
.fwr_form select,
.fwr_form textarea {
    width: 100%;
    padding: .55em .7em;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid var(--fwr-border);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fwr_form input:focus,
.fwr_form select:focus,
.fwr_form textarea:focus {
    outline: 0;
    border-color: var(--fwr-primary);
    /* color-mix lets us derive a soft focus halo from --fwr-primary without
       JS. Falls back gracefully in browsers older than Safari 16.4 by
       dropping the box-shadow entirely. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fwr-primary) 22%, transparent);
}
.fwr_form textarea { resize: vertical; min-height: 90px; }

/* Submit buttons. We avoid the WC `.button` namespace entirely because some
   themes/plugins JS-rewrite labels on every `<button>` they find on the
   frontend (Add to Cart). The text now lives inside an inner `<span>` and
   the class is our own — themes don't know `.fwr_action`. */
.fwr_wrap .button,
.fwr_wrap .fwr_action,
.fwr_wrap input[type="submit"].fwr_action,
.fwr_form button[type="submit"],
.fwr_form input[type="submit"] {
    background: var(--fwr-primary);
    color: var(--fwr-primary-fg);
    border: 0;
    padding: .65em 1.2em;
    font: inherit;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
    text-decoration: none;
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
}
.fwr_wrap .fwr_action .fwr_action_label { color: inherit; pointer-events: none; }

/* Avada (and a few other themes) inject a phantom "Add to Cart" submit into
   every form they find on the frontend. Hide any submit-ish element inside
   our forms that isn't one of ours. JS in frontend.js removes them too —
   CSS is the belt, JS is the suspenders. */
.fwr_form input[type="submit"]:not(.fwr_action),
.fwr_form button[type="submit"]:not(.fwr_action),
.fwr_form .single_add_to_cart_button,
.fwr_form .added_to_cart {
    display: none !important;
}
.fwr_wrap .button:hover,
.fwr_wrap .fwr_action:hover,
.fwr_form button[type="submit"]:hover,
.fwr_form input[type="submit"]:hover { background: var(--fwr-primary-hover); }
.fwr_wrap .button:active,
.fwr_wrap .fwr_action:active,
.fwr_form button[type="submit"]:active,
.fwr_form input[type="submit"]:active { transform: translateY(1px); }

/* Secondary button (used for back-to-shop / general actions) */
.fwr_wrap .button.fwr_secondary,
.fwr_wrap .fwr_btn_secondary {
    background: #fff;
    color: #111827;
    border: 1px solid var(--fwr-border);
}
.fwr_wrap .button.fwr_secondary:hover {
    background: var(--fwr-soft);
}

/* Inline form row (search) — keeps a compact two-column on wider screens */
.fwr_form_search .form-row { display: grid; gap: .35em; }
@media (min-width: 720px) {
    .fwr_form_search .form-row { grid-template-columns: 180px 1fr; align-items: center; }
    .fwr_form_search label     { margin: 0; }
}

/* ---------- Tables (claim list / order list) ---------- */
.fwr_table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--fwr-border);
    border-radius: var(--fwr-radius);
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
}
.fwr_table thead th {
    background: var(--fwr-soft);
    font-weight: 600;
    text-align: left;
}
.fwr_table th,
.fwr_table td {
    padding: .8em 1em;
    border-bottom: 1px solid var(--fwr-border);
    vertical-align: middle;
}
/* Force a consistent horizontal padding on the outer cells — WooCommerce's
   .shop_table sets `:first-child { padding-left: 0 }` with higher specificity,
   so we explicitly override the outer cells. Safe even when shop_table is
   not present (idempotent). */
.fwr_table th:first-child,
.fwr_table td:first-child { padding-left: 1.2em; }
.fwr_table th:last-child,
.fwr_table td:last-child  { padding-right: 1.2em; }
.fwr_table tbody tr:last-child td { border-bottom: 0; }
.fwr_table tbody tr:hover         { background: var(--fwr-soft); }
.fwr_cell_action                  { text-align: right; }

/* ---------- Notices ---------- */
.fwr_error,
.fwr_success {
    padding: .9em 1.1em;
    border-radius: var(--fwr-radius);
    border: 1px solid transparent;
    margin: 0 0 1em 0;
}
.fwr_error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.fwr_success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.fwr_empty   { color: var(--fwr-muted); font-style: italic; }

/* ---------- Action bar above tables (My Account list) ---------- */
.fwr_actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .8em;
}