/* ============================================================
   THE DIGITAL NEWS
   Raise Your Voice
   File: raise-your-voice.css
   Version: 1.0
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

    /* Brand */

    --ryv-primary: #E30613;
    --ryv-primary-hover: #C70511;

    /* Text */

    --ryv-text: #111827;
    --ryv-text-light: #374151;
    --ryv-muted: #6B7280;

    /* Background */

    --ryv-bg: #FFFFFF;
    --ryv-bg-light: #F8FAFC;

    /* Borders */

    --ryv-border: #E5E7EB;

    /* Status */

    --ryv-success: #16A34A;
    --ryv-warning: #F59E0B;
    --ryv-error: #DC2626;

    /* Overlay */

    --ryv-overlay: rgba(17, 24, 39, .65);

    /* Radius */

    --ryv-radius-sm: 6px;
    --ryv-radius-md: 10px;
    --ryv-radius-lg: 16px;
    --ryv-radius-xl: 24px;
    --ryv-radius-pill: 999px;

    /* Shadows */

    --ryv-shadow-sm: 0 2px 8px rgba(0,0,0,.08);

    --ryv-shadow-md: 0 8px 24px rgba(0,0,0,.15);

    --ryv-shadow-lg: 0 20px 60px rgba(0,0,0,.20);

    /* Spacing */

    --ryv-space-1: 4px;
    --ryv-space-2: 8px;
    --ryv-space-3: 12px;
    --ryv-space-4: 16px;
    --ryv-space-5: 20px;
    --ryv-space-6: 24px;
    --ryv-space-8: 32px;
    --ryv-space-10: 40px;
    --ryv-space-12: 48px;

    /* Typography */

    --ryv-font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --ryv-font-xs: .75rem;
    --ryv-font-sm: .875rem;
    --ryv-font-md: 1rem;
    --ryv-font-lg: 1.125rem;
    --ryv-font-xl: 1.5rem;

    --ryv-floating-offset: 24px;

    --ryv-upload-bg: #FCFCFD;


    /* ============================================================
    Animation Tokens
    ============================================================ */

    --ryv-duration-fast: .18s;
    --ryv-duration-normal: .30s;
    --ryv-duration-slow: .45s;

    --ryv-ease: cubic-bezier(.4,0,.2,1);


    --ryv-z-button: 9000;
    --ryv-z-overlay: 9100;
    --ryv-z-modal: 9200;
}


/* ============================================================
   Hidden State
============================================================ */

.ryv-modal [hidden] {
    display: none !important;
}

/* ============================================================
   2. COMPONENT FOUNDATION
   ============================================================ */

.ryv-overlay,
.ryv-modal,
.ryv-container,
.ryv-header,
.ryv-body,
.ryv-intro,
.ryv-form {

    box-sizing: border-box;

}


/* ============================================================
   3. OVERLAY
   ============================================================ */

.ryv-overlay {

    position: fixed;

    inset: 0;

    z-index: var(--ryv-z-overlay);

    background: var(--ryv-overlay);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}


/* ============================================================
   4. MODAL
   ============================================================ */

.ryv-modal {

    position: fixed;

    inset: 0;

    z-index: var(--ryv-z-modal);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: var(--ryv-space-6);

    overflow-y: auto;

}


/* ============================================================
   5. MODAL CONTAINER
   ============================================================ */

.ryv-container {

    width: 100%;

    max-width: 680px;

    background: var(--ryv-bg);

    border-radius: var(--ryv-radius-xl);

    box-shadow: var(--ryv-shadow-lg);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    max-height: 92vh;

    position: relative;

}


/* ============================================================
   6. HEADER
   ============================================================ */

.ryv-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: var(--ryv-space-4);

    padding: var(--ryv-space-6);

    border-bottom: 1px solid var(--ryv-border);

    background: var(--ryv-bg);

}


/* ============================================================
   7. HEADER CONTENT
   ============================================================ */

