/**
 * 2012 - 2026 HiPresta.
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0).
 * It is also available through the world-wide-web at this URL: https://opensource.org/licenses/AFL-3.0
 *
 * @author    HiPresta <support@hipresta.com>
 * @copyright HiPresta 2026
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
 *
 * @website   https://hipresta.com
 */

/* ==========================================================================
   HiWithdrawalManager front-office design system
   Scoped under .hiwdm-page. Theme-agnostic, no external dependencies.
   Merchants can re-theme through the Custom CSS setting by overriding
   the --hiwdm-* tokens.
   ========================================================================== */

.hiwdm-page {
    /* Color tokens */
    --hiwdm-primary: #4f46e5;
    --hiwdm-primary-strong: #4338ca;
    --hiwdm-primary-soft: #eef2ff;
    --hiwdm-primary-ink: #3730a3;
    --hiwdm-accent-a: #6366f1;
    --hiwdm-accent-b: #8b5cf6;
    --hiwdm-accent-a-rgb: 99, 102, 241;
    --hiwdm-accent-b-rgb: 139, 92, 246;
    --hiwdm-ink: #0f172a;
    --hiwdm-muted: #64748b;
    --hiwdm-faint: #94a3b8;
    --hiwdm-surface: #ffffff;
    --hiwdm-bg-subtle: #f8fafc;
    --hiwdm-border: #e2e8f0;
    --hiwdm-border-strong: #cbd5e1;
    --hiwdm-success: #059669;
    --hiwdm-success-soft: #ecfdf5;
    --hiwdm-success-border: #a7f3d0;
    --hiwdm-danger: #dc2626;
    --hiwdm-danger-soft: #fef2f2;
    --hiwdm-danger-border: #fecaca;
    --hiwdm-warning-ink: #92400e;
    --hiwdm-warning-soft: #fffbeb;
    --hiwdm-warning-border: #fde68a;

    /* Shape and depth */
    --hiwdm-radius-sm: 7px;
    --hiwdm-radius: 11px;
    --hiwdm-radius-lg: 16px;
    --hiwdm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --hiwdm-shadow: 0 4px 16px -10px rgba(15, 23, 42, 0.18), 0 1px 3px -1px rgba(15, 23, 42, 0.05);
    --hiwdm-shadow-lift: 0 10px 26px -14px rgba(79, 70, 229, 0.3);
    --hiwdm-focus-ring: 0 0 0 3px rgba(var(--hiwdm-accent-a-rgb), 0.2);

    /* Spacing */
    --hiwdm-card-pad: 1.25rem;

    /* Motion */
    --hiwdm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hiwdm-speed: 200ms;

    color: var(--hiwdm-ink);
    -webkit-font-smoothing: antialiased;
}

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

/* Entrance reveal (class applied by front.js, content stays visible without JS) */

@keyframes hiwdmFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hiwdm-page .hiwdm-reveal-in {
    animation: hiwdmFadeUp 560ms var(--hiwdm-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .hiwdm-page .hiwdm-reveal-in {
        animation: none;
    }
    .hiwdm-page *,
    .hiwdm-page *::before,
    .hiwdm-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Hero ------------------------------------------------------------------- */

.hiwdm-hero {
    text-align: center;
    max-width: 600px;
    margin: 0.25rem auto 1.5rem;
}

.hiwdm-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hiwdm-primary);
    background: var(--hiwdm-primary-soft);
    border: 1px solid rgba(var(--hiwdm-accent-a-rgb), 0.22);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    margin-bottom: 0.75rem;
}

.hiwdm-hero__eyebrow svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.hiwdm-hero__title {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hiwdm-ink);
    margin: 0 0 0.55rem;
}

.hiwdm-hero__title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--hiwdm-accent-a), var(--hiwdm-accent-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hiwdm-primary);
}

.hiwdm-hero__lead {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--hiwdm-muted);
    margin: 0;
}

/* Steps timeline ----------------------------------------------------------- */

.hiwdm-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    list-style: none;
    max-width: 760px;
    margin: 0 auto 3rem;
    padding: 0;
    counter-reset: hiwdm-step;
}

/* Breathing room when a result panel / card sits above the steps. */
.hiwdm-page .hiwdm-card + .hiwdm-steps {
    margin-top: 3rem;
}

.hiwdm-steps__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0 0.75rem;
}

/* Connector line between steps */
.hiwdm-steps__item + .hiwdm-steps__item::before {
    content: "";
    position: absolute;
    top: 19px;
    right: calc(50% + 26px);
    left: calc(-50% + 26px);
    height: 2px;
    background: linear-gradient(90deg, var(--hiwdm-border), var(--hiwdm-border-strong), var(--hiwdm-border));
    border-radius: 2px;
}

.hiwdm-steps__badge {
    counter-increment: hiwdm-step;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hiwdm-surface);
    border: 1.5px solid var(--hiwdm-border-strong);
    color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-shadow-sm);
    margin-bottom: 0.65rem;
}

.hiwdm-steps__badge::after {
    content: counter(hiwdm-step);
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hiwdm-accent-a), var(--hiwdm-accent-b));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.hiwdm-steps__badge svg {
    width: 18px;
    height: 18px;
}

.hiwdm-steps__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
    margin-bottom: 0.2rem;
}

.hiwdm-steps__text {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hiwdm-muted);
}

