/* --- 1. COLORS --- */
:root {
    --main-red: #3407a5;  
    --main-blue: #02008a;
    --highlight: #ff9900;
    --main-yellow: #00ff0d;
}

/* --- 2. LAYOUT & UI --- */
body {
    margin: 0; padding: 0;
    background: #222;
    font-family: 'Gotu', sans-serif;
    overflow: hidden; 
    height: 100vh; 
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    
    /* --- SECURITY: PREVENT SELECTION --- */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
}

/* SECURITY: HIDE ON PRINT */
@media print {
    html, body { display: none !important; height: 0 !important; overflow: hidden !important; }
}

/* ZOOM BAR */
.zoom-bar {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: white; padding: 10px 20px; border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 999;
    display: flex; gap: 15px; align-items: center;
}
.zoom-btn {
    background: #eee; border: none; width: 40px; height: 40px; 
    border-radius: 50%; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.zoom-btn:active { background: #ccc; }

/* Update these specific lines in your #workspace block */
#workspace {
    position: relative;
    flex: 1;
    overflow-y: auto; 
    overflow-x: auto; /* Change from hidden to auto to allow horizontal scrolling if needed */
    padding-top: 80px; 
    padding-bottom: 150px; 
    display: block; /* Change from flex to block for more stable mobile positioning */
    text-align: center;
}

/* Add this new rule to keep the card centered but prevent "half-view" clipping */
/* Locate this block in styles.css and replace it */
#card-capture-area {
    display: block; 
    vertical-align: top;
    text-align: left; 
    margin: 0 auto; 
    transform-origin: top center; /* Add this to keep scaling centered */
    width: 600px;  /* Ensure the base width is fixed */
    height: 950px; /* Ensure the base height is fixed */
    position: relative;
}


/* Ensure the background image is pinned correctly */
.bg-layer {
    width: 600px;
    height: 950px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.text-box {
    position: absolute; text-align: center;
    z-index: 10; min-height: 30px;
    display: block; white-space: pre-wrap; word-break: break-word;      
    border: 0px dashed rgba(30,0,80,0.30); cursor: text;
}
.text-box:hover, .text-box:focus {
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed blue; outline: none;
}

/* Fonts */
.font-rozha { font-family: 'Rozha One', serif; }
.font-gotu { font-family: 'Gotu', sans-serif; }

/* --- 4. DOWNLOAD BAR --- */
.bottom-bar {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: white; padding: 20px; text-align: center;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2); z-index: 999;
}
.btn-dl {
    background: var(--main-red); color: white; border: none;
    padding: 15px 40px; font-size: 18px; border-radius: 50px;
    font-weight: bold; cursor: pointer;
}
#logoInput { display: none; }

/* --- 5. STYLE TOOLBAR (Horizontal) --- */
.style-toolbar {
    position: fixed; bottom: 85px; left: 0; width: 100%;
    background: #ffffff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 15px;
    padding: 10px 15px;
    overflow-x: auto; /* Horizontal Scroll */
    z-index: 1000;
    visibility: hidden; transform: translateY(100%);
    transition: transform 0.3s ease;
}
.style-toolbar.active { transform: translateY(0); visibility: visible; }

/* Horizontal Group Item */
.tool-group-horiz {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-width: 60px;
    flex-shrink: 0; font-size: 12px; color: #555; font-weight: bold;
}

/* Buttons & Inputs */
.btn-icon {
    border: 1px solid #ddd; background: #f9f9f9; padding: 8px 12px;
    border-radius: 8px; font-weight: bold; cursor: pointer;
}
.circle-input {
    width: 35px; height: 35px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
}
.compact-select {
    width: 90px; padding: 5px; border-radius: 5px; border: 1px solid #ccc;
}
.style-btn {
    width: 30px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer;
}

/* The Value Button (Click to open Slider) */
.value-display-btn {
    background: #e3f2fd; color: #1565c0; border: 1px solid #1565c0;
    padding: 8px 15px; border-radius: 8px; font-weight: bold;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
}

/* --- VERTICAL SLIDER OVERLAY (Transparent/Glass) --- */
.slider-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dim background */
    z-index: 2000;
    display: flex; align-items: center; justify-content: center; /* Center on screen */
}

