/* =========================================
   1. ROOT VARIABLES & BASE DIMENSIONS
   ========================================= */
:root {
    --card-width-portrait: 54mm;
    --card-height-portrait: 86mm;
    --card-width-landscape: 86mm;
    --card-height-landscape: 54mm;
}

/* Base Wrapper & Accurate Measurement Cut-Lines */
.id-card-wrapper {
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Accurate physical measurement outer border */
    border: 1px solid #000; 
    box-sizing: border-box; /* CRITICAL: Keeps exact 54x86mm physical size */
}

/* Apply border-box sizing globally within the card */
.id-card-wrapper *, .id-card-wrapper *::before, .id-card-wrapper *::after {
    box-sizing: border-box;
}

.id-card-portrait { width: var(--card-width-portrait); height: var(--card-height-portrait); }
.id-card-landscape { width: var(--card-width-landscape); height: var(--card-height-landscape); }

/* Global Layering */
.card-content { 
    position: relative; 
    z-index: 2; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}


/* =========================================
   2. THEME 1: MODERN WAVE
   ========================================= */
.bg-shape-arch {
    background: linear-gradient(135deg, #0b5ed7 0%, #0dcaf0 100%);
    border-radius: 0 0 50% 50% / 0 0 25% 25%; 
    position: absolute; top: 0; left: 0; width: 100%; height: 38mm; z-index: 1;
}

.photo-container {
    width: 26mm; height: 26mm; margin-top: 10mm; margin-bottom: 2mm;
    border-radius: 50%; border: 3px solid #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden; background: #fff; flex-shrink: 0;
}
.photo-container img { width: 100%; height: 100%; object-fit: cover; }

.bg-shape-wave {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
    position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: 1;
}

.photo-landscape {
    width: 22mm; height: 26mm; border-radius: 5px; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    overflow: hidden; position: relative; z-index: 2; margin-top: 10mm; margin-left: 5mm;
}
.photo-landscape img { width: 100%; height: 100%; object-fit: cover; }


/* =========================================
   3. THEME 2: CORPORATE PREMIUM
   ========================================= */
.bg-corporate-top { background: #1e293b; position: absolute; top: 0; left: 0; width: 100%; height: 28mm; z-index: 1; border-bottom: 3px solid #d4af37; }
.bg-corporate-side { background: #1e293b; position: absolute; top: 0; left: 0; width: 25mm; height: 100%; z-index: 1; border-right: 3px solid #d4af37; }
.photo-corporate { width: 24mm; height: 24mm; border-radius: 4px; border: 2px solid #d4af37; object-fit: cover; background: #fff; z-index: 2; position: relative; }


/* =========================================
   4. THEME 3: TECH POLYGON
   ========================================= */
.bg-tech-poly { background: linear-gradient(135deg, #6f42c1 0%, #0d6efd 100%); clip-path: polygon(0 0, 100% 0, 100% 20mm, 0 35mm); position: absolute; top: 0; left: 0; width: 100%; height: 40mm; z-index: 1; }
.bg-tech-poly-side { background: linear-gradient(135deg, #6f42c1 0%, #0d6efd 100%); clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); position: absolute; top: 0; left: 0; width: 45mm; height: 100%; z-index: 1; }
.photo-tech { width: 26mm; height: 26mm; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.2); object-fit: cover; background: #fff; z-index: 2; position: relative; }


/* =========================================
   5. THEME 4: UNIVERSITY COLORFUL ARCS
   ========================================= */
.bg-uni-gradient-upper {
    background: linear-gradient(135deg, #002147 0%, #0056b3 100%);
    clip-path: ellipse(100% 55% at 50% 45%);
    position: absolute; top: 0; left: 0; width: 100%; height: 40mm; z-index: 1;
}

.bg-uni-gradient-lower {
    background: linear-gradient(135deg, #a01a31 0%, #dc3545 100%);
    clip-path: ellipse(100% 55% at 50% 55%);
    position: absolute; bottom: 0; left: 0; width: 100%; height: 15mm; z-index: 1;
}

.bg-uni-side-arc {
    background: linear-gradient(180deg, #002147 0%, #0056b3 100%);
    clip-path: ellipse(75% 100% at 25% 50%);
    position: absolute; top: 0; left: 0; width: 45mm; height: 100%; z-index: 1;
}

.uni-border { border: 2px solid #002147; height: 100%; padding: 1mm; width: 100%; }


/* =========================================
   6. THEME 5: CREATIVE AGENCY
   ========================================= */
.bg-creative-angle { background: #ffc107; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); position: absolute; top: 0; left: 0; width: 100%; height: 35mm; z-index: 1; }
.bg-creative-angle-side { background: #ffc107; clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); position: absolute; top: 0; left: 0; width: 40mm; height: 100%; z-index: 1; }
.photo-creative { width: 26mm; height: 26mm; border: 4px solid #212529; border-radius: 5px; transform: rotate(-3deg); object-fit: cover; z-index: 2; position: relative; background: #fff; }


/* =========================================
   7. PRINT RULES
   ========================================= */
@media print {
    body { background: #fff !important; }
    .no-print { display: none !important; }
    
    .id-card-wrapper {
        position: absolute; left: 0; top: 0; box-shadow: none !important;
        margin: 0 !important;
        border: 1px solid #000 !important; 
        box-sizing: border-box !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}