/* Conflict Popup - appears at 3D cube position with countdown timer */
.conflict-popup {
    position: fixed;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    min-width: 48px;
    padding: 8px 12px;
    border-radius: 24px;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(244, 67, 54, 0.5), 0 0 0 4px rgba(244, 67, 54, 0.2);
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.conflict-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: pulse-conflict 1.5s ease-in-out infinite;
}

.conflict-popup .conflict-icon {
    font-size: 20px;
    line-height: 1;
}

.conflict-popup .conflict-timer {
    font-size: 12px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    line-height: 1;
}

@keyframes pulse-conflict {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(244, 67, 54, 0.5), 0 0 0 4px rgba(244, 67, 54, 0.2);
    }

    50% {
        box-shadow: 0 4px 25px rgba(244, 67, 54, 0.7), 0 0 0 8px rgba(244, 67, 54, 0.1);
    }
}

/* ===========================
   King Celebration Modal
   =========================== */

.celebration-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.celebration-overlay:not(.active) {
    display: none;
}

.celebration-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebration-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border: 2px solid #FFD700;
    border-radius: 20px;
    padding: 40px 50px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3),
        0 0 100px rgba(255, 215, 0, 0.1);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebration-content.animate {
    transform: scale(1);
    opacity: 1;
}

.celebration-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: celebrate-rotate 4s linear infinite;
}

@keyframes celebrate-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.celebration-trophy {
    font-size: 80px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    animation: trophy-bounce 1s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

@keyframes trophy-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.celebration-title {
    font-size: 28px;
    font-weight: bold;
    color: #FFD700;
    margin: 0 0 10px 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
}

.celebration-subtitle {
    font-size: 18px;
    color: #fff;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
    opacity: 0.9;
}

.celebration-price {
    font-size: 36px;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.twitter-btn {
    background: #000;
    color: #fff;
}

.twitter-btn:hover {
    background: #333;
    transform: scale(1.05);
}

.copy-link-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.copy-link-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: scale(1.05);
}

.celebration-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}

.celebration-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .celebration-content {
        padding: 30px 25px;
    }

    .celebration-trophy {
        font-size: 60px;
    }

    .celebration-title {
        font-size: 22px;
    }

    .celebration-subtitle {
        font-size: 14px;
    }

    .celebration-price {
        font-size: 28px;
    }

    .share-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .celebration-content::before {
        animation: none;
    }

    .celebration-trophy {
        animation: none;
    }

    .celebration-content {
        transition: opacity 0.2s;
        transform: scale(1);
    }

    .btc-network-panel {
        animation: none;
    }
}

/* (Old payment-method-selector and btc-network-panel styles removed - see Footer v3 section) */

/* ===========================================
   Bitcoin Network Selection Modal
   =========================================== */

.btc-network-modal h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #333;
}

.btc-network-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btc-network-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btc-network-option:hover {
    border-color: #ccc;
    background: #fafafa;
}

.btc-network-option.is-disabled,
.btc-network-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
    background: #f7f7f7;
}

.btc-network-option.is-disabled:hover,
.btc-network-option:has(input:disabled):hover {
    border-color: #e0e0e0;
    background: #f7f7f7;
}

.btc-network-option:has(input:checked) {
    border-color: #f7931a;
    background: rgba(247, 147, 26, 0.05);
}

.btc-network-option input[type="radio"] {
    margin-top: 4px;
    accent-color: #f7931a;
    width: 18px;
    height: 18px;
}

.btc-network-option .option-content {
    flex: 1;
}

.btc-network-option .option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.btc-network-option .option-header i.fa-bolt {
    color: #f7931a;
    font-size: 18px;
}

.btc-network-option .option-header .btc-icon {
    color: #f7931a;
    font-size: 18px;
    font-weight: bold;
}

.btc-network-option .option-desc {
    font-size: 13px;
    color: #888;
}

/* (Old payment mobile responsive removed) */

/* ===========================================
   Bitcoin Payment Modal
   =========================================== */

.btc-payment-modal h3 {
    margin: 0 0 20px 0;
    color: #333;
}

