/* Main stylesheet - imports all base and component styles */

@import './base/reset.css';
@import './base/variables.css';
@import './components/tabs.css';
@import './components/background.css';
@import './components/crop.css';
@import './components/stickers.css';
@import './components/preview.css';
@import './components/text-overrides.css';
@import './components/support-modal.css';

/* Hide scrollbar for all browsers */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Upload slot drag and drop styles */
.upload-slot {
    cursor: move;
    transition: all 0.3s ease;
}

.upload-slot:hover {
    border-color: #5D5CDE;
    box-shadow: 0 2px 8px rgba(93, 92, 222, 0.2);
}

.upload-slot.drag-over {
    border-color: #5D5CDE;
    background-color: rgba(93, 92, 222, 0.1);
    transform: scale(1.05);
}

.upload-slots-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--upload-cols-sm, 1), minmax(0, 1fr));
}

@media (min-width: 768px) {
    .upload-slots-grid {
        grid-template-columns: repeat(var(--upload-cols-md, 2), minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .upload-slots-grid {
        grid-template-columns: repeat(var(--upload-cols-lg, 4), minmax(0, 1fr));
    }
}

/* Font preview styles for select options */
.font-select option[value="Arial"] { font-family: Arial; }
.font-select option[value="Helvetica"] { font-family: Helvetica; }
.font-select option[value="Times New Roman"] { font-family: "Times New Roman"; }
.font-select option[value="Georgia"] { font-family: Georgia; }
.font-select option[value="Verdana"] { font-family: Verdana; }
.font-select option[value="Comic Sans MS"] { font-family: "Comic Sans MS"; }
.font-select option[value="Impact"] { font-family: Impact; }
.font-select option[value="Trebuchet MS"] { font-family: "Trebuchet MS"; }
.font-select option[value="Brush Script MT"] { font-family: "Brush Script MT"; }
.font-select option[value="Lucida Handwriting"] { font-family: "Lucida Handwriting"; }
.font-select option[value="Papyrus"] { font-family: Papyrus; }
.font-select option[value="Party Let"] { font-family: "Party Let"; }
.font-select option[value="Kristen ITC"] { font-family: "Kristen ITC"; }
.font-select option[value="Curlz MT"] { font-family: "Curlz MT"; }
.font-select option[value="Jokerman"] { font-family: Jokerman; }
.font-select option[value="Showcard Gothic"] { font-family: "Showcard Gothic"; }
.font-select option[value="Stencil"] { font-family: Stencil; }

/* Chinese Artistic Fonts */
.font-select option[value="SimHei"] { font-family: SimHei, "黑体", sans-serif; }
.font-select option[value="SimSun"] { font-family: SimSun, "宋体", serif; }
.font-select option[value="KaiTi"] { font-family: KaiTi, "楷体", serif; }
.font-select option[value="FangSong"] { font-family: FangSong, "仿宋", serif; }
.font-select option[value="Microsoft YaHei"] { font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
.font-select option[value="STHeiti"] { font-family: STHeiti, "华文黑体", sans-serif; }
.font-select option[value="STKaiti"] { font-family: STKaiti, "华文楷体", serif; }
.font-select option[value="STSong"] { font-family: STSong, "华文宋体", serif; }
.font-select option[value="LiSu"] { font-family: LiSu, "隶书", serif; }
.font-select option[value="YouYuan"] { font-family: YouYuan, "幼圆", sans-serif; }
.font-select option[value="STFangsong"] { font-family: STFangsong, "华文仿宋", serif; }
.font-select option[value="STXihei"] { font-family: STXihei, "华文细黑", sans-serif; }
.font-select option[value="STXingkai"] { font-family: STXingkai, "华文行楷", cursive; }
.font-select option[value="STLiti"] { font-family: STLiti, "华文隶书", serif; }
.font-select option[value="STXinwei"] { font-family: STXinwei, "华文新魏", serif; }
.font-select option[value="STCaiyun"] { font-family: STCaiyun, "华文彩云", fantasy; }
.font-select option[value="STHupo"] { font-family: STHupo, "华文琥珀", serif; }
.font-select option[value="DFKai-SB"] { font-family: "DFKai-SB", "標楷體", serif; }
.font-select option[value="BiauKai"] { font-family: BiauKai, "新細明體", serif; }
.font-select option[value="MingLiU"] { font-family: MingLiU, "細明體", serif; }
.font-select option[value="DLCMingMedium"] { font-family: DLCMingMedium, "華康明體", serif; }
.font-select option[value="HanWangMingMedium"] { font-family: HanWangMingMedium, "漢王中明體", serif; }

.thumbnail-shell {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.thumbnail-frame {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

/* Additional Western Artistic Fonts */
.font-select option[value="Chalkduster"] { font-family: Chalkduster, fantasy; }
.font-select option[value="Marker Felt"] { font-family: "Marker Felt", fantasy; }
.font-select option[value="Bradley Hand"] { font-family: "Bradley Hand", cursive; }
.font-select option[value="Snell Roundhand"] { font-family: "Snell Roundhand", cursive; }
.font-select option[value="Noteworthy"] { font-family: Noteworthy, fantasy; }