/* =====================================================
   KHURAIJAM PHOTO PRINT STUDIO
   SEPARATE PRINT SETTINGS MODULE
===================================================== */

.ps-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .72);
    padding: 18px;
    box-sizing: border-box;
}

.ps-overlay.open { display: flex; }

.ps-window {
    width: min(1080px, 96vw);
    height: min(760px, 94vh);
    background: #f4f4f5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    color: #202124;
    font-family: Arial, Helvetica, sans-serif;
}

.ps-titlebar {
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #2f3033;
    color: #fff;
}

.ps-titlebar strong { font-size: 15px; font-weight: 600; }
.ps-close {
    width: 32px; height: 30px; border: 0; border-radius: 5px;
    background: transparent; color: #fff; font-size: 20px; cursor: pointer;
}
.ps-close:hover { background: #4a4b50; }

.ps-body {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 315px;
}

.ps-preview {
    min-width: 0;
    min-height: 0;
    background: #686868;
    display: flex;
    flex-direction: column;
}

.ps-preview-head {
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #eee;
    font-size: 12px;
    background: #555;
}

.ps-preview-stage {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.ps-paper {
    position: relative;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    flex: 0 0 auto;
    overflow: hidden;
}

.ps-photo {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
}
.ps-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ps-photo-number {
    position: absolute; left: 3px; top: 3px; z-index: 2;
    font: 10px Arial, sans-serif; color: #fff; background: rgba(0,0,0,.65);
    padding: 2px 4px; border-radius: 3px;
}

.ps-controls {
    min-height: 0;
    overflow: auto;
    background: #ededee;
    border-left: 1px solid #c8c8c8;
    padding: 14px;
}

.ps-section {
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid #ccc;
}
.ps-section:last-child { border-bottom: 0; }
.ps-section-title {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.ps-row { display: grid; grid-template-columns: 1fr 78px; gap: 8px; align-items: center; margin: 7px 0; }
.ps-row label { font-size: 12px; }
.ps-input {
    width: 100%; box-sizing: border-box; height: 31px; padding: 4px 7px;
    border: 1px solid #aaa; border-radius: 4px; background: #fff; font-size: 12px;
}
.ps-input:disabled { opacity: .5; background: #e5e5e5; }
.ps-unit { font-size: 11px; color: #666; margin-left: 4px; }
.ps-inline { display: flex; align-items: center; gap: 7px; margin: 8px 0; font-size: 12px; }
.ps-inline input { margin: 0; }

.ps-scale-row { display: grid; grid-template-columns: 1fr 78px 22px; gap: 7px; align-items: center; }
.ps-scale-row .ps-input { text-align: right; }
.ps-lock { border: 0; background: transparent; cursor: pointer; font-size: 16px; padding: 0; }
.ps-lock.off { opacity: .35; }

.ps-info {
    font-size: 11px; line-height: 1.5; color: #666;
    background: #e2e2e3; border-radius: 5px; padding: 8px;
}

.ps-footer {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 14px;
    background: #dedee0;
    border-top: 1px solid #c5c5c5;
}
.ps-btn {
    min-width: 82px; height: 32px; border: 1px solid #999; border-radius: 5px;
    padding: 0 15px; font-size: 12px; cursor: pointer;
}
.ps-btn.cancel { background: #f5f5f5; }
.ps-btn.print { background: #2674d9; color: #fff; border-color: #1c5faf; font-weight: 600; }
.ps-btn:hover { filter: brightness(.96); }

@media (max-width: 800px) {
    .ps-window { height: 96vh; }
    .ps-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .ps-controls { max-height: 43vh; border-left: 0; border-top: 1px solid #c8c8c8; }
}

@media print {
    .ps-overlay { display: none !important; }
}