.btc-payment-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.btc-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.btc-payment-row:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.btc-payment-row .label {
    color: #666;
    font-size: 13px;
}

.btc-payment-row .value {
    color: #333;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btc-payment-row .value i.fa-bolt {
    color: #f7931a;
}

.btc-payment-qr {
    background: white;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 20px;
    margin: 0 auto 16px;
    max-width: 200px;
}

.btc-payment-qr .qr-placeholder {
    width: 160px;
    height: 160px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    border-radius: 8px;
}

.btc-payment-invoice-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.btc-payment-invoice {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #666;
    word-break: break-all;
    text-align: left;
    max-height: 40px;
    overflow: hidden;
}

.copy-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.btc-payment-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #f7931a;
    font-size: 14px;
    padding: 12px;
    background: rgba(247, 147, 26, 0.1);
    border-radius: 8px;
}

.btc-payment-status i {
    font-size: 18px;
}

.btc-payment-status-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.btc-payment-status-text strong {
    font-size: 15px;
    font-weight: 700;
}

.btc-payment-status-text small {
    color: #5f8f63;
    font-size: 12px;
    font-weight: 500;
}

.btc-payment-status.success {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.btc-payment-status.error {
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

/* ===========================================
   Lightning Fallback Modal
   =========================================== */

.lightning-fallback-modal .fallback-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.lightning-fallback-modal h3 {
    margin: 0 0 12px 0;
    color: #333;
}

.lightning-fallback-modal p {
    color: #666;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.fallback-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
}

.fallback-option {
    padding: 16px 20px;
    border-radius: 12px;
    text-align: center;
    min-width: 100px;
}

.fallback-option.lightning {
    background: #f5f5f5;
    border: 2px solid #ddd;
}

.fallback-option.lightning.disabled {
    opacity: 0.6;
}

.fallback-option.onchain {
    background: rgba(247, 147, 26, 0.1);
    border: 2px solid #f7931a;
}

.fallback-option .option-header {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fallback-option .option-header i.fa-bolt {
    color: #999;
}

.fallback-option.onchain .option-header .btc-icon {
    color: #f7931a;
}

.fallback-option .option-status {
    font-size: 12px;
    color: #999;
}

.fallback-option.onchain .option-status {
    color: #4caf50;
}

.fallback-arrow {
    font-size: 24px;
    color: #ccc;
}

/* ===========================
   Edit Cube Dialog
   =========================== */
#edit-cube-dialog .dialog-content {
    text-align: left;
}

#edit-cube-dialog h3 {
    text-align: center;
}

#edit-cube-dialog .hint {
    text-align: center;
}

#edit-cube-dialog .dialog-buttons {
    text-align: center;
}

.edit-section {
    margin-bottom: 15px;
}

.edit-face-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.edit-face-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: border-color 0.2s, background-color 0.2s;
}

.edit-face-item:hover {
    background-color: #f5f5f5;
}

.edit-face-item.uploading {
    opacity: 0.6;
    pointer-events: none;
}

.face-label {
    font-size: 11px;
    font-weight: bold;
    color: #666;
}

.face-preview {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #e0e0e0;
    background-size: cover;
    background-position: center;
    border: 1px solid #ccc;
}

.face-preview.empty {
    background-color: #f0f0f0;
}

.face-clear-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #ff5252;
    color: white;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.face-clear-btn:hover {
    background: #ff1744;
}

.face-preview.empty + .face-clear-btn {
    visibility: hidden;
}

#edit-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
}

#edit-palette .palette-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s, border-color 0.1s;
}

#edit-palette .palette-swatch:hover {
    transform: scale(1.1);
}

#edit-palette .palette-swatch.active {
    border-color: #333;
}

/* Inventory Item Actions */
.item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.item-actions .edit-btn,
.item-actions .locate-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.item-actions .edit-btn {
    background: #e3f2fd;
    color: #1976d2;
}

.item-actions .edit-btn:hover {
    background: #bbdefb;
}

.item-actions .locate-btn {
    background: #e8f5e9;
    color: #388e3c;
}