/* Card --------------------------------------------------------------------- */

.hiwdm-card {
    position: relative;
    background: var(--hiwdm-surface);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius-lg);
    box-shadow: var(--hiwdm-shadow-sm);
    padding: var(--hiwdm-card-pad);
    overflow: hidden;
}

.hiwdm-card--accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--hiwdm-accent-a), var(--hiwdm-accent-b));
    opacity: 0.9;
}

.hiwdm-card--accent {
    padding-left: calc(var(--hiwdm-card-pad) + 0.35rem);
}

.hiwdm-card--narrow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hiwdm-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
    margin: 0 0 0.35rem;
}

.hiwdm-card__subtitle {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--hiwdm-muted);
    margin: 0 0 1.5rem;
}

/* Floating-label field ------------------------------------------------------ */

.hiwdm-field {
    position: relative;
    margin-bottom: 1.15rem;
}

.hiwdm-field__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hiwdm-faint);
    pointer-events: none;
    transition: color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-field__icon svg {
    width: 19px;
    height: 19px;
}

.hiwdm-page .hiwdm-field__input {
    display: block;
    width: 100%;
    height: 56px;
    padding: 1.45rem 1rem 0.45rem 48px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hiwdm-ink);
    background: var(--hiwdm-bg-subtle);
    border: 1.5px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    box-shadow: none;
    outline: none;
    appearance: none;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-page .hiwdm-field__input::placeholder {
    color: transparent;
}

.hiwdm-page .hiwdm-field__input:hover {
    border-color: var(--hiwdm-border-strong);
}

.hiwdm-page .hiwdm-field__input:focus {
    background: var(--hiwdm-surface);
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-field__input:focus ~ .hiwdm-field__icon,
.hiwdm-field:focus-within .hiwdm-field__icon {
    color: var(--hiwdm-primary);
}

.hiwdm-field__label {
    position: absolute;
    /* Half of the input height: the field wrapper can be taller (hint text), so
       centering against the wrapper would misalign the label. */
    top: 28px;
    left: 48px;
    transform: translateY(-50%);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hiwdm-muted);
    pointer-events: none;
    margin: 0;
    transform-origin: left top;
    transition: transform var(--hiwdm-speed) var(--hiwdm-ease),
        color var(--hiwdm-speed) var(--hiwdm-ease);
    white-space: nowrap;
}

.hiwdm-field__input:focus ~ .hiwdm-field__label,
.hiwdm-field__input:not(:placeholder-shown) ~ .hiwdm-field__label {
    /* Fixed offset (not %) so the floated label tucks into the input's top
       padding instead of crossing the border. */
    transform: translateY(-21px) scale(0.74);
    color: var(--hiwdm-primary);
}

.hiwdm-field__input:not(:placeholder-shown):not(:focus) ~ .hiwdm-field__label {
    color: var(--hiwdm-faint);
}

.hiwdm-field__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--hiwdm-faint);
    margin: 0.45rem 0.25rem 0;
}

.hiwdm-field__hint svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Buttons -------------------------------------------------------------------- */

.hiwdm-page .hiwdm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: var(--hiwdm-radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease),
        border-color var(--hiwdm-speed) var(--hiwdm-ease),
        color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-page .hiwdm-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.hiwdm-page .hiwdm-btn:focus-visible {
    outline: none;
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-page .hiwdm-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--hiwdm-accent-a), var(--hiwdm-primary-strong));
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.5);
}

.hiwdm-page .hiwdm-btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--hiwdm-shadow-lift);
}

.hiwdm-page .hiwdm-btn--primary:active {
    transform: translateY(0);
}

.hiwdm-page .hiwdm-btn--ghost {
    color: var(--hiwdm-primary);
    background: transparent;
    border-color: var(--hiwdm-border-strong);
}

.hiwdm-page .hiwdm-btn--ghost:hover {
    color: var(--hiwdm-primary-strong);
    background: var(--hiwdm-primary-soft);
    border-color: var(--hiwdm-primary);
}

.hiwdm-page .hiwdm-btn--block {
    display: flex;
    width: 100%;
}

.hiwdm-page .hiwdm-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 10px;
}

/* Loading state: hide content, show spinner */
.hiwdm-page .hiwdm-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

.hiwdm-page .hiwdm-btn.is-loading svg {
    opacity: 0;
}

.hiwdm-page .hiwdm-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: hiwdmSpin 700ms linear infinite;
}

.hiwdm-page .hiwdm-btn--ghost.is-loading::after {
    border-color: rgba(79, 70, 229, 0.25);
    border-top-color: var(--hiwdm-primary);
}

@keyframes hiwdmSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Result panels (success / error / info) -------------------------------------- */

.hiwdm-panel {
    text-align: center;
    padding: 2.5rem 2rem;
}

.hiwdm-panel__medallion {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin-bottom: 1.35rem;
}

.hiwdm-panel__medallion svg {
    width: 34px;
    height: 34px;
}

.hiwdm-panel--success .hiwdm-panel__medallion {
    background: var(--hiwdm-success-soft);
    border: 1.5px solid var(--hiwdm-success-border);
    color: var(--hiwdm-success);
    box-shadow: 0 0 0 10px rgba(5, 150, 105, 0.06);
}