.slider-container {
    /* 1. Transparent Background (Glassy look) */
    background: rgba(255, 255, 255, 0.2); 
    
    /* 2. Blur the content behind it */
    backdrop-filter: blur(0px); 
    -webkit-backdrop-filter: blur(15px); /* For Safari */

    /* 3. Add a subtle border to define edges */
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* 4. Softer shadow */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);

    /* Layout & Shape (Keep these the same) */
    padding: 20px;
    border-radius: 50px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px;
    width: 100px;
}

.slider-label {
    font-weight: 900; color: #333; letter-spacing: 1px;
}

.big-vertical-slider {
    -webkit-appearance: slider-vertical; /* Vertical Orientation */
    width: 50px;
    height: 300px; /* VERY TALL for precision */
    cursor: pointer;
}

.slider-val-box {
    font-size: 24px; font-weight: bold; color: var(--main-red);
}

.btn-done {
    background: #000; color: white; border: none;
    padding: 8px 20px; border-radius: 20px; font-weight: bold; cursor: pointer;
}

.tool-group {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; font-family: sans-serif; font-size: 12px;
    font-weight: bold; color: #555;
}
input[type=range] { width: 100%; accent-color: var(--main-red); }
.close-tools {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ffcccc;
    color: red;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.style-toolbar::-webkit-scrollbar { height: 6px; }
.style-toolbar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.text-box.selected {
    border: 2px dashed #ff0000 !important;
    background: rgba(255, 255, 0, 0.1);
}
/* Inputs & Selects */
.val-input {
    width: 60px; 
    padding: 5px; 
    text-align: center; 
    border: 1px solid #ccc; 
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
}

/* Vertical Sliders */
input[type=range].vertical-slider {
    -webkit-appearance: slider-vertical; /* Chrome/Safari/Edge */
    width: 30px;
    height: 110px; /* Big vertical travel distance */
    margin: 5px 0;
    cursor: pointer;
}


/* MODALS */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 2000;
    display: none; align-items: center; justify-content: center;
}
.modal-content {
    background: white; padding: 0; border-radius: 10px;
    width: 95%; max-width: 450px; text-align: center;
    max-height: 95vh; overflow-y: auto; overflow-x: hidden;
    position: relative; display: flex; flex-direction: column;
}

/* PAYMENT STYLES */
.pay-header {
    background: var(--main-red); color: white;
    padding: 15px; font-size: 18px; font-weight: bold;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.pay-body { padding: 15px; }

.marathi-instruction {
    background: #fff8e1; border: 1px solid #ffe0b2;
    color: #d84315; padding: 10px; border-radius: 8px;
    font-size: 14px; margin-bottom: 15px; line-height: 1.6;
    text-align: center; font-weight: bold;
}

.payment-frame {
    width: 100%; height: 450px;
    border: 2px solid #eee; border-radius: 8px;
    background: #fafafa;
}

.loader {
    border: 4px solid #f3f3f3; border-top: 4px solid var(--main-red);
    border-radius: 50%; width: 30px; height: 30px;
    animation: spin 1s linear infinite; margin: 10px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* BLACKOUT OVERLAY FOR SECURITY */
#security-curtain {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: black; z-index: 99999; display: none;
    align-items: center; justify-content: center; color: white;
    font-size: 20px; font-weight: bold;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* History buttons inside zoom bar logic */
.history-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
.history-btn:hover { background: #f0f0f0; transform: scale(1.1); }
.history-btn:active { transform: scale(0.95); }
.history-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.history-btn span { font-size: 12px; font-weight: bold; margin-left: 5px; font-family: sans-serif; }

/* SMART GUIDES */
.guide-line {
    position: absolute;
    background-color: #ff00ff;
    z-index: 9999;
    pointer-events: none;
    display: none;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}
.guide-v { width: 1px; height: 100%; top: 0; }
.guide-h { height: 1px; width: 100%; left: 0; }

#fontInput {
    background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px;
    padding: 2px 5px; font-size: 13px; font-weight: bold;
    color: #333; outline: none; cursor: pointer;
}

select.big-select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #999;
}


/* =========================================
   MOBILE OPTIMIZATIONS (FIX STARTS HERE)
========================================= */

@media (max-width: 600px) {
    /* 1. Zoom Bar: More compact, hide text labels */
    .zoom-bar {
        top: 10px;
        padding: 5px 12px;
        gap: 10px;
    }
    .zoom-bar span, .history-btn span {
        display: none !important; /* Hide 'ZOOM', 'Undo', 'Redo' text */
    }
    .zoom-btn {
        width: 34px; height: 34px; font-size: 16px;
    }

    /* 2. Workspace: Adjust padding to maximize view */
    #workspace {
        padding-top: 65px;
        padding-bottom: 180px; /* Leave space for double-stacked bars */
    }


    .tool-group {
        flex-shrink: 0;
        gap: 2px;
    }
    .tool-group label {
        font-size: 10px;
    }
    input[type=range] {
        width: 60px; /* Smaller sliders */
    }
    #fontInput {
        width: 80px !important;
    }

    /* 4. Bottom Bar: Side-by-side buttons */
    .bottom-bar {
        padding: 10px;
        display: flex;
        gap: 8px;
    }
    .btn-dl {
        padding: 12px 10px;
        font-size: 14px;
        flex: 1; /* Split width 50/50 */
        margin: 0 !important;
        border-radius: 10px;
        white-space: nowrap;
    }
}


