/* Common styles shared across VidShare pages */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base typography and colors */
html {
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0a0a0a;
    color: #ffffff;
    overflow-x: hidden;
    /* Respect notched-device safe areas everywhere */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Universal mobile tap target floor — links and buttons should be at least
   44px tall so they're comfortably tappable on touch devices. */
@media (max-width: 768px) {
    button, a.btn, a.nav-link, a.upload-cta, .vc-btn, .watch-lnk, .del-btn {
        min-height: 44px;
    }
    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS auto-zoom on focus — !important needed to override inline styles */
    }
}

/* Common button styles */
.btn {
    background: #007AFF;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn:hover {
    background: #0056CC;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    background: #3A3A3C;
    color: #EBEBF54D;
    cursor: not-allowed;
    transform: none;
}

/* Common form styles */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 17px;
    color: #ffffff;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 16px;
    background: #2C2C2E;
    border: 1px solid #38383A;
    border-radius: 8px;
    color: #ffffff;
    font-size: 17px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #007AFF;
    background: #3A3A3C;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-group input::placeholder {
    color: #EBEBF599;
}

/* Responsive design helpers */
@media (max-width: 768px) {
    .btn {
        width: 100%;
        justify-content: center;
    }
}

.source-badge {
    display: inline-block;
    vertical-align: middle;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.75);
    color: #fff;
    margin-left: 6px;
    flex-shrink: 0;
}
.source-badge.youtube { background: #ff0000; }
.source-badge.vimeo { background: #1ab7ea; }
.source-badge.upload { background: rgba(78,205,196,0.9); }
.source-badge.dailymotion { background: #0d0d6e; }
.source-badge.loom { background: #625df5; }
.source-badge.wistia { background: #54bbff; }

.hidden { display: none; }

.nav-links { display: flex; align-items: center; gap: 8px; }

.code-form-actions {
    display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}

.page-title-clickable { cursor: pointer; }

.admin-accent-controls {
    display: flex; align-items: center; gap: 8px; margin-right: 12px;
}
.admin-accent-label {
    color: white; font-size: 14px; font-weight: 500;
}
.admin-accent-color-input {
    width: 40px; height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px; cursor: pointer;
}
.admin-accent-color-text {
    width: 80px; padding: 6px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px; color: white; font-size: 12px;
}

.admin-coming-soon-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: 12px;
    color: white;
    font-size: 13px;
}
.admin-coming-soon-controls input[type="file"] {
    max-width: 190px;
    color: white;
    font-size: 12px;
}
.admin-reset-image-btn {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 12px;
}
.admin-reset-image-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.admin-image-status {
    min-width: 100px;
    color: rgba(255, 255, 255, 0.8);
}

.video-placeholder-state {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    color: #666;
}
.video-placeholder-inner { text-align: center; }
.video-loading-title { font-size: 18px; margin-bottom: 12px; }
.video-loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid #333;
    border-top: 3px solid var(--accent-color, #008f67);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
.video-error-state {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    color: #ff6b6b;
}
.video-error-title { font-size: 18px; margin-bottom: 12px; }
.video-error-sub { font-size: 14px; opacity: 0.8; }
.video-error-sub-margin { font-size: 14px; opacity: 0.8; margin-bottom: 16px; }
.video-error-btn {
    margin-top: 16px; padding: 8px 16px;
    background: var(--accent-color, #008f67);
    color: white; border: none; border-radius: 4px; cursor: pointer;
}
.video-retry-btn {
    margin-right: 8px; padding: 8px 16px;
    background: var(--accent-color, #008f67);
    color: white; border: none; border-radius: 4px; cursor: pointer;
}
.video-close-btn {
    padding: 8px 16px;
    background: #666; color: white;
    border: none; border-radius: 4px; cursor: pointer;
}
.wistia-embed-full {
    height: 100%; width: 100%;
}
.thumb-img-cover {
    width: 100%; height: 100%; object-fit: cover;
    position: relative; z-index: 1; background: #2a2a2a;
}

.oz-dialog-panel {
    background: #1a1a1a; padding: 32px; border-radius: 12px;
    border: 1px solid #333; max-width: 400px;
}
.oz-dialog-panel-wide {
    background: #1a1a1a; padding: 32px; border-radius: 12px;
    border: 1px solid #333; max-width: 500px; width: 90%;
}
.oz-dialog-panel-center {
    background: #1a1a1a; padding: 32px; border-radius: 12px;
    border: 1px solid #333; max-width: 400px; text-align: center;
}
.oz-dialog-title {
    color: white; margin: 0 0 16px 0;
}
.oz-dialog-title-lg {
    color: white; margin: 0 0 16px 0; font-size: 20px;
}
.oz-dialog-title-featured {
    color: white; margin: 0 0 20px 0;
}
.oz-dialog-text {
    color: #aaa; margin: 0 0 16px 0;
}
.oz-dialog-text-lg {
    color: #aaa; margin: 0 0 24px 0; font-size: 16px;
}
.oz-dialog-select {
    width: 100%; padding: 8px;
    background: #2a2a2a; border: 1px solid #444;
    border-radius: 4px; color: white; margin-bottom: 20px;
}
.oz-dialog-actions {
    display: flex; gap: 12px;
}
.oz-dialog-actions-center {
    display: flex; gap: 12px; justify-content: center;
}
.oz-btn-danger {
    flex: 1; padding: 8px 16px;
    background: #ff3b30; color: white;
    border: none; border-radius: 6px; cursor: pointer;
}
.oz-btn-danger-lg {
    padding: 12px 24px;
    background: #ff3b30; color: white;
    border: none; border-radius: 8px;
    font-size: 16px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}
.oz-btn-cancel {
    flex: 1; padding: 8px 16px;
    background: #333; color: white;
    border: none; border-radius: 6px; cursor: pointer;
}
.oz-btn-cancel-lg {
    padding: 12px 24px;
    background: #333; color: white;
    border: none; border-radius: 8px;
    font-size: 16px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}

.oz-icon-picker-title {
    margin: 0 0 15px 0; color: var(--accent-color);
}
.oz-icon-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: 15px;
}
.oz-icon-option {
    padding: 10px; background: #333;
    border: 2px solid transparent;
    border-radius: 8px; color: white; cursor: pointer;
}
.oz-icon-option.selected {
    border-color: var(--accent-color);
}
.oz-icon-option-lg { font-size: 18px; }
.oz-icon-picker-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}
.oz-icon-picker-btn-cancel {
    padding: 8px 16px; background: #666;
    border: none; border-radius: 6px;
    color: white; cursor: pointer;
}
.oz-icon-picker-btn-save {
    padding: 8px 16px; background: var(--accent-color);
    border: none; border-radius: 6px;
    color: white; cursor: pointer;
}

.oz-featured-section { margin-bottom: 20px; }
.oz-featured-label {
    display: flex; align-items: center; gap: 8px;
    color: white; margin-bottom: 12px; cursor: pointer;
}
.oz-featured-label-last {
    display: flex; align-items: center; gap: 8px;
    color: white; cursor: pointer;
}
.oz-featured-field { margin-bottom: 20px; }
.oz-featured-field-label {
    color: white; display: block; margin-bottom: 8px;
}
.oz-featured-input {
    width: 100%; padding: 8px;
    background: #2a2a2a; border: 1px solid #444;
    border-radius: 4px; color: white; box-sizing: border-box;
}
.oz-featured-actions { display: flex; gap: 12px; }
.oz-featured-btn-confirm {
    flex: 1; padding: 12px 20px;
    background: #ff9500; color: white;
    border: none; border-radius: 6px; cursor: pointer;
}
.oz-featured-btn-clear {
    flex: 1; padding: 12px 20px;
    background: #666; color: white;
    border: none; border-radius: 6px; cursor: pointer;
}
.oz-featured-btn-cancel {
    flex: 1; padding: 12px 20px;
    background: #333; color: white;
    border: none; border-radius: 6px; cursor: pointer;
}

.error-state-container {
    text-align: center; padding: 60px 20px;
    color: #ccc; grid-column: 1 / -1;
}
.error-state-icon { margin-bottom: 16px; }
.error-state-headline {
    color: #fff; font-size: 20px; font-weight: 600;
    margin: 0 0 8px 0;
}
.error-state-subtitle {
    color: #aaa; font-size: 15px;
    margin: 0 0 24px 0; max-width: 400px;
    margin-left: auto; margin-right: auto;
}
.error-state-btn {
    padding: 10px 24px;
    background: var(--accent-color, #008f67);
    color: white; border: none; border-radius: 6px;
    cursor: pointer; font-size: 15px; font-weight: 500;
    transition: opacity 0.2s;
}

.readonly-input { background: #333; color: #aaa; }
.form-section-heading {
    color: #ffffff; margin: 20px 0 15px 0; font-size: 16px;
}
.settings-color-row {
    display: flex; gap: 10px; align-items: center;
}
.settings-color-picker {
    width: 60px; height: 40px; padding: 4px; cursor: pointer;
}
.settings-textarea {
    width: 100%; padding: 12px 16px;
    background: #2a2a2a; border: 1px solid #444;
    border-radius: 8px; color: #ffffff; font-size: 16px;
    box-sizing: border-box; resize: vertical;
}

.pw-sub-block { display: block; }
.embed-fallback-hidden { display: none; }

.featured-img-cover {
    width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
}
.featured-img-error {
    display: none; flex-direction: column; align-items: center;
    justify-content: center; height: 100%;
}
.featured-img-error-sub {
    font-size: 12px; margin-top: 8px; opacity: 0.7;
}
.tag-item-row {
    display: flex; gap: 8px; align-items: center; flex: 1;
}
.tag-name-flex-input {
    flex: 1;
}
.thumbnail-placeholder-state {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #2a2a2a; color: #666; font-size: 14px;
}
.embed-iframe-full {
    width: 100%; height: 100%;
}
.video-full {
    width: 100%; height: 100%;
}
.empty-grid-state {
    text-align: center; padding: 40px; color: #666;
}
.empty-grid-link {
    color: var(--accent-color); text-decoration: none;
    margin-top: 12px; display: inline-block;
}
.embed-iframe-abs {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
}
.upload-error-msg {
    text-align: center; color: #959595; padding: 40px 0;
}
.video-load-error {
    padding: 20px; text-align: center; color: #ff6666;
}

@keyframes spin { to { transform: rotate(360deg); } }

:focus-visible {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

.form-group input:focus-visible,
.form-group select:focus-visible {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}