.hiwdm-panel--error .hiwdm-panel__medallion {
    background: var(--hiwdm-danger-soft);
    border: 1.5px solid var(--hiwdm-danger-border);
    color: var(--hiwdm-danger);
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.05);
}

/* Animated stroke drawing (checkmark / icon paths marked with .hiwdm-draw) */
.hiwdm-panel .hiwdm-draw {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: hiwdmDraw 800ms var(--hiwdm-ease) 250ms forwards;
}

@keyframes hiwdmDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.hiwdm-panel__title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hiwdm-ink);
    margin: 0 0 0.6rem;
}

.hiwdm-panel__text {
    max-width: 420px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--hiwdm-muted);
    margin: 0 auto 0.5rem;
}

.hiwdm-panel__text strong {
    color: var(--hiwdm-ink);
}

.hiwdm-panel__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--hiwdm-faint);
    margin: 1.1rem 0 0;
}

.hiwdm-panel__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hiwdm-panel__meta svg {
    width: 14px;
    height: 14px;
}

.hiwdm-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

/* Trust / reassurance strip ----------------------------------------------------- */

.hiwdm-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    max-width: 760px;
    margin: 1.75rem auto 0;
    padding: 0;
    list-style: none;
}

.hiwdm-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--hiwdm-muted);
}

.hiwdm-trust__item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--hiwdm-primary);
}

.hiwdm-trust__item a {
    color: var(--hiwdm-primary);
    text-decoration: underline;
}

/* Order summary (requests hub) ---------------------------------------------- */

.hiwdm-order-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hiwdm-order-summary__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--hiwdm-radius-sm);
    background: var(--hiwdm-primary-soft);
    color: var(--hiwdm-primary);
    flex: 0 0 auto;
}

.hiwdm-order-summary__icon svg {
    width: 17px;
    height: 17px;
}

.hiwdm-order-summary__label {
    display: inline;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hiwdm-faint);
    margin-right: 0.3rem;
}

.hiwdm-order-summary__reference {
    display: inline;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--hiwdm-ink);
}

.hiwdm-order-summary__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

.hiwdm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hiwdm-muted);
    background: var(--hiwdm-bg-subtle);
    border: 1px solid var(--hiwdm-border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.hiwdm-chip svg {
    width: 13px;
    height: 13px;
    color: var(--hiwdm-faint);
}

/* Action tiles (requests hub) ------------------------------------------------ */

.hiwdm-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.hiwdm-page .hiwdm-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: var(--hiwdm-surface);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    text-decoration: none;
    color: inherit;
    transition: transform var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease),
        border-color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-page .hiwdm-tile:hover {
    transform: translateY(-1px);
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-shadow);
    color: inherit;
    text-decoration: none;
}

.hiwdm-page .hiwdm-tile:focus-visible {
    outline: none;
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--hiwdm-bg-subtle);
    color: var(--hiwdm-muted);
    flex: 0 0 auto;
    transition: color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-tile__icon svg {
    width: 16px;
    height: 16px;
}

.hiwdm-tile:hover .hiwdm-tile__icon {
    background: var(--hiwdm-primary-soft);
    color: var(--hiwdm-primary);
}

.hiwdm-tile__body {
    min-width: 0;
    flex: 1 1 auto;
}

.hiwdm-tile__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hiwdm-ink);
    line-height: 1.3;
}

.hiwdm-tile__text {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--hiwdm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hiwdm-tile__arrow {
    align-self: center;
    color: var(--hiwdm-faint);
    flex: 0 0 auto;
    opacity: 0;
    transition: transform var(--hiwdm-speed) var(--hiwdm-ease),
        opacity var(--hiwdm-speed) var(--hiwdm-ease),
        color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-tile__arrow svg {
    width: 16px;
    height: 16px;
}

.hiwdm-tile:hover .hiwdm-tile__arrow {
    transform: translateX(2px);
    opacity: 1;
    color: var(--hiwdm-primary);
}

/* Featured tile (withdrawal) */
.hiwdm-page .hiwdm-tile--primary {
    background: linear-gradient(135deg, rgba(var(--hiwdm-accent-a-rgb), 0.06), rgba(var(--hiwdm-accent-b-rgb), 0.04));
    border-color: rgba(var(--hiwdm-accent-a-rgb), 0.32);
}

.hiwdm-tile--primary .hiwdm-tile__icon {
    background: linear-gradient(135deg, var(--hiwdm-accent-a), var(--hiwdm-primary-strong));
    color: #fff;
}

.hiwdm-tile--primary:hover .hiwdm-tile__icon {
    background: linear-gradient(135deg, var(--hiwdm-accent-a), var(--hiwdm-primary-strong));
    color: #fff;
}

.hiwdm-tile--primary .hiwdm-tile__title {
    color: var(--hiwdm-primary-strong);
}

/* Verified badge (guest secure session) -------------------------------------- */

.hiwdm-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hiwdm-success);
    background: var(--hiwdm-success-soft);
    border: 1px solid var(--hiwdm-success-border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
}

.hiwdm-verified svg {
    width: 15px;
    height: 15px;
}

.hiwdm-verified + .hiwdm-hero__title {
    margin-top: 1rem;
}

/* Request cards (submitted requests list) ------------------------------------ */

.hiwdm-request-list {
    display: grid;
    gap: 0.5rem;
}

.hiwdm-request-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--hiwdm-surface);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    padding: 0.65rem 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease),
        transform var(--hiwdm-speed) var(--hiwdm-ease);
}