/* Ensure the workspace looks good in Fullscreen mode */
:fullscreen #workspace {
    background-color: #222; /* Keeps the dark background */
    display: flex;
    justify-content: center;
}

/* For Safari/iOS specific fullscreen */
:-webkit-full-screen #workspace {
    background-color: #222;
}

/* --- TEXT EDITOR MODAL --- */
.editor-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 3000;
    display: none; align-items: center; justify-content: center;
}

.editor-content {
    background: white; width: 90%; max-width: 400px;
    padding: 20px; border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.editor-content h3 { margin-top: 0; color: #333; }

#textEditorInput {
    width: 100%; padding: 10px; font-size: 16px;
    border: 1px solid #ccc; border-radius: 5px;
    margin-bottom: 15px; resize: none;
    font-family: 'Gotu', sans-serif; /* Use Marathi font in input too */
}

.editor-buttons { display: flex; gap: 10px; justify-content: flex-end; }

.btn-save {
    background: green; color: white; padding: 10px 20px;
    border: none; border-radius: 5px; font-weight: bold; cursor: pointer;
}
.btn-cancel {
    background: #ccc; color: #333; padding: 10px 20px;
    border: none; border-radius: 5px; font-weight: bold; cursor: pointer;
}

/* --- LOCKED ELEMENT STYLE
/* .text-box.locked {
/*   border: 2px solid red !important; /* Visual indicator */
    /* opacity: 0.8;
/* }--- */

.draggable.locked {
    cursor: not-allowed;
}

/* --- UPDATED TOOLBAR --- */
.toolbar-row {
    display: flex; gap: 10px; width: 100%;
    margin-bottom: 10px; align-items: center;
}
.scrollable-row {
    overflow-x: auto; padding-bottom: 5px;
}
.btn-tool-action {
    flex: 1; padding: 8px; border: 1px solid #ccc;
    border-radius: 5px; background: #f0f0f0; font-weight: bold;
    font-size: 13px; cursor: pointer;
}

/* =========================================
   HIDE ZOOM BUTTONS ON MOBILE (Pinch enabled)
========================================= */
@media (max-width: 600px) {
    /* Hide buttons that call the 'zoom()' function */
    .zoom-bar button[onclick*="zoom"] {
        display: none !important;
    }
    
    /* Hide the "ZOOM" text label */
    .zoom-bar span {
        display: none !important;
    }
    
    /* Adjust zoom bar layout to fit just Undo/Redo/Fullscreen */
    .zoom-bar {
        gap: 5px;
        padding: 5px 10px;
    }
}



/*  Font css start */


.google-sans-<uniquifier> {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}



.noto-sans-<uniquifier> {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.jaini-regular {
  font-family: "Jaini", system-ui;
  font-weight: 400;
  font-style: normal;
}

.mukta-extralight {
  font-family: "Mukta", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.mukta-light {
  font-family: "Mukta", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.mukta-regular {
  font-family: "Mukta", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.mukta-medium {
  font-family: "Mukta", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.mukta-semibold {
  font-family: "Mukta", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.mukta-bold {
  font-family: "Mukta", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.mukta-extrabold {
  font-family: "Mukta", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.kalam-light {
  font-family: "Kalam", cursive;
  font-weight: 300;
  font-style: normal;
}

.kalam-regular {
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
}

.kalam-bold {
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-style: normal;
}

.gajraj-one-regular {
  font-family: "Gajraj One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.martel-extralight {
  font-family: "Martel", serif;
  font-weight: 200;
  font-style: normal;
}

.martel-light {
  font-family: "Martel", serif;
  font-weight: 300;
  font-style: normal;
}

.martel-regular {
  font-family: "Martel", serif;
  font-weight: 400;
  font-style: normal;
}

.martel-semibold {
  font-family: "Martel", serif;
  font-weight: 600;
  font-style: normal;
}

.martel-bold {
  font-family: "Martel", serif;
  font-weight: 700;
  font-style: normal;
}

.martel-extrabold {
  font-family: "Martel", serif;
  font-weight: 800;
  font-style: normal;
}

.martel-black {
  font-family: "Martel", serif;
  font-weight: 900;
  font-style: normal;
}



.noto-sans-devanagari-<uniquifier> {
  font-family: "Noto Sans Devanagari", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.yantramanav-thin {
  font-family: "Yantramanav", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.yantramanav-light {
  font-family: "Yantramanav", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.yantramanav-regular {
  font-family: "Yantramanav", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.yantramanav-medium {
  font-family: "Yantramanav", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.yantramanav-bold {
  font-family: "Yantramanav", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.yantramanav-black {
  font-family: "Yantramanav", sans-serif;
  font-weight: 900;
  font-style: normal;
}


.eczar-<uniquifier> {
  font-family: "Eczar", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.baloo-2-<uniquifier> {
  font-family: "Baloo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.amita-regular {
  font-family: "Amita", serif;
  font-weight: 400;
  font-style: normal;
}

.amita-bold {
  font-family: "Amita", serif;
  font-weight: 700;
  font-style: normal;
}

.jaini-purva-regular {
  font-family: "Jaini Purva", system-ui;
  font-weight: 400;
  font-style: normal;
}

.martel-sans-extralight {
  font-family: "Martel Sans", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.martel-sans-light {
  font-family: "Martel Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.martel-sans-regular {
  font-family: "Martel Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.martel-sans-semibold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.martel-sans-bold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.martel-sans-extrabold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.martel-sans-black {
  font-family: "Martel Sans", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.yatra-one-regular {
  font-family: "Yatra One", system-ui;
  font-weight: 400;
  font-style: normal;
}

.laila-light {
  font-family: "Laila", serif;
  font-weight: 300;
  font-style: normal;
}

.laila-regular {
  font-family: "Laila", serif;
  font-weight: 400;
  font-style: normal;
}

.laila-medium {
  font-family: "Laila", serif;
  font-weight: 500;
  font-style: normal;
}

.laila-semibold {
  font-family: "Laila", serif;
  font-weight: 600;
  font-style: normal;
}

.laila-bold {
  font-family: "Laila", serif;
  font-weight: 700;
  font-style: normal;
}

.rozha-one-regular {
  font-family: "Rozha One", serif;
  font-weight: 400;
  font-style: normal;
}


.noto-serif-devanagari-<uniquifier> {
  font-family: "Noto Serif Devanagari", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.gotu-regular {
  font-family: "Gotu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.inknut-antiqua-light {
  font-family: "Inknut Antiqua", serif;
  font-weight: 300;
  font-style: normal;
}

.inknut-antiqua-regular {
  font-family: "Inknut Antiqua", serif;
  font-weight: 400;
  font-style: normal;
}

.inknut-antiqua-medium {
  font-family: "Inknut Antiqua", serif;
  font-weight: 500;
  font-style: normal;
}

.inknut-antiqua-semibold {
  font-family: "Inknut Antiqua", serif;
  font-weight: 600;
  font-style: normal;
}

.inknut-antiqua-bold {
  font-family: "Inknut Antiqua", serif;
  font-weight: 700;
  font-style: normal;
}

.inknut-antiqua-extrabold {
  font-family: "Inknut Antiqua", serif;
  font-weight: 800;
  font-style: normal;
}

.inknut-antiqua-black {
  font-family: "Inknut Antiqua", serif;
  font-weight: 900;
  font-style: normal;
}

.modak-regular {
  font-family: "Modak", system-ui;
  font-weight: 400;
  font-style: normal;
}

.sarpanch-regular {
  font-family: "Sarpanch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sarpanch-medium {
  font-family: "Sarpanch", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sarpanch-semibold {
  font-family: "Sarpanch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.sarpanch-bold {
  font-family: "Sarpanch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sarpanch-extrabold {
  font-family: "Sarpanch", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.sarpanch-black {
  font-family: "Sarpanch", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.tiro-devanagari-hindi-regular {
  font-family: "Tiro Devanagari Hindi", serif;
  font-weight: 400;
  font-style: normal;
}

.tiro-devanagari-hindi-regular-italic {
  font-family: "Tiro Devanagari Hindi", serif;
  font-weight: 400;
  font-style: italic;
}
.arya-regular {
  font-family: "Arya", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.arya-bold {
  font-family: "Arya", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.playpen-sans-deva-<uniquifier> {
  font-family: "Playpen Sans Deva", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.tiro-devanagari-marathi-regular {
  font-family: "Tiro Devanagari Marathi", serif;
  font-weight: 400;
  font-style: normal;
}

.tiro-devanagari-marathi-regular-italic {
  font-family: "Tiro Devanagari Marathi", serif;
  font-weight: 400;
  font-style: italic;
}

/*  Font css end */


/* =========================================
   FULL SCREEN FONT SELECTION PAGE (MODAL)
   ========================================= */

/* The Full Screen Container */
.font-selection-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Light clean background */
    z-index: 200000; /* Highest priority (Above everything) */
    display: flex;
    flex-direction: column;
    transform: translateY(100%); /* Hidden (Pushed down) */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth Slide Up */
}

/* When Active */
.font-selection-page.active {
    transform: translateY(0); /* Slide into view */
}

/* 1. Header Section */
.fp-header {
    background: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 10;
}

.fp-title {
    font-size: 18px;
    font-weight: 800;
    color: #333;
}

.btn-fp-close {
    background: #f0f0f0;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.btn-fp-close:hover { background: #e0e0e0; }

/* 2. Preview Header (Optional: Shows the original text at top) */
.fp-preview-bar {
    background: #fff3e0;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: #e65100;
    font-weight: bold;
    border-bottom: 1px solid #ffe0b2;
}

/* 3. The Grid List */
.fp-body {
    flex: 1;
    overflow-y: auto; /* Scrollable */
    padding: 20px;
    display: grid;
    /* Mobile: 1 Column, Tablet: 2, PC: 3+ */
    grid-template-columns: 1fr; 
    gap: 15px;
}

@media (min-width: 600px) {
    .fp-body { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .fp-body { grid-template-columns: repeat(3, 1fr); }
}

/* 4. Font Card Design */
.fp-font-card {
    background: #ffffff;
    border: 2px solid #eee;
    border-radius: 12px;
   /* padding: 20px; */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

/* The Text inside the card */
.fp-font-preview {
    font-size: 15px;
    color: #222;
    line-height: 1.4;
    word-break: break-word;
}

/* The Font Name (Small label) */
.fp-font-name {
    margin-top: 8px;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    font-family: sans-serif; /* Keep name readable */
}

/* Interaction States */
.fp-font-card:active { transform: scale(0.98); }

/* Selected State */
.fp-font-card.selected {
    border-color: #3407a5;
    background-color: #f3effd;
    box-shadow: 0 5px 15px rgba(52, 7, 165, 0.2);
}
.fp-font-card.selected .fp-font-preview { color: #3407a5; }