.item-actions .locate-btn:hover {
    background: #c8e6c9;
}

/* Texture Preview */
.texture-preview {
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
}

.texture-preview.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 10px;
}

/* Width utilities */
.u-w-full { width: 100%; }
.u-w-300 { width: 300px; }
.u-w-320 { width: 320px; }
.u-w-340 { width: 340px; }
.u-w-350 { width: 350px; }
.u-w-360 { width: 360px; }
.u-w-380 { width: 380px; }
.u-w-400 { width: 400px; }
.u-w-560 { width: 560px; }

/* Text alignment */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }

/* Margins */
.u-mt-0 { margin-top: 0; }
.u-mt-15 { margin-top: 15px; }
.u-mt-20 { margin-top: 20px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-15 { margin-bottom: 15px; }

/* Padding */
.u-p-20 { padding: 20px; }

/* Font sizes */
.u-text-9 { font-size: 9px; }
.u-text-11 { font-size: 11px; }
.u-text-12 { font-size: 12px; }

/* Colors */
.u-text-red { color: red; }
.u-text-666 { color: #666; }
.u-text-999 { color: #999; }

/* Dividers/Separators */
.u-divider-v {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 4px;
}

/* Button variations */
.btn-delete {
    background-color: #d32f2f;
}
.btn-x-login {
    background-color: #000;
    color: #fff;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* (Old footer-content-layout removed) */

/* Modal action buttons */
.modal-actions-end {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.modal-actions-center {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Legal links section */
.legal-links {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #666;
}
.legal-links-separator {
    margin: 0 8px;
}

/* Conflict dialog */
.conflict-header {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.conflict-icon {
    font-size: 24px;
}
.conflict-count-text {
    font-weight: bold;
    font-size: 14px;
}

/* Edit section label */
.edit-section-label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

/* Card payment return */
.payment-return-modal {
    position: fixed;
    z-index: 2600;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(5px);
}

.payment-return-dialog {
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    box-sizing: border-box;
    padding: 28px;
    border-radius: 16px;
    color: #1f2937;
}

.payment-return-dialog h2 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.3;
    outline: none;
}

.payment-return-message {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.65;
}

.payment-return-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 34px;
    font-weight: 700;
}

.payment-return-dialog[data-state="checking"] .payment-return-icon,
.payment-return-dialog[data-state="timeout"] .payment-return-icon {
    animation: payment-return-pulse 1.2s ease-in-out infinite;
}

.payment-return-dialog[data-state="completed"] .payment-return-icon {
    background: #dcfce7;
    color: #15803d;
}

.payment-return-dialog[data-state="failed"] .payment-return-icon,
.payment-return-dialog[data-state="auth-unavailable"] .payment-return-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.payment-return-details {
    display: grid;
    gap: 8px;
    margin: 22px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f8fafc;
    text-align: left;
}

.payment-return-details[hidden] {
    display: none;
}

.payment-return-details div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.payment-return-details dt {
    color: #64748b;
    font-size: 13px;
}

.payment-return-details dd {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.payment-return-support {
    margin-top: 20px;
    padding: 14px;
    border-radius: 10px;
    background: #fff7ed;
    color: #7c2d12;
    text-align: left;
    font-size: 13px;
    line-height: 1.55;
}

.payment-return-support p {
    margin: 0 0 8px;
}

.payment-return-support p:last-child {
    margin-bottom: 0;
}

.payment-return-support code {
    overflow-wrap: anywhere;
}

.payment-return-contact a {
    color: #1d4ed8;
}

.payment-return-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.payment-return-actions .auth-btn {
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
}

.payment-return-primary {
    background: #2563eb;
}

.payment-return-primary:hover {
    background: #1d4ed8;
}

@keyframes payment-return-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.94); opacity: 0.72; }
}

@media (max-width: 480px) {
    .payment-return-dialog {
        padding: 24px 18px;
    }

    .payment-return-actions,
    .payment-return-actions .auth-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payment-return-dialog[data-state] .payment-return-icon {
        animation: none;
    }
}