a.hiwdm-request-card:hover {
    border-color: var(--hiwdm-border-strong);
    box-shadow: var(--hiwdm-shadow);
    transform: translateY(-1px);
}

a.hiwdm-request-card:hover .hiwdm-request-card__arrow {
    color: var(--hiwdm-primary);
    transform: translateX(2px);
}

.hiwdm-request-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hiwdm-faint);
    flex: 0 0 auto;
    transition: color var(--hiwdm-speed) var(--hiwdm-ease),
        transform var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-request-card__arrow svg {
    width: 16px;
    height: 16px;
}

.hiwdm-request-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--hiwdm-bg-subtle);
    color: var(--hiwdm-muted);
    flex: 0 0 auto;
}

.hiwdm-request-card__icon svg {
    width: 16px;
    height: 16px;
}

.hiwdm-request-card__body {
    min-width: 0;
    flex: 1 1 auto;
}

.hiwdm-request-card__title {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--hiwdm-ink);
}

.hiwdm-request-card__title small {
    font-weight: 600;
    color: var(--hiwdm-faint);
    letter-spacing: 0.02em;
}

.hiwdm-request-card__meta {
    display: block;
    font-size: 0.74rem;
    color: var(--hiwdm-muted);
    margin-top: 0.05rem;
}

.hiwdm-request-card .hiwdm-status {
    flex: 0 0 auto;
}

/* Empty state ------------------------------------------------------------------ */

.hiwdm-empty-state {
    text-align: center;
    padding: 1.75rem 1rem;
    border: 1.5px dashed var(--hiwdm-border-strong);
    border-radius: var(--hiwdm-radius);
    color: var(--hiwdm-muted);
    font-size: 0.9rem;
    background: var(--hiwdm-bg-subtle);
}

/* Generic page blocks (shared with requests / submit pages) -------------------- */

.hiwdm-page .hiwdm-section {
    margin-bottom: 1.25rem;
}

.hiwdm-page .hiwdm-section__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.hiwdm-page .box {
    background: var(--hiwdm-surface);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    box-shadow: var(--hiwdm-shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.hiwdm-form__group {
    margin-bottom: 1rem;
}

.hiwdm-form__hint {
    font-size: 0.8125rem;
    color: var(--hiwdm-muted);
    margin: 0.25rem 0 0;
}

.hiwdm-form__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

/* Order cards ------------------------------------------------------------ */

.hiwdm-order-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hiwdm-order-card__reference {
    font-weight: 600;
}

.hiwdm-order-card__meta {
    color: var(--hiwdm-muted);
    font-size: 0.875rem;
}

.hiwdm-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.hiwdm-order-card__none {
    color: var(--hiwdm-muted);
    font-size: 0.875rem;
}

/* Order detail block ------------------------------------------------------ */

.hiwdm-page.hiwdm-order-actions {
    margin: 1.5rem 0;
    padding: var(--hiwdm-card-pad);
    background: var(--hiwdm-surface);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius-lg);
    box-shadow: var(--hiwdm-shadow-sm);
}

.hiwdm-order-actions__head {
    margin-bottom: 0.9rem;
}

.hiwdm-order-actions__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
    margin: 0;
}

.hiwdm-order-actions__subtitle {
    font-size: 0.8125rem;
    color: var(--hiwdm-muted);
    margin: 0.25rem 0 0;
}

/* Status badges ----------------------------------------------------------- */

.hiwdm-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--hiwdm-bg-subtle);
    color: var(--hiwdm-muted);
    border: 1px solid var(--hiwdm-border);
    white-space: nowrap;
}

.hiwdm-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

.hiwdm-status--submitted {
    background: var(--hiwdm-primary-soft);
    color: var(--hiwdm-primary-strong);
    border-color: rgba(var(--hiwdm-accent-a-rgb), 0.25);
}
.hiwdm-status--acknowledged,
.hiwdm-status--approved,
.hiwdm-status--in_review,
.hiwdm-status--refunded,
.hiwdm-status--resolved,
.hiwdm-status--cancelled {
    background: var(--hiwdm-success-soft);
    color: var(--hiwdm-success);
    border-color: var(--hiwdm-success-border);
}
.hiwdm-status--waiting_for_return,
.hiwdm-status--waiting_for_customer,
.hiwdm-status--waiting_for_merchant,
.hiwdm-status--refund_pending,
.hiwdm-status--exchange_pending {
    background: var(--hiwdm-warning-soft);
    color: var(--hiwdm-warning-ink);
    border-color: var(--hiwdm-warning-border);
}
.hiwdm-status--rejected {
    background: var(--hiwdm-danger-soft);
    color: var(--hiwdm-danger);
    border-color: var(--hiwdm-danger-border);
}
.hiwdm-status--closed {
    background: var(--hiwdm-bg-subtle);
    color: var(--hiwdm-faint);
    border-color: var(--hiwdm-border-strong);
}

/* Review / success -------------------------------------------------------- */

.hiwdm-review__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1.25rem;
    margin: 0 0 1rem;
}

.hiwdm-review__list dt {
    font-weight: 600;
}

.hiwdm-review__list dd {
    margin: 0;
}

