/* ═══════════════════════════════════════════════════════════
   MyDeal Legal Document Viewer — mdp-legal.css
   Mobile-first · Clean · Professional
   Colors: Blue #1A5EBF | Red #D42F30 | Dark Blue #0C2A5A
═══════════════════════════════════════════════════════════ */

/* ─── Custom Properties ──────────────────────────────────── */
:root {
    --mdp-blue:        #1A5EBF;
    --mdp-blue-dark:   #0C2A5A;
    --mdp-blue-light:  #E8F0FB;
    --mdp-red:         #D42F30;
    --mdp-gray-50:     #F7F8FA;
    --mdp-gray-100:    #EDEEF2;
    --mdp-gray-200:    #D1D5DB;
    --mdp-gray-400:    #9CA3AF;
    --mdp-gray-600:    #4B5563;
    --mdp-gray-800:    #1F2937;
    --mdp-white:       #FFFFFF;
    --mdp-radius:      12px;
    --mdp-radius-sm:   8px;
    --mdp-shadow:      0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    --mdp-shadow-sm:   0 1px 3px rgba(0,0,0,.08);
    --mdp-max-width:   1100px;
    --mdp-gap:         1.25rem;
    --mdp-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mdp-font-mono:   'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ─── Reset (scoped) ─────────────────────────────────────── */
.mdp-legal-root *,
.mdp-legal-root *::before,
.mdp-legal-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Root wrapper ───────────────────────────────────────── */
.mdp-legal-root {
    font-family:    var(--mdp-font);
    font-size:      16px;
    line-height:    1.65;
    color:          var(--mdp-gray-800);
    background:     var(--mdp-gray-50);
    min-height:     100vh;
}

/* ─── Header ─────────────────────────────────────────────── */
.mdp-header {
    background:   var(--mdp-white);
    border-bottom: 1px solid var(--mdp-gray-100);
    box-shadow:   var(--mdp-shadow-sm);
    position:     sticky;
    top:          0;
    z-index:      100;
}

.mdp-header-inner {
    max-width:     var(--mdp-max-width);
    margin:        0 auto;
    padding:       0.875rem 1.25rem;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
}

.mdp-logo-link {
    display:   block;
    flex-shrink: 0;
}

.mdp-logo {
    display:    block;
    height:     36px;
    width:      auto;
    max-width:  160px;
    object-fit: contain;
}

/* ─── Language Switcher ──────────────────────────────────── */
.mdp-lang-switcher {
    display:   flex;
    gap:       0.375rem;
}

.mdp-lang-btn {
    font-family:     var(--mdp-font);
    font-size:       0.8125rem;
    font-weight:     500;
    line-height:     1;
    color:           var(--mdp-gray-600);
    background:      var(--mdp-gray-50);
    border:          1.5px solid var(--mdp-gray-200);
    border-radius:   6px;
    padding:         0.5rem 1rem;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.mdp-lang-btn:hover {
    background:      var(--mdp-blue-light);
    border-color:    var(--mdp-blue);
    color:           var(--mdp-blue);
}

.mdp-lang-btn.active {
    background:      var(--mdp-blue);
    border-color:    var(--mdp-blue);
    color:           var(--mdp-white);
}

/* ─── Main layout ────────────────────────────────────────── */
.mdp-main {
    max-width: var(--mdp-max-width);
    margin:    0 auto;
    padding:   2rem 1.25rem 4rem;
}

/* ─── Language blocks ────────────────────────────────────── */
.mdp-lang-block {
    display: none;
}

.mdp-lang-block.active {
    display: block;
}

/* ─── Back link ──────────────────────────────────────────── */
.mdp-back-wrap {
    margin-bottom: 1.25rem;
}

.mdp-back-link {
    display:      inline-flex;
    align-items:  center;
    gap:          0.375rem;
    font-size:    0.875rem;
    font-weight:  500;
    color:        var(--mdp-blue);
    text-decoration: none;
    transition:   color 0.15s;
}

.mdp-back-link:hover {
    color: var(--mdp-blue-dark);
    text-decoration: underline;
}

/* ─── Generic card ───────────────────────────────────────── */
.mdp-card {
    background:    var(--mdp-white);
    border-radius: var(--mdp-radius);
    box-shadow:    var(--mdp-shadow);
    padding:       1.75rem 1.5rem;
    margin-bottom: var(--mdp-gap);
}

.mdp-card-heading {
    font-size:     1.0625rem;
    font-weight:   700;
    color:         var(--mdp-blue-dark);
    margin-bottom: 1.125rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--mdp-blue-light);
}

/* ─── Hero card ──────────────────────────────────────────── */
.mdp-hero-card {
    background:    var(--mdp-white);
    border-radius: var(--mdp-radius);
    box-shadow:    var(--mdp-shadow);
    padding:       2rem 1.5rem 1.75rem;
    margin-bottom: var(--mdp-gap);
    border-top:    4px solid var(--mdp-blue);
}

.mdp-doc-title {
    font-size:     1.625rem;
    font-weight:   800;
    color:         var(--mdp-blue-dark);
    line-height:   1.25;
    margin-bottom: 0.875rem;
}

.mdp-doc-description {
    font-size:  0.9375rem;
    color:      var(--mdp-gray-600);
    max-width:  72ch;
    line-height: 1.6;
}

/* ─── Metadata card ──────────────────────────────────────── */
.mdp-meta-card {
    background:       var(--mdp-white);
    border-radius:    var(--mdp-radius);
    box-shadow:       var(--mdp-shadow);
    padding:          1.25rem 1.5rem;
    margin-bottom:    var(--mdp-gap);
    display:          grid;
    grid-template-columns: repeat(2, 1fr);
    gap:              1rem 1.5rem;
}

.mdp-meta-card::before {display: none; }


.mdp-meta-item {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.mdp-meta-label {
    font-size:   0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--mdp-gray-400);
}

.mdp-meta-value {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--mdp-blue-dark);
}

