/* Grain Stock Alerts — intentionally inherits the Grain theme tokens. */
.gsa-wrap[hidden] { display: none !important; }
.gsa-wrap {
    --gsa-grape: var(--grape, #8B1A6B);
    --gsa-cream: var(--cream, #F5EDD8);
    --gsa-dark: var(--dark, #1A0F0A);
    box-sizing: border-box;
    direction: rtl;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin: -.3rem 0 1.5rem;
    padding: 1rem 1.05rem;
    border: 1.5px solid rgba(139,26,107,.23);
    border-color: color-mix(in srgb, var(--gsa-grape) 23%, transparent);
    border-right: 4px solid var(--gsa-grape);
    border-radius: 14px;
    background: #faf6eb;
    background: color-mix(in srgb, var(--gsa-cream) 68%, #fff);
    color: var(--gsa-dark);
    font-family: 'Tajawal', sans-serif;
    box-shadow: 0 8px 24px rgba(26,15,10,.055);
}
.gsa-wrap *, .gsa-wrap *::before, .gsa-wrap *::after { box-sizing: border-box; }
.gsa-bell {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gsa-grape);
    color: var(--gsa-cream);
    box-shadow: 3px 3px 0 rgba(0,0,0,.12);
}
.gsa-bell svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gsa-main { min-width: 0; flex: 1; }
.gsa-title { display: block; margin: 0 0 .12rem; font-size: .96rem; font-weight: 900; color: var(--gsa-dark); }
.gsa-copy { display: block; font-size: .76rem; line-height: 1.65; color: #766963; }
.gsa-form { display: flex; gap: .55rem; margin-top: .72rem; }
.gsa-email {
    min-width: 0;
    flex: 1;
    height: 43px;
    margin: 0 !important;
    padding: 0 .9rem !important;
    border: 1.5px solid rgba(26,15,10,.14) !important;
    border-radius: 10px !important;
    outline: none;
    background: #fff !important;
    color: var(--gsa-dark) !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: .86rem !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s;
}
.gsa-email:focus { border-color: var(--gsa-grape) !important; box-shadow: 0 0 0 3px rgba(139,26,107,.12) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsa-grape) 12%, transparent) !important; }
.gsa-submit {
    height: 43px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin: 0;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--gsa-grape);
    color: var(--gsa-cream);
    font-family: 'Tajawal', sans-serif;
    font-size: .86rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,.13);
    transition: transform .18s, box-shadow .18s, opacity .18s;
}
.gsa-submit:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(0,0,0,.13); }
.gsa-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.gsa-submit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.gsa-privacy { display: block; margin-top: .48rem; font-size: .63rem; color: #9a8f89; }
.gsa-message { display: none; margin-top: .65rem; font-size: .78rem; font-weight: 800; line-height: 1.6; }
.gsa-message.is-error, .gsa-message.is-success { display: block; }
.gsa-message.is-error { color: var(--red, #B42318); }
.gsa-message.is-success { color: var(--green, #2E7D45); }
.gsa-wrap[data-state="success"] { border-right-color: var(--green, #2E7D45); background: #f4faf5; background: color-mix(in srgb, var(--green, #2E7D45) 7%, #fff); }
.gsa-wrap[data-state="success"] .gsa-bell { background: var(--green, #2E7D45); }
.gsa-hp { position: absolute !important; inset-inline-start: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 520px) {
    .gsa-wrap { gap: .72rem; padding: .9rem; margin-top: -.15rem; }
    .gsa-bell { width: 38px; height: 38px; flex-basis: 38px; border-radius: 10px; }
    .gsa-form { flex-direction: column; gap: .48rem; }
    .gsa-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .gsa-submit, .gsa-email { transition: none; }
}