/*================================================================================
  PAGE: Newsletter subscribe
  TEMPLATE: templates/shop/pages/subscribe.html
  FILE: core/static/css/pages/subscribe.css
  LOADED BY: {% block extra_head %} on the template
  Edit THIS file (not collected /static/). Then collectstatic in production.
================================================================================*/

.subscribe-page {
    --subscribe-teal: #004c4c;
    --subscribe-teal-hover: #003a3a;
    --subscribe-mint: #dff4f4;
}
.subscribe-page .subscribe-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 76, 76, 0.08);
    overflow: hidden;
}
.subscribe-page .subscribe-card .card-header-custom {
    background: linear-gradient(135deg, var(--subscribe-teal), #006666);
    color: #f5fdfd;
    padding: 1.75rem 1.5rem;
    text-align: center;
    border: none;
}
.subscribe-page .subscribe-card .card-header-custom h1 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.subscribe-page .subscribe-card .card-header-custom p {
    margin: 0;
    opacity: 0.92;
    font-size: 0.95rem;
    line-height: 1.45;
}
.subscribe-page .btn-subscribe {
    background-color: var(--subscribe-teal);
    border-color: var(--subscribe-teal);
    color: #fff;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 0.5rem;
    width: 100%;
}
.subscribe-page .btn-subscribe:hover,
.subscribe-page .btn-subscribe:focus {
    background-color: var(--subscribe-teal-hover);
    border-color: var(--subscribe-teal-hover);
    color: #fff;
}
.subscribe-page .form-label {
    font-weight: 600;
    color: var(--subscribe-teal);
}
.subscribe-page .invalid-feedback,
.subscribe-page .field-error {
    display: block;
    font-size: 0.875rem;
}
.subscribe-page .subscribe-perks {
    background: var(--subscribe-mint);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: #003535;
}
.subscribe-page .subscribe-perks ul {
    margin: 0;
    padding-left: 1.2rem;
}
.subscribe-page .subscribe-perks li {
    margin-bottom: 0.35rem;
}
.subscribe-page .subscribe-perks li:last-child {
    margin-bottom: 0;
}