.ryv-header-content {

    flex: 1;

}


.ryv-header-content h2 {

    margin: 0;

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-xl);

    font-weight: 700;

    line-height: 1.3;

}


.ryv-header-content p {

    margin-top: var(--ryv-space-2);

    margin-bottom: 0;

    color: var(--ryv-muted);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-sm);

    line-height: 1.7;

}


/* ============================================================
   8. BODY
   ============================================================ */

.ryv-body {

    flex: 1;

    overflow-y: auto;

    overscroll-behavior: contain;

    padding: var(--ryv-space-6);

    background: var(--ryv-bg-light);

}


/* ============================================================
   SCROLLBAR
============================================================ */

.ryv-body::-webkit-scrollbar {

    width:8px;

}

.ryv-body::-webkit-scrollbar-track {

    background:transparent;

}

.ryv-body::-webkit-scrollbar-thumb {

    background:#D1D5DB;

    border-radius:999px;

}

.ryv-body::-webkit-scrollbar-thumb:hover {

    background:#9CA3AF;

}

.ryv-modal ::selection {

    background:rgba(227,6,19,.15);

    color:var(--ryv-text);

}

/* ============================================================
   9. INTRODUCTION
   ============================================================ */

.ryv-intro {

    display: flex;

    align-items: flex-start;

    gap: var(--ryv-space-4);

    padding: var(--ryv-space-5);

    margin-bottom: var(--ryv-space-6);

    border: 1px solid var(--ryv-border);

    border-radius: var(--ryv-radius-lg);

    background: #FFF7F7;

}


.ryv-intro-icon {

    font-size: 2rem;

    flex-shrink: 0;

}


.ryv-intro-content {

    flex: 1;

}


.ryv-intro-content h3 {

    margin: 0 0 var(--ryv-space-2);

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-lg);

    font-weight: 700;

}


.ryv-intro-content p {

    margin: 0 0 var(--ryv-space-3);

    color: var(--ryv-text-light);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-sm);

    line-height: 1.8;

}


/* ============================================================
   10. REPORT TYPES FOUNDATION
   ============================================================ */

.ryv-report-types {

    margin-top: var(--ryv-space-4);

}


.ryv-report-types strong {

    display: block;

    margin-bottom: var(--ryv-space-2);

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-sm);

}


.ryv-report-types ul {

    margin: 0;

    padding-left: 20px;

}


.ryv-report-types li {

    margin-bottom: var(--ryv-space-2);

    color: var(--ryv-text-light);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-sm);

    line-height: 1.6;

}

/* ============================================================
   11. FORM FOUNDATION
   ============================================================ */

.ryv-form {

    display: flex;

    flex-direction: column;

    gap: var(--ryv-space-6);

}


/* ============================================================
   12. FORM HEADER
   ============================================================ */

.ryv-form-header {

    text-align: center;

    margin-bottom: var(--ryv-space-2);

}


.ryv-form-header h3 {

    margin: 0 0 var(--ryv-space-2);

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: 1.35rem;

    font-weight: 700;

}


.ryv-form-header p {

    margin: 0;

    color: var(--ryv-muted);

    font-size: var(--ryv-font-sm);

    line-height: 1.6;

}


/* ============================================================
   13. FORM FIELD
   ============================================================ */

.ryv-field {

    display: flex;

    flex-direction: column;

    gap: var(--ryv-space-2);

}


/* ============================================================
   14. LABELS
   ============================================================ */

.ryv-field label {

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-sm);

    font-weight: 600;

    line-height: 1.4;

}


.ryv-field label span {

    color: var(--ryv-primary);

}


.ryv-optional {

    color: var(--ryv-muted) !important;

    font-weight: 500;

}


/* ============================================================
   15. INPUTS & TEXTAREA
   ============================================================ */

.ryv-field input,