.hiwdm-review__statement {
    border-left: 3px solid var(--hiwdm-primary);
    background: var(--hiwdm-bg-subtle);
    padding: 0.75rem 1rem;
    font-style: italic;
    margin: 0.5rem 0 1rem;
}

.hiwdm-success__reference {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Footer link ------------------------------------------------------------- */

.hiwdm-footer-link {
    margin: 0.25rem 0;
}

/* Top bar link ------------------------------------------------------------ */

.hiwdm-nav-link {
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 1.25rem;
}

/* No leading gap when the module link is the only/first item in the slot. */
.hiwdm-nav-link:first-child {
    margin-inline-start: 0;
}

.hiwdm-nav-link a {
    color: inherit;
    white-space: nowrap;
}

/* Scope choice ------------------------------------------------------------- */

.hiwdm-scope-choice {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hiwdm-radio {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    cursor: pointer;
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 767px) {
    .hiwdm-steps {
        flex-direction: column;
        gap: 1.1rem;
        max-width: 360px;
    }

    .hiwdm-steps__item {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 0.9rem;
        text-align: left;
        padding: 0;
    }

    .hiwdm-steps__item + .hiwdm-steps__item::before {
        top: calc(-1.1rem - 6px);
        bottom: auto;
        left: 19px;
        right: auto;
        width: 2px;
        height: calc(1.1rem - 4px);
        background: var(--hiwdm-border-strong);
    }

    .hiwdm-steps__badge {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .hiwdm-card {
        padding: 1.1rem;
    }

    .hiwdm-card--accent {
        padding-left: calc(1.1rem + 0.3rem);
    }

    .hiwdm-panel {
        padding: 1.75rem 1rem;
    }

    .hiwdm-tiles {
        grid-template-columns: 1fr;
    }

    .hiwdm-order-summary {
        gap: 0.5rem;
    }

    .hiwdm-order-summary__chips {
        margin-left: 0;
        width: 100%;
    }

    .hiwdm-request-card {
        flex-wrap: wrap;
    }

    .hiwdm-request-card .hiwdm-status {
        margin-left: calc(32px + 0.7rem);
    }
}

@media (max-width: 575px) {
    .hiwdm-review__list {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .hiwdm-review__list dd {
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   Request submission flow (shared by the modal and the standalone pages)
   ========================================================================== */

.hiwdm-card--mid {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Inline alerts ------------------------------------------------------------ */

.hiwdm-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: left;
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
}

.hiwdm-alert svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.hiwdm-alert p {
    margin: 0;
}

.hiwdm-alert p + p {
    margin-top: 0.35rem;
}

.hiwdm-alert--error {
    background: var(--hiwdm-danger-soft);
    border-color: var(--hiwdm-danger-border);
    color: #991b1b;
}

.hiwdm-alert--info {
    background: var(--hiwdm-primary-soft);
    border-color: rgba(var(--hiwdm-accent-a-rgb), 0.3);
    color: var(--hiwdm-primary-ink);
}

.hiwdm-alert--warning {
    background: var(--hiwdm-warning-soft);
    border-color: var(--hiwdm-warning-border);
    color: var(--hiwdm-warning-ink);
}

.hiwdm-panel .hiwdm-alert {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

/* Form groups with static labels (select / textarea / fieldsets) ------------ */

.hiwdm-group {
    margin: 0 0 1.15rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.hiwdm-page .hiwdm-label {
    display: block;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hiwdm-ink);
    margin: 0 0 0.5rem;
    border: 0;
    padding: 0;
}

/* Segmented radio control (withdrawal scope) -------------------------------- */

.hiwdm-segment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

.hiwdm-segment__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.hiwdm-segment__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hiwdm-segment__face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hiwdm-muted);
    background: var(--hiwdm-bg-subtle);
    border: 1.5px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease),
        color var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-segment__face svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.hiwdm-segment__option:hover .hiwdm-segment__face {
    border-color: var(--hiwdm-border-strong);
}

.hiwdm-segment__option input:checked + .hiwdm-segment__face {
    border-color: var(--hiwdm-primary);
    background: var(--hiwdm-primary-soft);
    color: var(--hiwdm-primary-strong);
}

.hiwdm-segment__option input:focus-visible + .hiwdm-segment__face {
    box-shadow: var(--hiwdm-focus-ring);
}

/* Product selection rows ----------------------------------------------------- */

.hiwdm-product-list {
    display: grid;
    gap: 0.6rem;
}

.hiwdm-product-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--hiwdm-surface);
    border: 1.5px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-product-row:hover {
    border-color: var(--hiwdm-border-strong);
}

.hiwdm-product-row.is-selected {
    border-color: var(--hiwdm-primary);
    background: rgba(var(--hiwdm-accent-a-rgb), 0.04);
}

.hiwdm-product-row__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

.hiwdm-product-row__main input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hiwdm-product-row__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1.5px solid var(--hiwdm-border-strong);
    background: var(--hiwdm-surface);
    color: #fff;
    flex: 0 0 auto;
    transition: background-color var(--hiwdm-speed) var(--hiwdm-ease),
        border-color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-product-row__box svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-product-row__main input:checked + .hiwdm-product-row__box {
    background: linear-gradient(135deg, var(--hiwdm-accent-a), var(--hiwdm-primary-strong));
    border-color: transparent;
}

.hiwdm-product-row__main input:checked + .hiwdm-product-row__box svg {
    opacity: 1;
}

.hiwdm-product-row__main input:focus-visible + .hiwdm-product-row__box {
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-product-row__body {
    min-width: 0;
}

.hiwdm-product-row__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hiwdm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

.hiwdm-product-row__meta {
    display: block;
    font-size: 0.78rem;
    color: var(--hiwdm-faint);
    margin-top: 0.1rem;
}

.hiwdm-product-row__qty {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.hiwdm-product-row__qty-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hiwdm-faint);
    margin: 0;
}

.hiwdm-page .hiwdm-product-qty {
    width: 72px;
    height: 40px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hiwdm-ink);
    background: var(--hiwdm-bg-subtle);
    border: 1.5px solid var(--hiwdm-border);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        opacity var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-page .hiwdm-product-qty:focus {
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-page .hiwdm-product-qty:disabled {
    opacity: 0.4;
}

/* Styled select --------------------------------------------------------------- */

.hiwdm-select {
    position: relative;
    display: block;
}

.hiwdm-page .hiwdm-select__input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 2.75rem 0 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hiwdm-ink);
    background: var(--hiwdm-bg-subtle);
    border: 1.5px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-page .hiwdm-select__input:hover {
    border-color: var(--hiwdm-border-strong);
}

.hiwdm-page .hiwdm-select__input:focus {
    background: var(--hiwdm-surface);
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-select__chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--hiwdm-faint);
    pointer-events: none;
}

/* Textarea --------------------------------------------------------------------- */

.hiwdm-page .hiwdm-textarea {
    display: block;
    width: 100%;
    min-height: 110px;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--hiwdm-ink);
    background: var(--hiwdm-bg-subtle);
    border: 1.5px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    outline: none;
    resize: vertical;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-page .hiwdm-textarea:hover {
    border-color: var(--hiwdm-border-strong);
}

.hiwdm-page .hiwdm-textarea:focus {
    background: var(--hiwdm-surface);
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-focus-ring);
}

/* File upload ------------------------------------------------------------------- */

.hiwdm-upload {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1rem 1.1rem;
    margin: 0;
    background: var(--hiwdm-bg-subtle);
    border: 1.5px dashed var(--hiwdm-border-strong);
    border-radius: var(--hiwdm-radius);
    cursor: pointer;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-upload:hover {
    border-color: var(--hiwdm-primary);
    background: var(--hiwdm-primary-soft);
}

.hiwdm-upload:focus-within {
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.hiwdm-upload > svg {
    width: 22px;
    height: 22px;
    color: var(--hiwdm-primary);
    flex: 0 0 auto;
}

.hiwdm-upload__text {
    min-width: 0;
}

.hiwdm-upload__text strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
}

.hiwdm-upload__meta {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--hiwdm-faint);
    margin-top: 0.15rem;
}

.hiwdm-upload__list {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hiwdm-primary-strong);
    margin: 0.5rem 0.25rem 0;
}

/* Review step refresh -------------------------------------------------------------- */

.hiwdm-review__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hiwdm-ink);
    margin: 0 0 1rem;
}