/* ─── Notice card ────────────────────────────────────────── */
.mdp-notice-card {
    background:    var(--mdp-blue-light);
    border:        1px solid #BDD3F3;
    border-left:   4px solid var(--mdp-blue);
    border-radius: var(--mdp-radius-sm);
    padding:       1rem 1.25rem;
    margin-bottom: var(--mdp-gap);
    display:       flex;
    gap:           0.75rem;
    align-items:   flex-start;
}

.mdp-notice-icon {
    width:      20px;
    height:     20px;
    flex-shrink: 0;
    color:      var(--mdp-blue);
    margin-top: 1px;
}

.mdp-notice-card p {
    font-size:  0.875rem;
    color:      var(--mdp-blue-dark);
    line-height: 1.55;
}

/* ─── Quick Summary ──────────────────────────────────────── */
.mdp-summary-card {}

.mdp-summary-list {
    list-style:  none;
    display:     flex;
    flex-direction: column;
    gap:         0.625rem;
}

.mdp-summary-list li {
    display:     flex;
    gap:         0.75rem;
    align-items: flex-start;
    font-size:   0.9375rem;
    color:       var(--mdp-gray-600);
    line-height: 1.55;
}

.mdp-summary-icon {
    display:      inline-block;
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   var(--mdp-blue);
    flex-shrink:  0;
    margin-top:   0.45rem;
}

/* Font Awesome icon fallback — if FA is loaded, use checkmark */
.fa-check-circle,
.fa-circle-check {
    color:     var(--mdp-blue);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ─── Table of Contents card ─────────────────────────────── */
.mdp-toc-card {
    background:    var(--mdp-white);
    border-radius: var(--mdp-radius);
    box-shadow:    var(--mdp-shadow);
    padding:       1.5rem;
    margin-bottom: var(--mdp-gap);
}

.mdp-toc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1rem;
    padding-bottom:  0.625rem;
    border-bottom:   2px solid var(--mdp-blue-light);
}

