/**
 * SVG Fine Art Viewer Styles
 *
 * @package SVG_Fine_Art_Viewer
 */

/* ==========================================================================
   THEME ISOLATION - Reset all inherited styles within VFAV
   ========================================================================== */

#vfav-app,
#vfav-app *,
#vfav-app *::before,
#vfav-app *::after,
#crop-overlay,
#crop-overlay *,
#crop-overlay *::before,
#crop-overlay *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Re-apply necessary styles after reset */
#vfav-app button,
#crop-overlay button {
    cursor: pointer !important;
}

#vfav-app select,
#crop-overlay select {
    cursor: pointer !important;
}

#vfav-app input,
#crop-overlay input {
    cursor: text !important;
}

#vfav-app input[type="range"],
#crop-overlay input[type="range"] {
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

.vfav-fullscreen,
.vfav-fullscreen body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#vfav-app {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: relative !important;
    background: #000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Viewer Container */
#viewer-container {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    cursor: grab !important;
    background: #111 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6) !important;
    touch-action: manipulation !important;
    z-index: 1 !important;
}

body.hide-cursor #viewer-container {
    cursor: none !important;
}

/* Frames Container */
#frames-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    transition: transform 0.1s ease-out;
}

.vfav-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

.vfav-frame.active {
    opacity: 1;
    pointer-events: auto;
}

.vfav-frame svg {
    width: 100%;
    height: 100%;
}

/* Frame Indicator - only shown for SVG animation */
#vfav-app #frame-indicator {
    position: absolute !important;
    bottom: 85px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #000 !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    z-index: 45 !important;
    opacity: 1 !important;
    transition: opacity 0.3s !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Hide frame indicator during loading */
#vfav-app #frame-indicator.hidden-during-load,
#frame-indicator.hidden-during-load {
    display: none !important;
}

/* Frame indicator hides when control bar hides */
body.inactive #vfav-app #frame-indicator,
body.inactive #frame-indicator {
    opacity: 0 !important;
}

/* Loading Progress */
#vfav-app .loading-progress {
    margin-top: 20px !important;
    text-align: center !important;
    padding: 0 !important;
    background: transparent !important;
}

#vfav-app .progress-bar,
#vfav-app #loading-overlay .progress-bar {
    width: 200px !important;
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin: 0 auto 10px auto !important;
    padding: 0 !important;
    border: none !important;
    position: relative !important;
}

#vfav-app .progress-fill,
#vfav-app #loading-overlay .progress-fill,
#vfav-app #progress-fill {
    height: 100% !important;
    width: 0% !important;
    background-color: #0a84ff !important;
    -webkit-transition: width 0.2s ease-out !important;
    transition: width 0.2s ease-out !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

#vfav-app .progress-text {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Playback Controls */
#vfav-app #playback-controls,
#controls #playback-controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    border: none !important;
    height: 32px !important;
}

#vfav-app #playback-controls button,
#controls #playback-controls button {
    padding: 4px 6px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#vfav-app .play-pause-btn,
#controls .play-pause-btn {
    background: rgba(10, 132, 255, 0.3) !important;
    border-radius: 6px !important;
}

#vfav-app .play-pause-btn:hover,
#controls .play-pause-btn:hover {
    background: rgba(10, 132, 255, 0.5) !important;
}

/* Speed Select */
#vfav-app #speed-select,
#controls #speed-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    height: 32px !important;
    cursor: pointer !important;
    margin: 0 !important;
    min-width: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

#vfav-app #speed-select option,
#controls #speed-select option {
    background: #222 !important;
    color: #fff !important;
    padding: 5px !important;
}

/* Frame Selector */
#vfav-app #frame-selector,
#controls #frame-selector {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    height: 32px !important;
    cursor: pointer !important;
    max-width: 180px !important;
    margin: 0 !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

#vfav-app #frame-selector option,
#controls #frame-selector option {
    background: #222 !important;
    color: #fff !important;
    padding: 5px !important;
}

/* Mode Toggle Buttons (Static button) - must match animate-select styling */
#vfav-app .mode-toggle-btn,
#controls .mode-toggle-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    min-width: auto !important;
    cursor: pointer !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-style: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#vfav-app .mode-toggle-btn:hover,
#controls .mode-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#vfav-app .mode-toggle-btn:focus,
#controls .mode-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#vfav-app .mode-toggle-btn svg,
#controls .mode-toggle-btn svg {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle !important;
}

/* Animate Select Dropdown */
#vfav-app .animate-select,
#controls .animate-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    cursor: pointer !important;
    margin: 0 !important;
    min-width: auto !important;
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 32px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

#vfav-app .animate-select:hover,
#controls .animate-select:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#vfav-app .animate-select option,
#controls .animate-select option {
    background: #222 !important;
    color: #fff !important;
    padding: 5px !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Active state - blue border for current mode */
#vfav-app .animate-select.vfav-active,
#controls .animate-select.vfav-active,
#vfav-app .mode-toggle-btn.vfav-active,
#controls .mode-toggle-btn.vfav-active {
    border: 1px solid #0A84FF !important;
}

/* Media containers for GIF and MP4 */
.media-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.media-container.hidden {
    display: none;
}

#gif-display {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#mp4-display {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