.ryv-field textarea {

    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--ryv-border);

    border-radius: var(--ryv-radius-md);

    background: #FFFFFF;

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-md);

    line-height: 1.5;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;

}


.ryv-field textarea {

    resize: vertical;

    min-height: 160px;

}


/* ============================================================
   16. PLACEHOLDERS
   ============================================================ */

.ryv-field input::placeholder,

.ryv-field textarea::placeholder {

    color: #9CA3AF;

}


/* ============================================================
   17. CHARACTER COUNTER
   ============================================================ */

.ryv-counter {

    display: flex;

    justify-content: flex-end;

    margin-top: -2px;

    color: var(--ryv-muted);

    font-size: var(--ryv-font-xs);

    font-family: var(--ryv-font-family);

    user-select: none;

}


/* ============================================================
   18. ERROR MESSAGE PLACEHOLDER
   ============================================================ */

.ryv-error {

    display: block;

    min-height: 18px;

    color: var(--ryv-error);

    font-size: var(--ryv-font-xs);

    line-height: 1.4;

}


/* ============================================================
   19. CONFIRMATION
   ============================================================ */

.ryv-confirmation {

    display: flex;

    flex-direction: column;

    gap: var(--ryv-space-2);

}


/* ============================================================
   20. CUSTOM CHECKBOX FOUNDATION
   ============================================================ */

.ryv-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;

    user-select: none;

}


.ryv-checkbox input {

    width: 18px;

    height: 18px;

    margin-top: 2px;

    accent-color: var(--ryv-primary);

    flex-shrink: 0;

}


.ryv-checkbox span {

    color: var(--ryv-text-light);

    font-size: var(--ryv-font-sm);

    line-height: 1.7;

}


/* ============================================================
   21. PRIVACY NOTICE
   ============================================================ */

.ryv-privacy {

    padding: var(--ryv-space-4);

    border-left: 4px solid var(--ryv-primary);

    border-radius: var(--ryv-radius-md);

    background: #FFF8F8;

    color: var(--ryv-text-light);

    font-size: var(--ryv-font-sm);

    line-height: 1.7;

}

/* ============================================================
   22. ACTION BUTTONS
============================================================ */

.ryv-actions {

    display: flex;

    justify-content: center;

    margin-top: var(--ryv-space-2);

}

.ryv-submit,

.ryv-done {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 54px;

    padding: 14px 28px;

    border: none;

    border-radius: var(--ryv-radius-md);

    background: var(--ryv-primary);

    color: #FFFFFF;

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-md);

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    user-select: none;

    transition:
        background var(--ryv-duration-fast),
        transform var(--ryv-duration-fast),
        box-shadow var(--ryv-duration-fast);

    box-shadow: var(--ryv-shadow-sm);

}

.ryv-submit:hover,

.ryv-done:hover {

    background: var(--ryv-primary-hover);

    transform: translateY(-2px);

    box-shadow: var(--ryv-shadow-md);

}

.ryv-submit:active,

.ryv-done:active {

    transform: translateY(0);

}

/* ============================================================
   22. HIDDEN FILE INPUT
   ============================================================ */

#ryvImages {

    display: none;

}


/* ============================================================
   23. FLOATING ACTION BUTTON
   ============================================================ */

.ryv-button {

    position: fixed;

    right: var(--ryv-floating-offset);

    bottom: var(--ryv-floating-offset);

    z-index: var(--ryv-z-button);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border: none;

    border-radius: var(--ryv-radius-pill);

    background: var(--ryv-primary);

    color: #FFFFFF;

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-sm);

    font-weight: 600;

    cursor: pointer;

    user-select: none;

    box-shadow: var(--ryv-shadow-md);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

    touch-action: manipulation;

}


.ryv-button-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    line-height: 1;

}


.ryv-button-text {

    white-space: nowrap;

}


/* ============================================================
   24. CLOSE BUTTON
   ============================================================ */

.ryv-close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--ryv-muted);

    font-size: 1.75rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