.mdp-toc-header .mdp-card-heading {
    margin-bottom:  0;
    padding-bottom: 0;
    border-bottom:  none;
}

.mdp-toc-toggle {
    font-family:   var(--mdp-font);
    font-size:     0.8125rem;
    font-weight:   500;
    color:         var(--mdp-blue);
    background:    transparent;
    border:        1.5px solid var(--mdp-blue);
    border-radius: 6px;
    padding:       0.3125rem 0.875rem;
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
    white-space:   nowrap;
}

.mdp-toc-toggle:hover {
    background: var(--mdp-blue);
    color:      var(--mdp-white);
}

.mdp-toc-nav {
    transition: opacity 0.2s;
}

.mdp-toc-nav.hidden {
    display: none;
}

.mdp-toc-nav ol {
    list-style:    none;
    counter-reset: toc-h2;
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
}

.mdp-toc-nav > ol > li {
    counter-increment: toc-h2;
}

.mdp-toc-nav a {
    display:         block;
    font-size:       0.875rem;
    color:           var(--mdp-gray-800);
    text-decoration: none;
    padding:         0.3125rem 0.5rem;
    border-radius:   4px;
    transition:      background 0.12s, color 0.12s;
    line-height:     1.4;
}

.mdp-toc-nav a:hover {
    background: var(--mdp-blue-light);
    color:      var(--mdp-blue-dark);
}

.mdp-toc-nav .toc-h2-link {
    font-weight: 600;
    color:       var(--mdp-blue-dark);
}

.mdp-toc-nav .toc-h3-list {
    list-style:    none;
    padding-left:  1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           0.125rem;
    margin-top:    0.125rem;
}

.mdp-toc-nav .toc-h3-link {
    font-size:   0.8125rem;
    color:       var(--mdp-gray-600);
    padding:     0.25rem 0.5rem;
}

/* ─── Document body ──────────────────────────────────────── */
.mdp-document-card {
    padding: 2rem 1.5rem;
}

.mdp-document-body {
    max-width: 78ch;
}

/* ── Headings inside document ── */
.mdp-document-body h1 {
    font-size:     1.5rem;
    font-weight:   800;
    color:         var(--mdp-blue-dark);
    line-height:   1.25;
    margin-top:    2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--mdp-blue);
}

.mdp-document-body h1:first-child {
    margin-top: 0;
}

.mdp-document-body h2 {
    font-size:     1.1875rem;
    font-weight:   700;
    color:         var(--mdp-blue-dark);
    line-height:   1.3;
    margin-top:    2rem;
    margin-bottom: 0.75rem;
    padding-left:  0.875rem;
    border-left:   4px solid var(--mdp-blue);
}

.mdp-document-body h3 {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--mdp-gray-800);
    line-height:   1.35;
    margin-top:    1.5rem;
    margin-bottom: 0.625rem;
}

.mdp-document-body h4 {
    font-size:     0.9375rem;
    font-weight:   700;
    color:         var(--mdp-gray-800);
    margin-top:    1.25rem;
    margin-bottom: 0.5rem;
}

/* ── Paragraphs ── */
.mdp-document-body p {
    font-size:     0.9375rem;
    line-height:   1.7;
    color:         var(--mdp-gray-800);
    margin-bottom: 0.875rem;
}

/* ── Lists ── */
.mdp-document-body ul,
.mdp-document-body ol {
    margin:        0.75rem 0 0.875rem 1.5rem;
    padding:       0;
}

.mdp-document-body li {
    font-size:     0.9375rem;
    line-height:   1.65;
    color:         var(--mdp-gray-800);
    margin-bottom: 0.375rem;
    padding-left:  0.25rem;
}

.mdp-document-body ul > li::marker {
    color: var(--mdp-blue);
}