/* Loading Overlay */
#vfav-app #loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #111 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 100 !important;
    transition: opacity 0.5s ease-out, background 0.3s ease-out !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* When first frame is shown, overlay becomes semi-transparent */
#vfav-app #loading-overlay.preview-mode {
    background: rgba(17, 17, 17, 0.7) !important;
    pointer-events: none !important;
}

#vfav-app .loading-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#vfav-app #loading-overlay.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

#vfav-app .loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-animation: vfav-spin 1s linear infinite !important;
    animation: vfav-spin 1s linear infinite !important;
}

@-webkit-keyframes vfav-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes vfav-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

#vfav-app .loading-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    font-style: italic !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: normal !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Main Controls */
#controls {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #000 !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    /* display is controlled by JS - don't set here */
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    opacity: 1 !important;
    transition: opacity 0.3s !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    touch-action: manipulation !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
}

/* When controls are shown (via JS), ensure proper flex layout */
#controls[style*="display: flex"] {
    display: flex !important;
}

#controls:hover {
    opacity: 1 !important;
}

body.inactive #controls {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Fullscreen mode - ensure controls are visible and properly positioned */
#vfav-app:fullscreen #controls,
#vfav-app:-webkit-full-screen #controls,
#vfav-app:-moz-full-screen #controls,
#vfav-app:-ms-fullscreen #controls {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
}

/* In fullscreen, hide controls when app has inactive class */
#vfav-app:fullscreen.inactive #controls,
#vfav-app:-webkit-full-screen.inactive #controls,
#vfav-app:-moz-full-screen.inactive #controls {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* In fullscreen, show controls when not inactive */
#vfav-app:fullscreen:not(.inactive) #controls,
#vfav-app:-webkit-full-screen:not(.inactive) #controls,
#vfav-app:-moz-full-screen:not(.inactive) #controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Fullscreen background */
#vfav-app:fullscreen,
#vfav-app:-webkit-full-screen {
    background: #000 !important;
    width: 100vw !important;
    height: 100vh !important;
}

#vfav-app:fullscreen #viewer-container,
#vfav-app:-webkit-full-screen #viewer-container {
    width: 100% !important;
    height: 100% !important;
}

#controls .title {
    font-size: 15px !important;
    font-weight: bold !important;
    font-style: italic !important;
    color: #ccc !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#controls .controls-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Animation controls row - keeps frame selector, animate, static on one line */
#controls .animation-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Playback row - keeps playback buttons and speed selector on one line */
/* Hidden by default - JS sets display:flex when in animated mode */
#controls #playback-row,
#controls .playback-row {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* When JS adds this class, show the playback row */
#controls #playback-row.visible,
#controls .playback-row.visible {
    display: flex !important;
}

#controls button {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    border-radius: 5px !important;
    transition: background 0.2s !important;
    color: white !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1 !important;
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#controls button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#controls button:focus {
    outline: none !important;
    box-shadow: none !important;
}

#controls .export-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 8px !important;
    font-size: 20px !important;
}

#controls .export-btn:hover {
    background: rgba(10, 132, 255, 0.3) !important;
}

/* Icon buttons - consistent sizing and alignment */
#controls .icon-btn {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 8px !important;
    height: 32px !important;
    min-height: 32px !important;
    width: auto !important;
    min-width: auto !important;
}

/* Allow JavaScript to hide icon buttons via inline style */
#controls .icon-btn[style*="display: none"],
#controls .icon-btn[style*="display:none"] {
    display: none !important;
}

#controls .icon-btn svg {
    stroke: currentColor !important;
    width: 18px !important;
    height: 18px !important;
}

/* Ensure all control bar elements have consistent height */
#controls button,
#controls select,
#controls .mode-toggle-btn,
#controls .animate-select {
    height: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* Align Menu Container */
#vfav-app .align-menu-container {
    position: relative !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

#vfav-app .align-menu-dropdown {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    margin-bottom: 8px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border: none !important;
}

/* Dropdown that opens upward (for crop/print/export tabs) */
#vfav-app .align-menu-dropdown.align-dropdown-up {
    bottom: auto !important;
    top: 100% !important;
    margin-bottom: 0 !important;
    margin-top: 8px !important;
}

#vfav-app .align-menu-dropdown.show {
    display: flex !important;
}

#vfav-app .align-menu-item {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #fff !important;
    padding: 8px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
}

#vfav-app .align-menu-item:hover {
    background: rgba(10, 132, 255, 0.4) !important;
}

#vfav-app .align-menu-item svg {
    stroke: currentColor !important;
}

/* Crop/Print/Export align menu specific styles */
#vfav-app .crop-align-menu,
#vfav-app .print-align-menu,
#vfav-app .export-align-menu {
    display: inline-flex !important;
}

/* Tooltip styles */
#vfav-app [data-tooltip],
#controls [data-tooltip] {
    position: relative !important;
}

/* Wrapper for select elements to enable tooltips */
#vfav-app .select-tooltip-wrapper,
#controls .select-tooltip-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hidden state for select wrapper - must override the inline-flex above */
#vfav-app .select-tooltip-wrapper.vfav-hidden,
#controls .select-tooltip-wrapper.vfav-hidden,
.select-tooltip-wrapper.vfav-hidden {
    display: none !important;
}