.hiwdm-review__title svg {
    width: 18px;
    height: 18px;
    color: var(--hiwdm-primary);
}

.hiwdm-review__subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hiwdm-faint);
    margin: 1.4rem 0 0.5rem;
}

.hiwdm-flow .hiwdm-review__list {
    font-size: 0.9rem;
    background: var(--hiwdm-bg-subtle);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
    padding: 1rem 1.15rem;
}

.hiwdm-flow .hiwdm-review__list dt {
    font-weight: 600;
    color: var(--hiwdm-muted);
}

.hiwdm-flow .hiwdm-review__list dd {
    font-weight: 500;
    color: var(--hiwdm-ink);
}

.hiwdm-review__products {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.hiwdm-review__products li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    background: var(--hiwdm-bg-subtle);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius-sm);
}

.hiwdm-review__qty {
    font-weight: 700;
    color: var(--hiwdm-muted);
    white-space: nowrap;
}

.hiwdm-flow .hiwdm-review__statement {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--hiwdm-muted);
    border-radius: 0 var(--hiwdm-radius-sm) var(--hiwdm-radius-sm) 0;
}

.hiwdm-form__actions--split {
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Success step ------------------------------------------------------------------------ */

.hiwdm-reference {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: max-content;
    max-width: 100%;
    margin: 1.4rem auto 0;
    padding: 1rem 2rem;
    background: var(--hiwdm-primary-soft);
    border: 1.5px dashed rgba(var(--hiwdm-accent-a-rgb), 0.45);
    border-radius: var(--hiwdm-radius);
}

.hiwdm-reference__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hiwdm-primary);
}

.hiwdm-reference__value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--hiwdm-ink);
}

.hiwdm-next-steps {
    max-width: 460px;
    margin: 1.5rem auto 0;
    padding: 1.1rem 1.25rem;
    text-align: left;
    background: var(--hiwdm-bg-subtle);
    border: 1px solid var(--hiwdm-border);
    border-radius: var(--hiwdm-radius);
}

.hiwdm-next-steps__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
    margin: 1rem 0 0.35rem;
}

.hiwdm-next-steps__title:first-child {
    margin-top: 0;
}

.hiwdm-next-steps__title svg {
    width: 15px;
    height: 15px;
    color: var(--hiwdm-primary);
}