/* ── Tables ── */
.mdp-table-wrap,
.mdp-document-body .mdp-table-wrap {
    overflow-x:    auto;
    margin:        1.25rem 0;
    border-radius: var(--mdp-radius-sm);
    box-shadow:    var(--mdp-shadow-sm);
}

.mdp-document-body table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.875rem;
    background:      var(--mdp-white);
}

.mdp-document-body th {
    background:      var(--mdp-blue-dark);
    color:           var(--mdp-white);
    font-weight:     600;
    text-align:      left;
    padding:         0.625rem 0.875rem;
    font-size:       0.8125rem;
    letter-spacing:  0.02em;
}

.mdp-document-body td {
    padding:         0.5625rem 0.875rem;
    border-bottom:   1px solid var(--mdp-gray-100);
    color:           var(--mdp-gray-800);
    vertical-align:  top;
}

.mdp-document-body tr:last-child td {
    border-bottom: none;
}

.mdp-document-body tr:nth-child(even) td {
    background: var(--mdp-gray-50);
}

/* ── Links ── */
.mdp-document-body a {
    color:           var(--mdp-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition:      color 0.15s;
}

.mdp-document-body a:hover {
    color: var(--mdp-blue-dark);
}

/* ── Strong / em ── */
.mdp-document-body strong {
    font-weight: 700;
    color:       var(--mdp-blue-dark);
}

.mdp-document-body em {
    font-style: italic;
}

/* ── Blockquote ── */
.mdp-document-body blockquote {
    border-left:   4px solid var(--mdp-blue-light);
    margin:        1rem 0;
    padding:       0.75rem 1.25rem;
    background:    var(--mdp-gray-50);
    border-radius: 0 var(--mdp-radius-sm) var(--mdp-radius-sm) 0;
    color:         var(--mdp-gray-600);
    font-style:    italic;
}

/* ── HR divider ── */
.mdp-document-body hr {
    border:     none;
    border-top: 1px solid var(--mdp-gray-200);
    margin:     2rem 0;
}

/* ── Code ── */
.mdp-document-body code {
    font-family:      var(--mdp-font-mono);
    font-size:        0.85em;
    background:       var(--mdp-gray-100);
    padding:          0.125em 0.375em;
    border-radius:    4px;
    color:            var(--mdp-red);
}

/* ─── Document placeholder ───────────────────────────────── */
.mdp-document-placeholder {
    text-align:  center;
    padding:     3rem 1.5rem;
    color:       var(--mdp-gray-600);
    font-size:   0.9375rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≥ 640px)
═══════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
    .mdp-hero-card   { padding: 2.5rem 2rem 2rem; }
    .mdp-card        { padding: 2rem; }
    .mdp-toc-card    { padding: 1.75rem 2rem; }
    .mdp-document-card { padding: 2.5rem 2.5rem; }

    .mdp-meta-card {
        grid-template-columns: repeat(4, 1fr);
        padding: 1.5rem 2rem;
    }

    .mdp-doc-title { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Desktop (≥ 1024px)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .mdp-main { padding: 2.5rem 2rem 5rem; }

    .mdp-header-inner { padding: 1rem 2rem; }

    .mdp-document-body { max-width: 82ch; }

    .mdp-document-body h1 { font-size: 1.625rem; }
    .mdp-document-body h2 { font-size: 1.25rem; }

    .mdp-doc-title { font-size: 2.25rem; }
}

/* ─── Smooth scroll ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ─── Print ──────────────────────────────────────────────── */
@media print {
    .mdp-header,
    .mdp-back-wrap,
    .mdp-lang-switcher,
    .mdp-toc-card { display: none !important; }

    .mdp-document-card {
        box-shadow: none;
        padding:    0;
    }

    .mdp-document-body h1,
    .mdp-document-body h2,
    .mdp-document-body h3 {
        page-break-after: avoid;
    }
}