* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'Moderat';
  src: url('./fonts/Moderat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat';
  src: url('../fonts/Moderat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.font-moderat {
  font-family: 'Moderat', sans-serif;
}
:root {
    --regular-font: 'Moderat', sans-serif;
    --bold-font: 'Moderat', sans-serif;
}
.flutterwave-label {
    font-weight: 600;
}
input {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.flw-play-step-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* make left/right columns match heights */
    /* margin: 30px 0px; */
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 1px;
    /* try to fill most of the viewport so panels use available vertical space */
    height: calc(100vh - 160px); /* Fixed height instead of min-height */
    min-width: 320px; /* Reduced from 800px for better mobile support */
    max-width: 100%;
    width: 100%;
    overflow: hidden; /* Prevent layout expansion */
}

.flw-play-step-left {
    flex: 0 0 30%;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color: rgb(238, 242, 245);
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 1px;
    min-width: 280px; /* Ensure minimum usable width */
    max-width: 400px; /* Prevent it from getting too wide on large screens */
    height: 100%; /* Take full height of parent */
    overflow: hidden; /* Prevent expansion, let children scroll */
}

.flw-play-step-right {
    /* right column: keep original width (70%) while filling available height */
    flex: 1;
    width: 0; /* Reset width to let flex handle it */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* allow children to shrink/grow and let internal scrolling work */
    min-height: 0;
    min-width: 0; /* Allow shrinking */
    height: 100%; /* Take full height of parent */
    overflow: hidden; /* Prevent vertical expansion */
}

/* inner container inside the right column: split into code (middle) and response (right) */
.flw-play-right-inner {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    height: 100%;
    min-width: 0; /* Allow flex children to shrink */
    overflow: hidden; /* Prevent expansion beyond container */
}

/* Code panel (right side) */
.code-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* take remaining vertical space in the right column so code can fill height */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0; /* Allow shrinking below natural width */
    max-width: 100%; /* Prevent expanding beyond container */
    align-items: stretch;
    overflow: hidden; /* Ensure children don't overflow */
}

.code-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 8px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    min-height: 44px; /* Ensure touch-friendly height */
}

.method-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap; /* Prevent wrapping */
    flex-shrink: 0; /* Don't shrink */
}