.hiwdm-next-steps p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--hiwdm-muted);
    margin: 0;
}

/* ==========================================================================
   Modal (order requests page)
   ========================================================================== */

body.hiwdm-modal-open {
    overflow: hidden;
}

.hiwdm-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hiwdm-modal[hidden] {
    display: none;
}

.hiwdm-modal__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 240ms var(--hiwdm-ease);
}

.hiwdm-modal.is-open .hiwdm-modal__overlay {
    opacity: 1;
}

.hiwdm-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(86vh, 860px);
    background: var(--hiwdm-surface);
    border-radius: var(--hiwdm-radius-lg);
    box-shadow: 0 32px 80px -24px rgba(15, 23, 42, 0.5);
    overflow: hidden;
    outline: none;
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition: transform 300ms var(--hiwdm-ease), opacity 220ms var(--hiwdm-ease);
}

.hiwdm-modal__dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hiwdm-accent-a), var(--hiwdm-accent-b), var(--hiwdm-accent-a));
    z-index: 1;
}

.hiwdm-modal.is-open .hiwdm-modal__dialog {
    opacity: 1;
    transform: none;
}

.hiwdm-modal__header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--hiwdm-border);
    flex: 0 0 auto;
}

.hiwdm-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hiwdm-accent-a), var(--hiwdm-primary-strong));
    color: #fff;
    flex: 0 0 auto;
}

.hiwdm-modal__icon svg {
    width: 20px;
    height: 20px;
}

.hiwdm-modal__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.hiwdm-modal__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hiwdm-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hiwdm-modal__order {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hiwdm-muted);
    margin-top: 0.1rem;
}

.hiwdm-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hiwdm-border);
    background: var(--hiwdm-bg-subtle);
    color: var(--hiwdm-muted);
    cursor: pointer;
    flex: 0 0 auto;
    transition: color var(--hiwdm-speed) var(--hiwdm-ease),
        border-color var(--hiwdm-speed) var(--hiwdm-ease),
        background-color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-modal__close:hover {
    color: var(--hiwdm-danger);
    border-color: var(--hiwdm-danger-border);
    background: var(--hiwdm-danger-soft);
}

.hiwdm-modal__close:focus-visible {
    outline: none;
    box-shadow: var(--hiwdm-focus-ring);
}

.hiwdm-modal__close svg {
    width: 16px;
    height: 16px;
}

.hiwdm-modal__body {
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.hiwdm-modal__loader {
    display: flex;
    justify-content: center;
    padding: 3.5rem 0;
}

.hiwdm-modal__spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(var(--hiwdm-accent-a-rgb), 0.18);
    border-top-color: var(--hiwdm-primary);
    animation: hiwdmSpin 700ms linear infinite;
}

/* Step swap entrance for injected fragments */
.hiwdm-modal .hiwdm-flow {
    animation: hiwdmFadeUp 340ms var(--hiwdm-ease) both;
}

/* The success panel sits inside the modal body: trim its padding */
.hiwdm-modal .hiwdm-panel {
    padding: 1rem 0.5rem 0.5rem;
}

@media (max-width: 575px) {
    /* Bottom sheet on small screens */
    .hiwdm-modal {
        padding: 0;
        align-items: flex-end;
    }

    .hiwdm-modal__dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .hiwdm-modal.is-open .hiwdm-modal__dialog {
        transform: none;
    }

    .hiwdm-modal__header {
        padding: 1rem 1.15rem;
    }

    .hiwdm-modal__body {
        padding: 1.15rem;
    }

    .hiwdm-form__actions--split {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .hiwdm-form__actions--split .hiwdm-btn {
        width: 100%;
    }
}

/* Request detail / conversation ------------------------------------------------ */

.hiwdm-alert--success {
    background: var(--hiwdm-success-soft);
    border-color: var(--hiwdm-success-border);
    color: var(--hiwdm-success);
}

.hiwdm-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hiwdm-detail-head__main {
    min-width: 0;
}

.hiwdm-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hiwdm-muted);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-back:hover {
    color: var(--hiwdm-primary);
}

.hiwdm-back svg {
    width: 14px;
    height: 14px;
}

.hiwdm-detail-head__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
}

.hiwdm-detail-head__title small {
    font-weight: 600;
    color: var(--hiwdm-faint);
    letter-spacing: 0.02em;
}

.hiwdm-detail-head__meta {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--hiwdm-muted);
}

.hiwdm-thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hiwdm-bubble {
    max-width: 80%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--hiwdm-radius);
    border: 1px solid var(--hiwdm-border);
    background: var(--hiwdm-surface);
    box-shadow: var(--hiwdm-shadow-sm);
    animation: hiwdmFadeUp 400ms var(--hiwdm-ease) both;
}

.hiwdm-bubble--customer {
    align-self: flex-end;
    background: var(--hiwdm-primary-soft);
    border-color: rgba(var(--hiwdm-accent-a-rgb), 0.2);
    border-bottom-right-radius: 5px;
}

.hiwdm-bubble--support {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
}

.hiwdm-bubble__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.hiwdm-bubble__author {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
}

.hiwdm-bubble__time {
    font-size: 0.7rem;
    color: var(--hiwdm-faint);
    white-space: nowrap;
}

