/* ============================================================================
   Request Account & Data Deletion
   Used by: app/templates/delete_request.html

   Every class is prefixed `adl-` and scoped under `.adl-scope`. The source
   mockup used bare names (.card, .form, .group, .control, .submit, .hero,
   .next, .back) which would collide with Bootstrap and the shared app
   stylesheets, so they are renamed rather than copied verbatim.

   The page renders inside layout.html, so nothing here touches html/body -
   the white header and footer come from the `light-chrome` body class.
   ========================================================================== */

.adl-scope {
    --adl-card: #ffffff;
    --adl-line: #eceff4;
    --adl-line-input: #e4e8ee;

    --adl-navy: #16255c;
    --adl-body: #4b5563;
    --adl-muted: #9aa3af;

    --adl-blue: #2563eb;

    --adl-amber-line: #fbe7b4;
    --adl-amber-ic: #f6e0a8;

    position: relative;
    color: var(--adl-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.adl-wrap {
    position: relative;
    width: 100%;
    max-width: 604px;
    margin: 0 auto;
    padding: 8px 16px 40px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.adl-hero { text-align: center; }

.adl-hero-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 14px;
}

.adl-hero-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147,178,235,.55) 0%, rgba(147,178,235,.18) 52%, rgba(147,178,235,0) 72%);
    filter: blur(1px);
}

.adl-hero-badge {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #e7effb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--adl-navy);
    box-shadow: 0 4px 14px rgba(30,58,138,.10);
}
.adl-hero-badge svg { width: 30px; height: 30px; }

.adl-scope .adl-hero h1 {
    margin: 0 0 12px;
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 25.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.1px;
    color: var(--adl-navy);
}

.adl-scope .adl-hero-sub {
    max-width: 514px;
    margin: 0 auto 26px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--adl-body);
}

/* ── Form card ────────────────────────────────────────────────────────────── */

.adl-card {
    background: var(--adl-card);
    border: 1px solid var(--adl-line);
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 1px 3px rgba(22,37,92,.04);
}

.adl-notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 16px;
    margin-bottom: 30px;
    border: 1px solid var(--adl-amber-line);
    border-radius: 11px;
    background: linear-gradient(180deg, #fffdf3 0%, #fff9e6 100%);
}

.adl-notice-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--adl-amber-ic);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a06a12;
}
.adl-notice-ic svg { width: 21px; height: 21px; }

.adl-scope .adl-notice-text {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.52;
    color: #4a4f57;
}
.adl-scope .adl-notice-text strong { color: var(--adl-navy); font-weight: 700; }

/* ── Fields ───────────────────────────────────────────────────────────────── */

.adl-group { margin-bottom: 12px; }

.adl-scope .adl-lbl {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adl-navy);
}
.adl-req { color: #e03131; font-weight: 700; }
.adl-opt { color: var(--adl-body); font-weight: 400; }

.adl-control {
    position: relative;
    display: block;
}

.adl-control-ic {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #9aa3af;
    pointer-events: none;
    z-index: 2;
}
.adl-control-ic svg { width: 100%; height: 100%; display: block; }

.adl-control-ic-top {
    top: 16px;
    transform: none;
}

.adl-scope .adl-control input,
.adl-scope .adl-control select,
.adl-scope .adl-control textarea {
    width: 100%;
    border: 1px solid var(--adl-line-input);
    border-radius: 8px;
    background-color: #fff;
    color: #1f2937;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.adl-scope .adl-control input,
.adl-scope .adl-control select {
    height: 44px;
    padding: 0 14px 0 42px;
    line-height: normal;
}

.adl-scope .adl-control textarea {
    display: block;
    height: 70px;
    min-height: 70px;
    padding: 13px 14px 13px 42px;
    line-height: 1.55;
    resize: vertical;
}

.adl-scope .adl-control input::placeholder,
.adl-scope .adl-control textarea::placeholder { color: var(--adl-muted); }

/* The native arrow is replaced by the inline chevron below, so it is removed
   here. background-color (not the background shorthand) keeps that explicit. */
.adl-scope .adl-control select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 40px;
    cursor: pointer;
}
.adl-scope .adl-control select.adl-is-placeholder { color: var(--adl-muted); }

.adl-control-chev {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #9aa3af;
    pointer-events: none;
    z-index: 2;
}

.adl-scope .adl-control input:focus,
.adl-scope .adl-control select:focus,
.adl-scope .adl-control textarea:focus {
    border-color: #b6cbf2;
    box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

.adl-scope .adl-hint {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--adl-muted);
}

/* ── Consent checkbox ─────────────────────────────────────────────────────── */

.adl-consent {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 15px 0 20px;
    cursor: pointer;
}

.adl-scope .adl-consent input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.adl-consent-box {
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1.5px solid #d3d9e2;
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.adl-consent-box svg { width: 12px; height: 12px; }

.adl-scope .adl-consent input:checked + .adl-consent-box {
    background: var(--adl-blue);
    border-color: var(--adl-blue);
    color: #fff;
}
.adl-scope .adl-consent input:focus-visible + .adl-consent-box {
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

.adl-consent-text {
    font-size: 14px;
    line-height: 1.55;
    color: #4a4f57;
}
.adl-consent-text strong { color: var(--adl-navy); font-weight: 700; }

/* ── Submit ───────────────────────────────────────────────────────────────── */

.adl-scope .adl-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(29,78,216,.22);
    transition: filter .15s ease, box-shadow .15s ease;
}
.adl-scope .adl-submit:hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 14px rgba(29,78,216,.28);
}
.adl-submit .adl-ic { width: 18px; height: 18px; }

/* ── What happens next ────────────────────────────────────────────────────── */

.adl-next {
    display: grid;
    grid-template-columns: 24px auto minmax(0, 1fr);
    column-gap: 12px;
    margin-top: 22px;
    padding: 13px 14px 13px 20px;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    background: #f7f9fc;
}

.adl-next-ic {
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--adl-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
}
.adl-next-ic svg { width: 15px; height: 15px; }

.adl-scope .adl-next-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: start;
    padding-top: 1px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--adl-navy);
    white-space: nowrap;
}

.adl-scope .adl-next-list {
    grid-column: 3;
    grid-row: 1;
    margin: 0 0 0 2px;
    padding-left: 15px;
    font-size: 10.9px;
    line-height: 1.75;
    color: #4a4f57;
}
.adl-scope .adl-next-list strong { color: var(--adl-navy); font-weight: 700; }

/* ── Back link ────────────────────────────────────────────────────────────── */

.adl-scope .adl-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    color: var(--adl-blue);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.adl-scope .adl-back:hover { text-decoration: underline; }
.adl-back .adl-ic { width: 16px; height: 16px; }

/* ── Flashed messages ─────────────────────────────────────────────────────── */

.adl-flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
}
.adl-flash svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.adl-flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.adl-flash-danger  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.adl-flash-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.adl-flash-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .adl-wrap { padding: 8px 14px 32px; }
    .adl-scope .adl-hero h1 { font-size: 24px; }
    .adl-card { padding: 18px 16px 20px; }
    .adl-notice { padding: 14px; gap: 12px; }

    .adl-next {
        grid-template-columns: 24px minmax(0, 1fr);
        row-gap: 12px;
    }
    .adl-scope .adl-next-title { grid-column: 2; white-space: normal; }
    .adl-scope .adl-next-list { grid-column: 1 / -1; grid-row: 2; padding-left: 20px; }
}