#vfav-app [data-tooltip]:hover::after,
#controls [data-tooltip]:hover::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    margin-bottom: 5px !important;
    pointer-events: none !important;
    line-height: 1.4 !important;
    border: none !important;
    box-shadow: none !important;
}

#vfav-app [data-tooltip]:hover::before,
#controls [data-tooltip]:hover::before {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 5px solid transparent !important;
    border-top-color: rgba(0, 0, 0, 0.9) !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* Info Panel */
#info-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 400px !important;
    max-width: 90vw !important;
    height: 100% !important;
    background: #000 !important;
    color: #fff !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-out !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#info-panel.info-panel-visible {
    transform: translateX(0) !important;
}

#info-panel-content {
    padding: 30px !important;
    margin: 0 !important;
    background: transparent !important;
}

#info-panel .info-close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 30px !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#info-panel .info-close-btn:hover {
    opacity: 1 !important;
}

#info-panel .info-title {
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 0 25px 0 !important;
    padding-right: 40px !important;
    font-style: italic !important;
    color: var(--vfav-title-color, #fff) !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#info-panel .info-description {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #aaa !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Hidden section class for dynamically shown/hidden elements */
#info-panel .hidden-section,
.hidden-section {
    display: none !important;
}

/* Buy Section */
#info-panel .buy-section {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

/* Buy section hidden state */
#info-panel .buy-section.hidden-section {
    display: none !important;
}

#info-panel .buy-button {
    display: inline-block !important;
    background: var(--vfav-button-bg-color, #e0e0e0) !important;
    color: var(--vfav-button-text-color, #1a1a1a) !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
    border: none !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
}

#info-panel .buy-button:hover {
    background: var(--vfav-button-hover-bg-color, #ffffff) !important;
    color: var(--vfav-button-hover-text-color, #000000) !important;
}

#info-panel .buy-price {
    color: #aaa !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: normal !important;
}

#info-panel .info-meta {
    margin-bottom: 25px !important;
    padding: 0 !important;
    background: transparent !important;
}

#info-panel .info-row {
    display: grid !important;
    grid-template-columns: minmax(80px, 45%) 1fr !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    background: transparent !important;
    align-items: baseline !important;
}

#info-panel .info-label {
    color: #888 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: normal !important;
    font-style: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
}

#info-panel .info-value {
    color: #fff !important;
    font-size: 14px !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

#info-panel .info-value a {
    color: var(--vfav-link-color, #e0e0e0) !important;
    text-decoration: underline !important;
    transition: color 0.2s !important;
    background: transparent !important;
    font-weight: normal !important;
}

#info-panel .info-value a:hover {
    color: var(--vfav-link-hover-color, #ffffff) !important;
    text-decoration: underline !important;
}

#info-panel .info-value a:active,
#info-panel .info-value a:visited {
    color: var(--vfav-link-active-color, #b0b0b0) !important;
    text-decoration: underline !important;
}

/* Select Dropdowns - base styles for vfav-app */
#vfav-app select {
    background: #222 !important;
    border: 1px solid #555 !important;
    color: #fff !important;
    border-radius: 5px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#vfav-app select option {
    background: #222 !important;
    color: #fff !important;
    padding: 5px !important;
}

#vfav-app select optgroup {
    background: #333 !important;
    color: #aaa !important;
    font-weight: bold !important;
    font-style: normal !important;
}

/* Crop Mode Styles */
#crop-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #1a1a1a !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#crop-overlay.active {
    display: flex !important;
}

#crop-canvas-container {
    flex: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

#crop-canvas-container.loading::after {
    content: 'Loading Artwork...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #000;
    font-style: italic;
    z-index: 10;
}

#crop-svg-wrapper {
    position: absolute !important;
    transform-origin: center center !important;
}

#crop-svg-element {
    display: block !important;
    max-width: none !important;
    max-height: none !important;
}

#crop-rect-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

#crop-rect {
    position: absolute !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
    cursor: move !important;
    pointer-events: auto !important;
    background: transparent !important;
}

#crop-rect.fit-mode {
    border-color: #30d158 !important;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3) !important;
    cursor: default !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

#crop-rect.fit-mode::before {
    content: 'PAPER' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    font-size: 10px !important;
    color: #30d158 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    letter-spacing: 1px !important;
}

#crop-rect.fit-mode .crop-handle,
#crop-rect.fit-mode .crop-edge {
    display: none !important;
}

#crop-overlay .crop-handle {
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#crop-overlay .crop-handle.corner-tl { top: 0 !important; left: 0 !important; cursor: nwse-resize !important; }
#crop-overlay .crop-handle.corner-tr { top: 0 !important; right: 0 !important; transform: translate(50%, -50%) !important; cursor: nesw-resize !important; }
#crop-overlay .crop-handle.corner-bl { bottom: 0 !important; left: 0 !important; transform: translate(-50%, 50%) !important; cursor: nesw-resize !important; }
#crop-overlay .crop-handle.corner-br { bottom: 0 !important; right: 0 !important; transform: translate(50%, 50%) !important; cursor: nwse-resize !important; }

#crop-overlay .crop-edge {
    position: absolute !important;
    background: transparent !important;
}