/* ============================================================
   25. UPLOAD AREA
   ============================================================ */

.ryv-upload-area {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 190px;

    padding: var(--ryv-space-6);

    border: 2px dashed var(--ryv-border);

    border-radius: var(--ryv-radius-lg);

    background: var(--ryv-upload-bg);

    cursor: pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

    position: relative;

}


/* ============================================================
   26. UPLOAD CONTENT
   ============================================================ */

.ryv-upload-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: var(--ryv-space-2);

    text-align: center;

}


/* ============================================================
   27. UPLOAD ICON
   ============================================================ */

.ryv-upload-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    border-radius: 50%;

    background: rgba(227, 6, 19, .08);

    font-size: 2rem;

    line-height: 1;

    flex-shrink: 0;

}


/* ============================================================
   28. UPLOAD TEXT
   ============================================================ */

.ryv-upload-content p {

    margin: 0;

    color: var(--ryv-text);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-md);

    font-weight: 600;

}


.ryv-upload-content small {

    display: block;

    color: var(--ryv-muted);

    font-family: var(--ryv-font-family);

    font-size: var(--ryv-font-xs);

    line-height: 1.6;

}


/* ============================================================
   29. HOVER STATES
   ============================================================ */

/* Floating Button */

.ryv-button:hover {

    background: var(--ryv-primary-hover);

    box-shadow: var(--ryv-shadow-lg);

    transform: translateY(-2px);

}


/* Close Button */

.ryv-close:hover {

    background: #F3F4F6;

    color: var(--ryv-primary);

}


/* Upload Area */

.ryv-upload-area:hover {

    border-color: var(--ryv-primary);

    background: #FFF8F8;

    box-shadow: var(--ryv-shadow-sm);

}


/* ============================================================
   30. ACTIVE STATES
   ============================================================ */

.ryv-button:active {

    transform: translateY(0);

}


.ryv-close:active {

    transform: scale(.95);

}


.ryv-upload-area:active {

    transform: scale(.99);

}


/* ============================================================
   31. FOCUS STATES
   ============================================================ */

.ryv-button:focus-visible,

.ryv-close:focus-visible,

.ryv-upload-area:focus-visible,

.ryv-field input:focus,

.ryv-field textarea:focus,

.ryv-checkbox input:focus {

    outline: none;

    border-color: var(--ryv-primary);

    box-shadow: 0 0 0 4px rgba(227,6,19,.15);

}


/* ============================================================
   32. VALID INPUT
   ============================================================ */

.ryv-field input.ryv-is-valid,

.ryv-field textarea.ryv-is-valid {

    border-color: var(--ryv-success);

}


/* ============================================================
   33. INVALID INPUT
   ============================================================ */

.ryv-field input.ryv-is-invalid,

.ryv-field textarea.ryv-is-invalid {

    border-color: var(--ryv-error);

    background: #FFF8F8;

}


/* Error message */

.ryv-field .ryv-error:not(:empty) {

    color: var(--ryv-error);

}


/* ============================================================
   34. CHARACTER COUNTER STATES
   ============================================================ */

.ryv-counter-warning {

    color: var(--ryv-warning);

}


.ryv-counter-danger {

    color: var(--ryv-error);

}


/* ============================================================
   35. UPLOAD DRAG STATE
   ============================================================ */

.ryv-upload-area.ryv-is-dragover {

    border-color: var(--ryv-primary);

    background: rgba(227,6,19,.06);

    box-shadow: 0 0 0 4px rgba(227,6,19,.08);

}


/* ============================================================
   36. UPLOAD SUCCESS
   ============================================================ */

.ryv-upload-area.ryv-is-uploaded {

    border-color: var(--ryv-success);

    background: #F0FDF4;

}


/* ============================================================
   37. DISABLED STATE
   ============================================================ */

.ryv-button:disabled,

.ryv-submit:disabled,