.endpoint {
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    min-width: 0; /* Allow text to truncate */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lang {
    color: #4b5563;
    font-size: 13px;
    flex-shrink: 0; /* Don't shrink */
    white-space: nowrap; /* Prevent wrapping */
}

/* Style the syntax highlighter container to match the dark code area */
.code-panel :is(pre, .react-syntax-highlighter, .shiki-container pre) {
    background: #0b2330 !important;
    color: #cbd5e1 !important;
    border-radius: 12px;
    padding: 20px !important;
    box-shadow: rgba(2,6,23,0.3) 0px 8px 24px inset;
    overflow: auto;
}

.shiki-container {
    /* make the shiki container flexible so it fills available height */
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0; /* Allow shrinking */
    max-width: 100%;
    width: 100%; /* Force it to take container width */
    align-self: stretch;
    overflow: auto; /* Enable both horizontal and vertical scrolling */
    max-height: 100%; /* Constrain height to container */
}

.shiki-container pre {
    margin: 0;
    /* allow the pre to stretch inside the flex container and scroll internally */
    height: 100%;
    width: 100%; /* Force pre to respect container width */
    max-width: 100%; /* Prevent expansion */
    box-sizing: border-box;
    overflow: auto; /* Enable scrolling when content exceeds container */
}

.shiki-container code {
        display: block;
        font-size: 15px;
        height: 100%;
}

/* Default: enable soft wrapping for better readability */
.shiki-container pre,
.shiki-container code,
.shiki-container .line,
.shiki-container .shiki-line {
    white-space: pre-wrap !important; /* Enable wrapping by default */
    overflow-wrap: anywhere; /* Allow breaks inside long tokens */
    word-break: break-word !important;
    max-width: 100%; /* Prevent expansion beyond container */
    width: 100%; /* Use full container width */
}

/* allow wrapping inside lines */
.shiki-line {
  display: flex;
  align-items: flex-start;
  white-space: pre-wrap;   /* WRAP long lines */
  word-break: break-word;  /* break long tokens if needed */
}

/* code column should also wrap */
.shiki-code {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

/* keep line numbers fixed width */
.shiki-ln {
  width: 3rem;
  text-align: right;
  padding-right: 1rem;
  opacity: 0.4;
  user-select: none;
}

.flw-response {
    background: #0f1724;
    padding: 16px;
    margin-top: 0; /* handled by layout spacing */
    border-radius: 8px;
    color: #e6eef6;
    /* make response a fixed right column and fill available height */
    flex: 0 0 34%;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
}

.flw-response .status-ok { color: #4ade80; }
.flw-response .status-fail { color: #f87171; }

.flw-response pre {
    margin: 0;
    white-space: pre-wrap; /* allow wrapping */
    word-break: break-word; /* break long tokens */
    overflow: auto; /* scroll when content is large */
    max-width: 100%;
    height: 100%;
}

div.flw-play-step-left > input {
    width: calc(100% - 16px);
    height: 30px;
    padding: 4px 8px;
    font-family: var(--regular-font);
    font-size: 14px;
    border: 1px solid rgb(238, 242, 245);
    box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 1px;
    border-radius: 6px;
    outline: none;
}

/* Sidebar specific styles */
.flw-play-sidebar {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling when content overflows */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.flw-play-back {
    background: none;
    border: none;
    color: #334155;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.flw-play-title {
    margin: 4px 0 0 0;
    font-size: 20px;
    font-weight: 600;
}

.flw-play-desc {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    margin-top: 10px;
}

.flw-play-field {
    margin-top: 10px;
}

.flw-play-label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #111827;
}

.flw-play-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e6e9ee;
    box-shadow: none;
    font-size: 14px;
    box-sizing: border-box;
}

.flw-play-input-error {
    border-color: #ef4444;
}

.flw-play-error {
    display: block;
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}

.flw-play-helper {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}

.flw-play-action {
    margin-top: 18px;
    background: #ff9b00; /* orange */
    color: white;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    width: 100%;
    font-weight: 600;
    cursor: pointer;
}

.flw-play-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Action row and secondary button */
.flw-play-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.flw-play-secondary {
    background: white;
    color: #0f1724;
    border: 1px solid #e6e9ee;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.flw-play-action.loading {
    opacity: 0.95;
}

/* Tablet and medium-sized screens */
@media (max-width: 1024px) and (min-width: 769px) {
    .flw-play-step-layout {
        min-height: calc(100vh - 120px);
    }

    .flw-play-step-left {
        flex: 0 0 35%;
        min-width: 300px;
    }

    .flw-play-step-right {
        padding: 16px;
    }

    .code-panel :is(pre, .react-syntax-highlighter, .shiki-container pre) {
        padding: 16px !important;
        font-size: 14px !important;
    }

    .flw-play-sidebar {
        padding: 16px;
    }
}

/* Small tablets and large phones in landscape */
@media (max-width: 768px) and (min-width: 481px) {
    .flw-play-step-layout {
        flex-direction: column;
        margin: 12px;
        min-height: auto;
        border-radius: 8px;
    }

    .flw-play-step-left {
        flex: 0 0 auto;
        width: 100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
        background-color: #f8fafc;
        padding: 16px;
        min-width: auto;
        max-width: none;
    }

    .flw-play-step-right {
        width: 100%;
        padding: 16px;
    }

    /* Keep code and response side by side on tablets */
    .flw-play-right-inner { 
        flex-direction: row;
        gap: 12px;
    }
    
    .flw-response { 
        flex: 0 0 40%;
        height: auto;
        min-height: 300px;
        margin-top: 0;
    }

    .flw-play-title { 
        font-size: 18px; 
    }
    
    .flw-play-desc { 
        font-size: 14px; 
    }

    .code-header {
        gap: 8px;
        flex-wrap: wrap;
    }

    .endpoint {
        font-size: 14px;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .flw-play-step-layout {
        flex-direction: column;
        margin: 8px;
        height: calc(100vh - 120px); /* Fixed height on mobile */
        min-height: auto;
        border-radius: 8px;
        min-width: auto;
        overflow: hidden;
    }

    .flw-play-step-left {
        flex: 0 0 auto;
        width: 100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
        background-color: #f8fafc;
        padding: 12px;
        min-width: auto;
        max-width: none;
        max-height: 40vh; /* Limit height on mobile */
        overflow-y: auto;
    }

    .flw-play-step-right {
        width: 100%;
        padding: 12px;
    }

    /* Stack code and response vertically on mobile */
    .flw-play-right-inner { 
        flex-direction: column; 
        gap: 12px;
    }
    
    .flw-response { 
        flex: 0 0 auto; 
        height: auto; 
        margin-top: 0;
    }

    /* Make sidebar more compact on mobile */
    .flw-play-sidebar {
        padding: 12px;
        gap: 10px;
        height: auto;
    }

    .flw-play-title { 
        font-size: 18px; 
        line-height: 1.3;
    }
    
    .flw-play-desc { 
        font-size: 13px; 
        line-height: 1.4;
    }

    div.flw-play-step-left > input {
        width: calc(100% - 12px);
        height: 40px; /* Larger touch target */
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .flw-play-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px;
        height: auto;
        min-height: 44px; /* Touch-friendly */
    }

    /* Keep action button visible and easy to tap */
    .flw-play-action {
        margin-top: 16px;
        padding: 14px;
        font-size: 16px;
        min-height: 48px; /* Touch-friendly */
        position: sticky;
        bottom: 12px;
        border-radius: 10px;
    }

    .flw-play-secondary {
        padding: 12px 16px;
        font-size: 16px;
        min-height: 44px;
        border-radius: 8px;
    }

    /* Code header adjustments */
    .code-header {
        gap: 6px;
        flex-wrap: wrap;
        align-items: flex-start;
        min-height: auto;
    }

    .method-badge {
        font-size: 11px;
        padding: 5px 8px;
    }

    .endpoint {
        font-size: 13px;
        width: 100%;
        order: 10; /* Move to next line */
        margin-top: 4px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .lang {
        font-size: 12px;
    }

    /* Code panel adjustments */
    .code-panel :is(pre, .react-syntax-highlighter, .shiki-container pre) {
        padding: 12px !important;
        font-size: 13px !important;
        border-radius: 8px;
        line-height: 1.4;
    }

    .shiki-container code { 
        font-size: 13px;
        line-height: 1.4;
    }

    /* Ensure code blocks wrap or scroll nicely */
    .shiki-container {
        max-width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shiki-container pre {
        white-space: pre-wrap;
        word-break: break-word;
        margin: 0;
        overflow-x: auto;
    }

    /* Response panel mobile adjustments */
    .flw-response {
        padding: 12px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.4;
    }

    .flw-response pre {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Line numbers: keep compact on mobile */
    .shiki-ln {
        width: 2em;
        padding-right: 6px;
        font-size: 11px;
    }

    /* Field styling for mobile */
    .flw-play-field {
        margin-top: 12px;
    }

    .flw-play-label {
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .flw-play-helper {
        font-size: 13px;
        line-height: 1.4;
        margin-top: 8px;
    }

    .flw-play-error {
        font-size: 13px;
        margin-top: 6px;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .flw-play-step-layout { 
        margin: 4px; 
        border-radius: 6px;
    }
    
    .flw-play-step-right { 
        padding: 8px; 
    }
    
    .flw-play-step-left { 
        padding: 8px; 
    }
    
    .flw-play-title { 
        font-size: 16px; 
    }

    .flw-play-sidebar {
        padding: 8px;
        gap: 8px;
    }
    
    .code-panel :is(pre, .react-syntax-highlighter, .shiki-container pre) { 
        font-size: 12px !important; 
        padding: 8px !important; 
        line-height: 1.3;
    }

    .flw-response {
        padding: 8px;
        font-size: 12px;
    }

    .flw-response pre {
        font-size: 12px;
        line-height: 1.3;
    }

    .flw-play-action {
        padding: 12px 8px;
        font-size: 15px;
    }
}

/* High DPI / Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .code-panel :is(pre, .react-syntax-highlighter, .shiki-container pre) {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .flw-play-step-layout {
        flex-direction: row;
        min-height: calc(100vh - 80px);
    }

    .flw-play-step-left {
        flex: 0 0 40%;
        width: auto;
        border-top-right-radius: 0;
        border-bottom-left-radius: 8px;
        background-color: rgb(238, 242, 245);
        max-width: 350px;
    }

    .flw-play-step-right {
        width: auto;
        flex: 1;
    }

    .flw-play-right-inner {
        flex-direction: column;
        height: 100%;
    }

    .flw-response {
        flex: 0 0 30%;
        min-height: 200px;
    }
}

/* Print styles */
@media print {
    .flw-play-step-layout {
        box-shadow: none;
        border: 1px solid #ccc;
        min-height: auto;
        flex-direction: column;
    }

    .flw-play-step-left {
        background: white;
        border-bottom: 1px solid #ccc;
    }

    .flw-play-action {
        display: none;
    }

    .code-panel :is(pre, .react-syntax-highlighter, .shiki-container pre) {
        background: #f8f9fa !important;
        color: #333 !important;
        border: 1px solid #ddd;
    }

    .flw-response {
        background: #f8f9fa;
        color: #333;
        border: 1px solid #ddd;
    }
}

/* Focus management and accessibility */
.flw-play-action:focus,
.flw-play-secondary:focus,
.flw-play-input:focus {
    outline: 2px solid #ff9b00;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .flw-play-step-layout {
        border: 2px solid;
    }
    
    .method-badge {
        border: 1px solid;
    }
    
    .flw-play-action,
    .flw-play-secondary {
        border: 2px solid;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* CSS custom properties could be used here for dark mode theming */
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --border-color: #333;
    }
}

/* Container queries support (progressive enhancement) */
@supports (container-type: inline-size) {
    .flw-play-step-layout {
        container-type: inline-size;
    }
    
    @container (max-width: 768px) {
        .flw-play-right-inner {
            flex-direction: column;
        }
    }
}

/* Utility classes for responsive design */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Responsive text utilities */
@media (max-width: 480px) {
    .text-responsive {
        font-size: 14px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .text-responsive {
        font-size: 15px;
    }
}

@media (min-width: 769px) {
    .text-responsive {
        font-size: 16px;
    }
}