#crop-overlay .crop-edge.edge-t { top: -8px !important; left: 20px !important; right: 20px !important; height: 16px !important; cursor: ns-resize !important; }
#crop-overlay .crop-edge.edge-b { bottom: -8px !important; left: 20px !important; right: 20px !important; height: 16px !important; cursor: ns-resize !important; }
#crop-overlay .crop-edge.edge-l { left: -8px !important; top: 20px !important; bottom: 20px !important; width: 16px !important; cursor: ew-resize !important; }
#crop-overlay .crop-edge.edge-r { right: -8px !important; top: 20px !important; bottom: 20px !important; width: 16px !important; cursor: ew-resize !important; }

/* Grid lines */
#crop-overlay .crop-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
}

#crop-overlay .crop-grid-line {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

.crop-grid-line.horizontal {
    width: 100%;
    height: 1px;
}

.crop-grid-line.vertical {
    width: 1px;
    height: 100%;
}

#crop-overlay .crop-grid-line.h1 { top: 33.33% !important; }
#crop-overlay .crop-grid-line.h2 { top: 66.66% !important; }
#crop-overlay .crop-grid-line.v1 { left: 33.33% !important; }
#crop-overlay .crop-grid-line.v2 { left: 66.66% !important; }

/* Crop Controls */
#crop-controls {
    flex-shrink: 0 !important;
    background: #1a1a1a !important;
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    max-height: 50vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

#crop-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    background: transparent !important;
}

#crop-overlay .crop-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#crop-overlay .crop-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#crop-overlay .crop-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .crop-btn.primary {
    background: #0a84ff !important;
}

#crop-overlay .crop-btn.primary:hover {
    background: #0070e0 !important;
}

#crop-overlay .crop-btn.exit {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

#crop-overlay .crop-btn.exit:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

#crop-zoom-controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
    justify-content: center !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-zoom-slider {
    width: 60px !important;
    accent-color: #0a84ff !important;
    margin: 0 !important;
    padding: 0 !important;
}

#crop-overlay .zoom-fine-btn {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    min-width: 24px !important;
    min-height: 24px !important;
    line-height: 1 !important;
}

#crop-overlay .zoom-fine-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

#crop-zoom-input {
    width: 50px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
    margin: 0 !important;
    margin-left: 4px !important;
    height: auto !important;
    min-height: auto !important;
}

#crop-zoom-input::-webkit-outer-spin-button,
#crop-zoom-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#crop-zoom-input:focus {
    outline: none !important;
    border-color: #0a84ff !important;
    background: rgba(10, 132, 255, 0.2) !important;
    box-shadow: none !important;
}

#crop-overlay .zoom-percent {
    color: #888 !important;
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Tab Navigation */
#crop-tabs {
    display: flex !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 4px !important;
    gap: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
}

#crop-overlay .crop-tab {
    flex: 1 !important;
    padding: 7px 12px !important;
    border: none !important;
    background: transparent !important;
    color: #aaa !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

#crop-overlay .crop-tab:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

#crop-overlay .crop-tab:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .crop-tab.active {
    background: #0a84ff !important;
    color: #fff !important;
}

/* Tab Content */
#crop-tab-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: transparent !important;
}

#crop-overlay .tab-panel {
    display: none !important;
}

#crop-overlay .tab-panel.active {
    display: block !important;
}

/* Column Layout for Tabs */
#crop-overlay .tab-columns {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Export Tab Two-Column Layout */
#crop-overlay .export-columns {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .export-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .export-column .section-label {
    margin-bottom: 4px !important;
}

/* SVG download button - matches select dropdown styling */
#crop-overlay #download-svg-btn,
#crop-overlay .export-select-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    min-width: 100px !important;
    transition: background 0.2s !important;
    margin: 0 !important;
    height: 34px !important;
    line-height: 1 !important;
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#crop-overlay .export-select-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#crop-overlay .tab-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .tab-column-grow {
    flex: 0 1 auto !important;
    min-width: 200px !important;
}

#crop-overlay .tab-section {
    margin-bottom: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .section-label {
    color: #888 !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: normal !important;
    line-height: 1 !important;
}

/* Controls Inline */
#crop-overlay .controls-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay #orientation-toggle,
#crop-overlay #print-orientation-toggle {
    display: flex !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .orientation-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#crop-overlay .orientation-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#crop-overlay .orientation-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .orientation-btn.active {
    border-color: #0a84ff !important;
    background: rgba(10, 132, 255, 0.2) !important;
}

#crop-overlay .orientation-btn svg {
    stroke: currentColor !important;
    fill: none !important;
}

#crop-overlay #alignment-controls,
#crop-overlay #print-alignment-controls,
#crop-overlay #export-alignment-controls {
    display: flex !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .align-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#crop-overlay .align-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

#crop-overlay .align-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .align-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
}

#crop-overlay .orientation-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Aspect Ratio Buttons */
#crop-overlay #aspect-ratio-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .aspect-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid transparent !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    border-radius: 15px !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#crop-overlay .aspect-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

#crop-overlay .aspect-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .aspect-btn.active {
    border-color: #0a84ff !important;
    background: rgba(10, 132, 255, 0.3) !important;
}

/* Aspect Ratio Wrapper - allows inline flow */
#crop-overlay #aspect-ratio-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay #aspect-ratio-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: center !important;
}