.ryv-done:disabled {

    opacity: .65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


/* ============================================================
   38. LOADING STATE
   ============================================================ */

.ryv-submit.ryv-is-loading {

    pointer-events: none;

    opacity: .85;

}


/* ============================================================
   39. SUCCESS SCREEN
   ============================================================ */


.ryv-success {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px;

    text-align: center;

}


.ryv-success-icon {

    font-size: 4rem;

}


.ryv-reference {

    margin-top: var(--ryv-space-6);

    padding: var(--ryv-space-4);

    border-radius: var(--ryv-radius-md);

    background: var(--ryv-bg-light);

    border: 1px solid var(--ryv-border);

    word-break: break-word;

}


/* ============================================================
   40. PREVIEW STATES
   ============================================================ */

.ryv-preview {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));

    gap: 12px;

    margin-top: var(--ryv-space-4);

}


.ryv-preview:empty {

    display: none;

}

/* ============================================================
   41. MODAL ANIMATIONS
   ============================================================ */

.ryv-overlay {

    opacity: 0;

    transition:
        opacity var(--ryv-duration-normal) var(--ryv-ease);

}


.ryv-modal {

    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--ryv-duration-normal) var(--ryv-ease);

}


.ryv-container {

    transform: translateY(24px) scale(.96);

    transition:

        transform var(--ryv-duration-normal) var(--ryv-ease);

}


/* Visible */

.ryv-overlay.ryv-is-visible {

    opacity: 1;

}


.ryv-modal.ryv-is-visible {

    opacity: 1;

    pointer-events: auto;

}


.ryv-modal.ryv-is-visible .ryv-container {

    transform: translateY(0) scale(1);

}


/* ============================================================
   43. SUCCESS ICON
   ============================================================ */

.ryv-success-icon {

    animation:

        ryvPop .6s ease;

}


@keyframes ryvPop {

    0% {

        transform: scale(.4);

        opacity: 0;

    }

    60% {

        transform: scale(1.15);

        opacity: 1;

    }

    100% {

        transform: scale(1);

    }

}


/* ============================================================
   44. IMAGE PREVIEW
   ============================================================ */

.ryv-preview img {

    animation:

        ryvImageIn .35s ease;

}


@keyframes ryvImageIn {

    from {

        opacity: 0;

        transform:

            scale(.92)

            translateY(12px);

    }

    to {

        opacity: 1;

        transform:

            scale(1)

            translateY(0);

    }

}


/* ============================================================
   45. FORM VALIDATION
   ============================================================ */

.ryv-is-invalid {

    animation:

        ryvShake .32s ease;

}


@keyframes ryvShake {

    0% {

        transform: translateX(0);

    }

    20% {

        transform: translateX(-4px);

    }

    40% {

        transform: translateX(4px);

    }

    60% {

        transform: translateX(-3px);

    }

    80% {

        transform: translateX(3px);

    }

    100% {

        transform: translateX(0);

    }

}


/* ============================================================
   46. SUCCESS PANEL
   ============================================================ */

.ryv-success {

    animation:

        ryvFadeUp .45s ease;

}


@keyframes ryvFadeUp {

    from {

        opacity: 0;

        transform:

            translateY(20px);

    }

    to {

        opacity: 1;

        transform:

            translateY(0);

    }

}


/* ============================================================
   47. BUTTON PRESS
   ============================================================ */

.ryv-button,

.ryv-submit,

.ryv-done,

.ryv-close {

    transition:

        transform var(--ryv-duration-fast),

        background var(--ryv-duration-fast),

        color var(--ryv-duration-fast),

        box-shadow var(--ryv-duration-fast);

}


/* ============================================================
   48. UPLOAD ICON
   ============================================================ */

.ryv-upload-icon {

    transition:

        transform var(--ryv-duration-normal) var(--ryv-ease);

}


.ryv-upload-area:hover .ryv-upload-icon {

    transform: scale(1.08);

}