.hiwdm-bubble__body {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--hiwdm-ink);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.hiwdm-bubble__files {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hiwdm-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--hiwdm-surface);
    border: 1px solid var(--hiwdm-border-strong);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hiwdm-primary);
    text-decoration: none;
    transition: border-color var(--hiwdm-speed) var(--hiwdm-ease),
        box-shadow var(--hiwdm-speed) var(--hiwdm-ease);
}

.hiwdm-file-chip:hover {
    border-color: var(--hiwdm-primary);
    box-shadow: var(--hiwdm-shadow-sm);
}

.hiwdm-file-chip svg {
    width: 14px;
    height: 14px;
}

.hiwdm-reply-form .hiwdm-section__title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.hiwdm-reply-form .hiwdm-group {
    margin-bottom: 0.75rem;
}

.hiwdm-reply-form .hiwdm-textarea {
    min-height: 84px;
    font-size: 0.9rem;
}

.hiwdm-reply-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.hiwdm-reply-form__actions .hiwdm-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
}

.hiwdm-detail-closed .hiwdm-detail-contact {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hiwdm-border);
}

.hiwdm-detail-closed .hiwdm-detail-contact h3 {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--hiwdm-ink);
}

.hiwdm-detail-closed .hiwdm-detail-contact p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--hiwdm-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .hiwdm-bubble {
        max-width: 92%;
    }
}

/* ==========================================================================
   Customer account menu link (My order requests)
   The link is rendered by the theme inside its account menu, outside
   .hiwdm-page, so these rules are intentionally unscoped. The markup carries
   both classic (.col-* / .link-item) and Hummingbird (.account-menu__*)
   hooks; here we normalise the injected SVG for each theme.
   ========================================================================== */

/* Classic theme: stack the icon above the label like every other
   dashboard tile (which uses `.link-item .material-icons`). */
.hiwdm-account-link__icon {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.5rem;
    color: currentColor;
}

/* Hummingbird theme: the SVG icon sits inside `.account-menu__icon`, which
   sizes material-icons via font-size. Override for the SVG. */
.account-menu .hiwdm-account-link__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0;
}

/* Hummingbird wraps nothing in `.link-item`, so hide that layer and let the
   link's own flex handle layout. */
.account-menu .hiwdm-account-link > .link-item {
    display: contents;
}

/* Neutralise the Bootstrap column classes that classic theme needs but that
   conflict with Hummingbird's CSS-grid account menu. */
.account-menu .hiwdm-account-link[class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    float: none;
}

/* ─────────────────────────────────────────────
   Product page: "Right of withdrawal" block
   Rendered outside .hiwdm-page, so it is fully
   self-contained (no --hiwdm-* tokens here).
   ───────────────────────────────────────────── */
.hiwdm-product-withdrawal {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 1rem 0;
    padding: 0.9rem 1.05rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.5;
}

.hiwdm-product-withdrawal__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--hiwdm-pw-soft, #eef2ff);
    color: var(--hiwdm-pw-primary, #4f46e5);
}

.hiwdm-product-withdrawal__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hiwdm-product-withdrawal__title {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
}

.hiwdm-product-withdrawal__text {
    margin: 0;
    color: #64748b;
}

.hiwdm-product-withdrawal__link {
    margin-left: 0.35rem;
    color: var(--hiwdm-pw-primary, #4f46e5);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.hiwdm-product-withdrawal__link:hover,
.hiwdm-product-withdrawal__link:focus {
    color: var(--hiwdm-pw-strong, #4338ca);
}

/* ─────────────────────────────────────────────
   Product page: CMS "More information" modal
   Wrapper carries .hiwdm-page so tokens apply.
   ───────────────────────────────────────────── */
.hiwdm-info-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hiwdm-info-modal[hidden] {
    display: none;
}

.hiwdm-info-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 220ms var(--hiwdm-ease, ease);
}

.hiwdm-info-modal.is-open .hiwdm-info-modal__overlay {
    opacity: 1;
}

.hiwdm-info-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(86vh, 860px);
    background: var(--hiwdm-surface, #fff);
    border-radius: var(--hiwdm-radius-lg, 16px);
    box-shadow: 0 32px 80px -24px rgba(15, 23, 42, 0.5);
    overflow: hidden;
    outline: none;
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    transition: opacity 220ms var(--hiwdm-ease, ease), transform 220ms var(--hiwdm-ease, ease);
}

.hiwdm-info-modal.is-open .hiwdm-info-modal__dialog {
    opacity: 1;
    transform: none;
}

.hiwdm-info-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--hiwdm-border, #e2e8f0);
    flex: 0 0 auto;
}

.hiwdm-info-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hiwdm-ink, #0f172a);
}

.hiwdm-info-modal__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--hiwdm-bg-subtle, #f8fafc);
    color: var(--hiwdm-muted, #64748b);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.hiwdm-info-modal__close:hover {
    background: var(--hiwdm-border, #e2e8f0);
    color: var(--hiwdm-ink, #0f172a);
}

.hiwdm-info-modal__body {
    padding: 1.35rem 1.5rem;
    overflow-y: auto;
    color: var(--hiwdm-ink, #0f172a);
    line-height: 1.6;
}

.hiwdm-info-modal__body img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 575px) {
    .hiwdm-info-modal {
        padding: 0;
        align-items: flex-end;
    }

    .hiwdm-info-modal__dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .hiwdm-info-modal.is-open .hiwdm-info-modal__dialog {
        transform: none;
    }
}