/* Compact Custom Inline Inputs - hidden by default until Custom button clicked */
#crop-overlay .custom-inline-inputs {
    display: none !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
}

/* Show custom inputs when Custom button is active */
#crop-overlay .custom-inline-inputs.visible {
    display: flex !important;
}

#crop-overlay .custom-inline-input {
    width: 55px !important;
    padding: 6px 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px !important;
    color: #fff !important;
    font-size: 12px !important;
    text-align: center !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

#crop-overlay .custom-inline-input:focus {
    outline: none !important;
    border-color: #0a84ff !important;
    box-shadow: none !important;
}

#crop-overlay .custom-input-label {
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .custom-inline-separator {
    color: #888 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    min-width: 10px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#crop-overlay .custom-mode-btn {
    padding: 6px 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#crop-overlay .custom-mode-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

#crop-overlay .custom-mode-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .custom-mode-btn.active {
    background: #0a84ff !important;
    border-color: #0a84ff !important;
    color: #fff !important;
}

#crop-overlay .custom-inline-apply {
    padding: 6px 10px !important;
    background: #0a84ff !important;
    border: none !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    transition: all 0.2s !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

#crop-overlay .custom-inline-apply:hover {
    background: #0070e0 !important;
}

#crop-overlay .custom-inline-apply:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Current Selection */
#crop-overlay #current-selection {
    color: #888 !important;
    font-size: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 10px !important;
    background: transparent !important;
}

#crop-overlay #current-selection span {
    color: #0a84ff !important;
    font-weight: bold !important;
}

/* Print Mode Toggle */
#crop-overlay #print-mode-toggle {
    display: flex !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 2px !important;
    gap: 2px !important;
    margin: 0 !important;
    height: 34px !important;
    align-items: center !important;
}

#crop-overlay .mode-btn {
    padding: 0 10px !important;
    border: none !important;
    background: transparent !important;
    color: #888 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    margin: 0 !important;
    min-width: auto !important;
    height: 28px !important;
    width: auto !important;
    line-height: 28px !important;
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#crop-overlay .mode-btn:hover {
    color: #fff !important;
}

#crop-overlay .mode-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#crop-overlay .mode-btn.active {
    background: #0a84ff !important;
    color: #fff !important;
}

/* Paper Align Row */
.paper-align-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Paper Size Row */
.paper-size-row {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

/* Custom Size Inputs */
#crop-overlay #print-custom-size-inputs,
#crop-overlay #custom-size-inputs {
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin-top: 6px !important;
    width: 100% !important;
    display: none;
}

#crop-overlay #print-custom-size-inputs[style*="block"],
#crop-overlay #custom-size-inputs[style*="block"] {
    display: block !important;
}

#crop-overlay .custom-size-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

#crop-overlay .custom-size-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: center !important;
}

#crop-overlay .custom-size-field label {
    font-size: 8px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#crop-overlay .custom-size-field input,
#crop-overlay .custom-size-field select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    width: 55px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

#crop-overlay .custom-size-field input::-webkit-outer-spin-button,
#crop-overlay .custom-size-field input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Specific ID targeting for custom width/height inputs to override theme styles */
#crop-overlay #print-custom-width,
#crop-overlay #print-custom-height,
#crop-overlay #custom-width,
#crop-overlay #custom-height,
#print-custom-width,
#print-custom-height,
#custom-width,
#custom-height {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    width: 55px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    min-height: 28px !important;
    max-height: 28px !important;
}

#crop-overlay #print-custom-unit,
#crop-overlay #custom-unit,
#print-custom-unit,
#custom-unit {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 0 !important;
    padding-right: 15px !important;
    margin: 0 !important;
    font-size: 12px !important;
    width: 75px !important;
    height: 28px !important;
    line-height: 28px !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    max-height: 28px !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
}

#crop-overlay .custom-size-field select {
    width: 75px !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    padding-right: 15px !important;
}

#crop-overlay .custom-size-x {
    color: #666 !important;
    font-size: 12px !important;
    padding-bottom: 4px !important;
}

#crop-overlay #apply-custom-size,
#crop-overlay #apply-print-custom-size {
    padding: 0 10px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 10px !important;
    margin-left: 2px !important;
}

.paper-align-row.fit-mode-active #print-alignment-controls {
    display: none;
}

/* Print Size Select */
#crop-overlay #print-size-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    margin: 0 !important;
    min-width: auto !important;
    max-width: 120px !important;
    height: 34px !important;
    line-height: 34px !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    /* Fix touch/focus issues on mobile */
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

#crop-overlay #print-size-select option {
    background: #222 !important;
    color: #fff !important;
    padding: 5px !important;
}

#crop-overlay #print-size-select optgroup {
    background: #333 !important;
    color: #aaa !important;
    font-weight: bold !important;
    font-style: normal !important;
}

/* Download Select */
#crop-overlay #crop-download-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    cursor: pointer !important;
    font-size: 11px !important;
    min-width: 140px !important;
    max-width: 200px !important;
    margin: 0 !important;
    height: 34px !important;
    line-height: 34px !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
}

#crop-overlay #crop-download-select option {
    background: #222 !important;
    color: #fff !important;
    padding: 5px !important;
}