/* ============================================================
   49. LARGE DESKTOP (1440px+)
   ============================================================ */

@media (min-width: 1440px) {

    .ryv-container {

        max-width: 720px;

    }

}


/* ============================================================
   50. LAPTOP (1200px and below)
   ============================================================ */

@media (max-width: 1200px) {

    .ryv-container {

        max-width: 680px;

    }

}


/* ============================================================
   51. TABLET (992px and below)
   ============================================================ */

@media (max-width: 992px) {

    .ryv-modal {

        padding: var(--ryv-space-4);

    }

    .ryv-container {

        max-width: 100%;

    }

    .ryv-header,
    .ryv-body {

        padding: var(--ryv-space-5);

    }

}


/* ============================================================
   52. SMALL TABLET (768px and below)
   ============================================================ */

@media (max-width: 768px) {

    .ryv-button {

        right: 20px;

        bottom: 20px;

        padding: 12px 18px;

    }

    .ryv-button-text {

        font-size: .85rem;

    }

    .ryv-header {

        gap: var(--ryv-space-3);

    }

    .ryv-header-content h2 {

        font-size: 1.35rem;

    }

    .ryv-intro {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .ryv-upload-area {

        min-height: 170px;

    }

}


/* ============================================================
   53. MOBILE (576px and below)
   ============================================================ */

@media (max-width:576px){

    .ryv-modal{

        align-items:flex-start;

        padding-top:20px;

        padding-bottom:20px;

        overflow-y:auto;

    }

    .ryv-header{

        display:flex;

        align-items:flex-start;

        justify-content:space-between;

        flex-shrink:0;

        padding:22px 18px 18px;

        background:#fff;

        border-bottom:1px solid #e5e7eb;

    }

    .ryv-header-content{

        flex:1;

        min-width:0;

        padding-right:12px;

    }

    .ryv-header-content h2{

        margin:0 0 10px;

        font-size:1.5rem;

        line-height:1.4;

    }

    .ryv-header-content p{

        margin:12px;

        font-size:.9rem;

        line-height:1.8;

    }

    .ryv-close{

        flex-shrink:0;

        width:42px;
        
        height:42px;

        margin:0;

    }

    .ryv-form-header h3 {

        font-size: 1.2rem;

    }

    .ryv-field input,

    .ryv-field textarea {

        padding: 13px 14px;

        font-size: .95rem;

    }

    .ryv-upload-area {

        min-height: 160px;

        padding: var(--ryv-space-5);

    }

    .ryv-upload-icon {

        width: 60px;

        height: 60px;

        font-size: 1.75rem;

    }

    .ryv-button {

        left: 16px;

        right: 16px;

        bottom: 16px;

        justify-content: center;

    }

}

/* ============================================================
   54. EXTRA SMALL DEVICES (400px and below)
   ============================================================ */

@media (max-width:400px){



}
@media (max-width: 400px) {

    .ryv-header{

        display:flex;

        flex-direction:row;

        justify-content:space-between;

        align-items:flex-start;

    }

    .ryv-header-content{

        flex:1;

        min-width:0;

        padding-right:12px;

    }

    .ryv-close{

        flex-shrink:0;

        margin-left:10px;

    }


    .ryv-upload-content p {

        font-size: .9rem;

    }

    .ryv-upload-content small {

        font-size: .72rem;

    }

}


/* ============================================================
   55. SAFE AREA SUPPORT
   ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {

    .ryv-button {

        bottom:

            calc(

                16px +

                env(safe-area-inset-bottom)

            );

    }

    .ryv-container {

        padding-bottom:

            env(safe-area-inset-bottom);

    }

}


/* ============================================================
   56. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ryv-modal,
    .ryv-modal *,
    .ryv-button,
    .ryv-overlay {

        animation:none !important;

        transition:none !important;

    }

}


/* ============================================================
   57. HIGH CONTRAST MODE
   ============================================================ */

@media (prefers-contrast: more) {

    .ryv-upload-area,

    .ryv-field input,

    .ryv-field textarea {

        border-width: 2px;

    }

}


/* ==========================================================
   INLINE STATUS MESSAGE
========================================================== */

.ryv-status-message{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-bottom:24px;

    padding:18px;

    border-left:5px solid #0f62fe;

    border-radius:12px;

    background:#f8f9fa;

    animation:fadeIn .25s ease;

}

.ryv-status-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.ryv-status-content{

    flex:1;

}

.ryv-status-content h4{

    margin:0 0 8px;

    font-size:18px;

    font-weight:700;

}

.ryv-status-content p{

    margin:0;

    line-height:1.7;

    color:#555;

}

.ryv-status-message.ryv-success{

    border-color:#198754;

    background:#edf9f1;

}

.ryv-success .ryv-status-icon{

    background:#198754;

    color:#fff;

}

.ryv-success .ryv-status-icon::before{

    content:"✓";

}

.ryv-status-message.ryv-warning{

    border-color:#fd7e14;

    background:#fff4e8;

}

.ryv-warning .ryv-status-icon{

    background:#fd7e14;

    color:#fff;

}

.ryv-warning .ryv-status-icon::before{

    content:"!";

}

.ryv-status-message.ryv-error{

    border-color:#dc3545;

    background:#fff0f2;

}

.ryv-error .ryv-status-icon{

    background:#dc3545;

    color:#fff;

}

.ryv-error .ryv-status-icon::before{

    content:"✕";

}

.ryv-status-message.ryv-info{

    border-color:#0d6efd;

    background:#eef5ff;

}

.ryv-info .ryv-status-icon{

    background:#0d6efd;

    color:#fff;

}

.ryv-info .ryv-status-icon::before{

    content:"i";

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   STATUS ACTIONS
========================================================== */

.ryv-status-actions{

    margin-top:18px;

}

.ryv-status-actions .btn{

    min-width:160px;

}


/* ==========================================================
   API LOADING STATUS
========================================================== */

.ryv-loading-status{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:1rem;

    padding:3rem 1.5rem;

    text-align:center;

}

.ryv-loading-spinner{

    width:52px;

    height:52px;

    border-radius:50%;

    border:4px solid rgba(37,99,235,.15);

    border-top-color:#2563EB;

    animation:ryvSpin 1s linear infinite;

}

@keyframes ryvSpin{

    to{

        transform:rotate(360deg);

    }

}

.ryv-loading-title{

    margin:0;

    font-size:1.35rem;

    font-weight:700;

    color:#0F172A;

}

.ryv-loading-message{

    max-width:520px;

    margin:0;

    color:#64748B;

    line-height:1.7;

}

.ryv-loading-countdown{

    font-weight:700;

    color:#2563EB;

}

/* ============================================================
   INDIAN FLAG COLOR EDITION — REPORT FORM
   Visual-only override. Form behaviour and structure unchanged.
   ============================================================ */

:root{
    --ryv-primary:#FF9933;
    --ryv-primary-hover:#E88722;
    --ryv-text:#14213D;
    --ryv-text-light:#334155;
    --ryv-muted:#64748B;
    --ryv-bg:#FFFFFF;
    --ryv-bg-light:#FBFCF9;
    --ryv-border:#E3E8E2;
    --ryv-success:#138808;
    --ryv-warning:#FF9933;
    --ryv-error:#C62828;
    --ryv-overlay:rgba(0,0,80,.68);
    --ryv-upload-bg:#F8FBF7;
}

.ryv-overlay{
    background:
        linear-gradient(
            135deg,
            rgba(255,153,51,.12),
            rgba(255,255,255,.08) 48%,
            rgba(19,136,8,.12)
        ),
        var(--ryv-overlay);
}

.ryv-container{
    border:1px solid rgba(0,0,128,.10);
    box-shadow:0 24px 70px rgba(0,0,80,.22);
}

.ryv-header{
    position:relative;
    background:#FFFFFF;
    border-bottom-color:rgba(0,0,128,.10);
}

.ryv-header::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:linear-gradient(
        90deg,
        #FF9933 0%,
        #FF9933 33.33%,
        #FFFFFF 33.33%,
        #FFFFFF 66.66%,
        #138808 66.66%,
        #138808 100%
    );
}

.ryv-header-content h2{
    color:var(--ryv-text);
}

.ryv-header-content p{
    color:var(--ryv-muted);
}

.ryv-body{
    background:
        linear-gradient(180deg,#FBFCF9 0%,#F7FAF5 100%);
}

.ryv-intro{
    background:linear-gradient(135deg,#FFF8EE,#FFFFFF);
    border-color:rgba(255,153,51,.22);
    box-shadow:0 8px 24px rgba(0,0,128,.04);
}

.ryv-intro-icon{
    color:#D97706;
}

.ryv-field input:focus,
.ryv-field textarea:focus{
    border-color:var(--ryv-saffron);
    box-shadow:0 0 0 4px rgba(255,153,51,.14);
    background:#FFFDF9;
}

.ryv-field label span{
    color:#D97706;
}

.ryv-privacy{
    border-left-color:var(--ryv-green);
    background:#F2F9F0;
}

.ryv-checkbox input{
    accent-color:var(--ryv-green);
}

.ryv-submit,
.ryv-done {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(0,0,128,.15);
}

.ryv-submit:hover:not(:disabled),
.ryv-done:hover:not(:disabled) {
    background: #138808 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.ryv-button {
    background: #FF9933 !important;
    color: #14213D !important;
    border: 1px solid rgba(255,153,51,.35) !important;
    box-shadow: 0 10px 28px rgba(255,153,51,.24);
}

.ryv-button:hover,
.ryv-button:focus {
    background: #138808 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.ryv-button:active {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.ryv-submit:disabled,
.ryv-done:disabled {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: .65;
}

.ryv-submit:disabled:hover,
.ryv-done:disabled:hover {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: none;
}

.ryv-button:focus-visible {
    outline: 3px solid rgba(0,0,128,.28);
    outline-offset: 3px;
}

.ryv-modal ::selection{
    background:rgba(255,153,51,.22);
    color:var(--ryv-text);
}

.ryv-body::-webkit-scrollbar-thumb{
    background:#B8C9B4;
}

.ryv-body::-webkit-scrollbar-thumb:hover{
    background:var(--ryv-green);
}


/* ============================================================
   FINAL BUTTON VISIBILITY FIX
   Indian Flag Color Edition
   ------------------------------------------------------------
   Purpose:
   Prevent global THE DIGITAL NEWS button styles from
   overriding Raise Your Voice button text/colors.
   ============================================================ */

/* ============================================================
   1. FLOATING "RAISE YOUR VOICE" BUTTON
============================================================ */

.ryv-button,
.ryv-button:visited {
    background: #FF9933 !important;
    color: #14213D !important;
    border: 1px solid rgba(255,153,51,.35) !important;
    -webkit-text-fill-color: #14213D !important;
}

.ryv-button:hover,
.ryv-button:focus {
    background: #138808 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.ryv-button:active {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* ============================================================
   2. SUBMIT FOR REVIEW BUTTON
============================================================ */

.ryv-submit,
.ryv-done {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.ryv-submit:hover:not(:disabled),
.ryv-done:hover:not(:disabled) {
    background: #138808 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.ryv-submit:disabled,
.ryv-done:disabled {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: .65;
    cursor: not-allowed;
}

.ryv-submit:disabled:hover,
.ryv-done:disabled:hover {
    background: #000080 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: none;
}


/* ============================================================
   3. ICON / TEXT INSIDE FLOATING BUTTON
============================================================ */

.ryv-button *,
.ryv-submit *,
.ryv-done * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}