#crop-overlay #crop-download-select optgroup {
    background: #333 !important;
    color: #aaa !important;
    font-weight: bold !important;
    font-style: normal !important;
}

#crop-overlay #crop-download-select option.dpi-excellent {
    color: #30d158 !important;
}

#crop-overlay #crop-download-select option.dpi-good {
    color: #ffd60a !important;
}

#crop-overlay #crop-download-select option.dpi-poor {
    color: #ff6b6b !important;
}

#crop-overlay #dpi-info {
    color: #888 !important;
    font-size: 10px !important;
    margin-top: 2px !important;
    text-align: center !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
}

#crop-overlay #dpi-info:empty {
    display: none !important;
    margin: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Mobile controls - override all base styles */
    #controls {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding: 8px 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        gap: 4px !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
        white-space: normal !important;
        z-index: 1000 !important;
    }

    /* Title - MUST be on its own row, centered, full width */
    #controls .title {
        font-size: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        width: 100% !important;
        display: block !important;
        flex: 0 0 100% !important;
        order: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Animation controls row (frame selector, animate, static) */
    #controls .animation-controls-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        order: 2 !important;
    }
    
    /* Animation controls - ensure EXACTLY same height */
    #controls .animate-select,
    #controls .mode-toggle-btn,
    #controls #frame-selector {
        font-size: 12px !important;
        padding: 0 10px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 6px !important;
        margin: 0 !important;
    }
    
    /* Static button specific - force exact same size as select */
    #controls .mode-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 28px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-weight: 500 !important;
    }
    
    /* Remove any extra space from spans inside the button */
    #controls .mode-toggle-btn span {
        display: inline !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
    }
    
    #controls .animate-select {
        min-width: 90px;
        -webkit-appearance: menulist !important;
        appearance: menulist !important;
    }
    
    #controls #frame-selector {
        max-width: 120px;
        -webkit-appearance: menulist !important;
        appearance: menulist !important;
    }
    
    /* Playback row */
    #controls .playback-row,
    #controls #playback-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        order: 3 !important;
    }
    
    /* Playback controls */
    #controls #playback-controls {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        flex-wrap: nowrap !important;
    }
    
    #controls .playback-btn {
        width: 30px !important;
        height: 30px !important;
        padding: 4px !important;
    }
    
    #controls .playback-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    #controls .play-pause-btn {
        width: 34px !important;
        height: 34px !important;
    }
    
    #controls .play-pause-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #controls #speed-select {
        font-size: 12px !important;
        padding: 5px 8px !important;
        height: 32px !important;
    }
    
    /* View controls row - all buttons in one row below title */
    #controls .view-controls,
    #controls .controls-row.view-controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        order: 4 !important;
        overflow: visible !important;
    }

    #controls .view-controls button {
        font-size: 20px !important;
        padding: 8px !important;
        min-width: 40px !important;
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #controls .view-controls .icon-btn {
        padding: 8px !important;
        min-width: 40px !important;
        height: 40px !important;
    }
    
    #controls .view-controls .icon-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Align menu on mobile - show it */
    #controls .view-controls .align-menu-container {
        display: inline-block !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Align menu dropdown on mobile - ensure it's above everything */
    #vfav-app .align-menu-dropdown,
    #controls .align-menu-dropdown {
        z-index: 99999 !important;
        position: absolute !important;
        bottom: 100% !important;
    }
    
    /* Frame indicator positioning for mobile - above the taller control bar */
    #vfav-app #frame-indicator,
    #frame-indicator {
        position: absolute !important;
        bottom: 175px !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        padding: 4px 10px !important;
        z-index: 45 !important;
    }

    #info-panel {
        width: 100%;
        max-width: 100%;
    }

    #crop-controls {
        max-height: 50vh;
    }

    /* Mobile crop top bar - make zoom controls smaller */
    #crop-top-bar {
        padding: 6px 8px;
        gap: 2px;
    }

    #crop-zoom-controls {
        max-width: 160px;
        gap: 2px;
    }

    #crop-zoom-slider {
        width: 50px;
    }

    #crop-zoom-input {
        width: 38px;
        padding: 2px 3px;
        font-size: 11px;
    }

    .zoom-fine-btn {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .zoom-percent {
        font-size: 10px;
    }

    /* Crop buttons - compact text-only style */
    #crop-overlay .crop-btn {
        padding: 4px 8px;
        font-size: 10px;
        gap: 0;
        border-radius: 6px;
    }

    /* Hide icons in EXIT and RESET buttons on mobile */
    #crop-overlay .crop-btn svg,
    #crop-overlay .crop-btn .btn-icon {
        display: none;
    }

    /* Crop tabs - reduced height */
    #crop-tabs {
        padding: 3px;
        gap: 3px;
    }

    .crop-tab {
        padding: 6px 8px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    /* Tab content - tighter spacing */
    #crop-tab-content {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    #crop-overlay .tab-section {
        margin-bottom: 6px;
    }

    #crop-overlay .section-label {
        font-size: 8px;
        margin-bottom: 3px;
        letter-spacing: 0.5px;
    }

    #crop-overlay .controls-inline {
        gap: 6px;
    }

    .aspect-btn {
        font-size: 10px;
        padding: 5px 10px;
    }

    #crop-overlay #aspect-ratio-list {
        gap: 4px;
    }

    .orientation-btn,
    .align-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    #crop-overlay .orientation-btn svg,
    #crop-overlay .align-btn svg {
        width: 16px;
        height: 16px;
    }

    #crop-overlay #orientation-toggle,
    #crop-overlay #alignment-controls,
    #crop-overlay #print-alignment-controls {
        gap: 4px;
    }

    /* PRINT tab - put MODE and PAPER SIZE on same row */
    #crop-overlay #tab-print .tab-columns {
        gap: 10px;
    }

    #crop-overlay #tab-print .tab-column {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    /* Hide MODE and PAPER SIZE labels on mobile to save space */
    #crop-overlay #tab-print .tab-column:nth-child(3) .section-label,
    #crop-overlay #tab-print .tab-column:nth-child(4) .section-label {
        display: none;
    }

    /* Make MODE and PAPER SIZE columns inline */
    #crop-overlay #tab-print .tab-column:nth-child(3),
    #crop-overlay #tab-print .tab-column:nth-child(4) {
        flex: 0 0 auto;
    }

    /* Compact mode buttons for mobile - keep consistent 30px height */
    #crop-overlay #print-mode-toggle {
        padding: 2px;
        gap: 1px;
        height: 30px;
    }

    #crop-overlay .mode-btn {
        padding: 0 6px;
        font-size: 9px;
        height: 24px;
        line-height: 24px;
    }

    /* Compact paper size select for mobile - keep consistent 30px height */
    #crop-overlay #print-size-select {
        padding: 0 6px;
        font-size: 10px;
        max-width: 110px;
        height: 30px;
        line-height: 30px;
    }

    /* Custom size inputs mobile adjustments */
    #crop-overlay .custom-size-field input,
    #crop-overlay .custom-size-field select {
        width: 48px !important;
        height: 26px !important;
        line-height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }

    /* Specific ID targeting for mobile */
    #crop-overlay #print-custom-width,
    #crop-overlay #print-custom-height,
    #print-custom-width,
    #print-custom-height {
        width: 48px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        line-height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }

    #crop-overlay #print-custom-unit,
    #print-custom-unit {
        width: 68px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        line-height: 26px !important;
        padding: 0 !important;
        padding-right: 12px !important;
        margin: 0 !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }

    #crop-overlay .custom-size-field select {
        width: 68px !important;
        padding-right: 12px !important;
    }

    #crop-overlay #apply-custom-size,
    #crop-overlay #apply-print-custom-size {
        height: 26px !important;
        line-height: 26px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    /* Export tab - fit both columns on same row on mobile */
    #crop-overlay .export-columns {
        gap: 10px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    #crop-overlay .export-column {
        min-width: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: 0 1 auto !important;
    }

    #crop-overlay .export-column .section-label {
        margin-bottom: 4px !important;
        font-size: 8px !important;
    }

    #crop-overlay #crop-download-select {
        min-width: 90px !important;
        max-width: 120px !important;
        font-size: 9px !important;
        padding: 0 4px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    #crop-overlay #download-svg-btn {
        min-width: auto !important;
        padding: 0 8px !important;
        font-size: 9px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    /* Export alignment buttons - match print alignment size on mobile */
    #crop-overlay #export-alignment-controls .align-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    #crop-overlay #export-alignment-controls .align-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Disable input focus effects on mobile to prevent zoom/UI issues */
    #crop-overlay input:focus,
    #crop-overlay select:focus,
    #crop-overlay button:focus {
        outline: none !important;
        box-shadow: none !important;
        transform: none !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Prevent iOS zoom on input focus - use touch-action instead of font-size override */
    #crop-overlay input[type="number"],
    #crop-overlay input[type="text"],
    #crop-overlay select {
        touch-action: manipulation !important;
        -webkit-text-size-adjust: 100% !important;
    }

    /* Prevent virtual keyboard from pushing layout on mobile */
    #crop-overlay {
        position: fixed !important;
    }

    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Smaller phones */
    #controls {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        gap: 6px;
    }
    
    #controls .title {
        font-size: 13px;
    }
    
    #controls .view-controls {
        gap: 6px !important;
    }
    
    #controls .view-controls button {
        font-size: 16px !important;
        padding: 5px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    #controls .view-controls .icon-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #controls #frame-selector {
        max-width: 100px;
        font-size: 11px !important;
        padding: 4px 6px !important;
        height: 30px !important;
    }
    
    #controls .animate-select {
        font-size: 11px !important;
        padding: 4px 8px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        min-width: 80px;
    }
    
    #controls .mode-toggle-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }
    
    /* Crop zoom controls */
    #crop-zoom-controls {
        max-width: 130px;
        gap: 2px;
    }

    #crop-zoom-slider {
        width: 40px;
    }

    .zoom-fine-btn {
        display: none;
    }

    #crop-zoom-input {
        width: 34px;
        padding: 2px 2px;
        font-size: 10px;
    }

    #crop-overlay .crop-btn {
        padding: 3px 6px;
        font-size: 9px;
    }

    #crop-top-bar {
        padding: 4px 6px;
        gap: 2px;
    }

    #crop-tabs {
        padding: 2px;
        gap: 2px;
    }

    .crop-tab {
        padding: 5px 6px;
        font-size: 9px;
    }

    #crop-tab-content {
        padding: 6px 8px;
    }

    #crop-overlay .tab-section {
        margin-bottom: 8px;
    }

    #crop-overlay .section-label {
        font-size: 8px;
        margin-bottom: 3px;
    }

    .aspect-btn {
        font-size: 9px;
        padding: 4px 8px;
    }

    #crop-overlay #aspect-ratio-list {
        gap: 3px;
    }

    .orientation-btn,
    .align-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    #crop-overlay .orientation-btn svg,
    #crop-overlay .align-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Export tab - force same row on small phones */
    #crop-overlay .export-columns {
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    #crop-overlay .export-column {
        min-width: auto !important;
        flex: 0 1 auto !important;
    }

    #crop-overlay #export-alignment-controls {
        gap: 2px !important;
    }

    #crop-overlay #export-alignment-controls .align-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    #crop-overlay #export-alignment-controls .align-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    #crop-overlay #crop-download-select {
        min-width: 80px !important;
        max-width: 110px !important;
        font-size: 8px !important;
        height: 28px !important;
        line-height: 28px !important;
    }

    #crop-overlay #download-svg-btn {
        height: 28px !important;
        line-height: 28px !important;
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    /* Custom size inputs for small phones */
    #crop-overlay .custom-size-field input,
    #crop-overlay .custom-size-field select {
        width: 42px !important;
        height: 24px !important;
        line-height: 24px !important;
        font-size: 10px !important;
    }

    /* Specific ID targeting for small phones */
    #crop-overlay #print-custom-width,
    #crop-overlay #print-custom-height,
    #print-custom-width,
    #print-custom-height {
        width: 42px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 10px !important;
        box-sizing: border-box !important;
    }

    #crop-overlay #print-custom-unit,
    #print-custom-unit {
        width: 60px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 24px !important;
        padding: 0 !important;
        padding-right: 10px !important;
        margin: 0 !important;
        font-size: 10px !important;
        box-sizing: border-box !important;
    }

    #crop-overlay .custom-size-field select {
        width: 60px !important;
    }

    #crop-overlay #apply-custom-size,
    #crop-overlay #apply-print-custom-size {
        height: 24px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }

    #crop-overlay .custom-size-row {
        gap: 4px !important;
    }

    #crop-overlay .custom-size-x {
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    /* Very small phones */
    #controls {
        padding: 6px 8px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        gap: 5px;
    }

    #controls .title {
        font-size: 12px;
    }
    
    #controls .view-controls {
        gap: 4px !important;
    }

    #controls .view-controls button {
        font-size: 14px !important;
        padding: 4px !important;
        min-width: 28px !important;
        height: 28px !important;
    }
    
    #controls .view-controls .icon-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    #controls #frame-selector,
    #controls .animate-select,
    #controls .mode-toggle-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
    }
    
    #controls #frame-selector {
        max-width: 90px;
    }
    
    #controls .animate-select {
        min-width: 70px;
    }

    /* Extra compact crop controls for very small phones */
    #crop-top-bar {
        padding: 3px 5px;
    }

    #crop-overlay .crop-btn {
        padding: 2px 5px;
        font-size: 8px;
    }

    #crop-zoom-controls {
        max-width: 110px;
    }

    #crop-zoom-input {
        width: 30px;
        font-size: 9px;
    }

    #crop-tabs {
        padding: 2px;
    }

    .crop-tab {
        padding: 4px 5px;
        font-size: 8px;
        letter-spacing: 0;
    }

    #crop-tab-content {
        padding: 5px 6px;
    }

    #crop-overlay .tab-section {
        margin-bottom: 6px;
    }

    #crop-overlay .section-label {
        font-size: 7px;
        margin-bottom: 2px;
    }

    .aspect-btn {
        font-size: 8px;
        padding: 3px 6px;
    }

    #crop-overlay #aspect-ratio-list {
        gap: 2px;
    }

    .orientation-btn,
    .align-btn {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }

    #crop-overlay .orientation-btn svg,
    #crop-overlay .align-btn svg {
        width: 12px;
        height: 12px;
    }

    #crop-overlay .controls-inline {
        gap: 6px;
    }
}

/* Mobile loading spinner animation */
@keyframes vfav-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Shortcode Wrapper Styles (v9.2.3)
   ========================================================================== */
.vfav-shortcode-wrapper {
    position: relative !important;
    overflow: hidden !important;
}

.vfav-shortcode-wrapper #vfav-app,
.vfav-shortcode-wrapper #viewer-container,
.vfav-shortcode-wrapper #frames-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.vfav-shortcode-wrapper #controls {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
}

.vfav-shortcode-wrapper #frame-indicator {
    position: absolute !important;
    bottom: 85px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 45 !important;
}

.vfav-shortcode-wrapper #info-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    z-index: 60 !important;
}

.vfav-shortcode-wrapper #loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100 !important;
}

.vfav-shortcode-wrapper #crop-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 500 !important;
}

.vfav-shortcode-wrapper #crop-canvas-container {
    flex: 1 !important;
    min-height: 0 !important;
}

.vfav-shortcode-wrapper #crop-controls {
    flex-shrink: 0 !important;
    max-height: 45% !important;
    overflow-y: auto !important;
}