@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&display=swap');
/*==================================
    Cloud Photocard Generator Dashboard
==================================*/
.cpg-dashboard{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
}
.cpg-dashboard .cpg-welcome-section{
    display: inline-block;
    width: 98%;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    margin: 15px 0;
    border-radius: 3px;
    box-shadow: 0 0 3px #ccc;
}
.cpg-dashboard .cpg-welcome-section h2{}
.cpg-dashboard .cpg-welcome-section p.text{}
.cpg-dashboard .cpg-welcome-section .cpg-custom-box{
margin-top: 20px; border: 1px solid #ddd; padding: 20px; background: #f9f9f9; border-radius: 6px;
}


.cpg-dashboard .cpg-choose-style-section{
    display: inline-block;
    width: 98%;
    clear: both;
    float: left;
    background: #fff;
    margin: 15px 0;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0 0 3px #ccc;
    border-radius: 3px;
}
.cpg-dashboard .cpg-choose-style-section h2{}
.cpg-dashboard .cpg-choose-style-section .cpgcs-grid{
    display: grid;
    grid-template-columns: 250px 250px 250px 250px 250px;
    gap: 25px;
}
.cpg-dashboard .cpg-choose-style-section .cpgcs-grid .photocard-design-item{
    width: 100%;
    overflow: hidden;
    background: #f9f9f9;
    box-shadow: 0 0 3px #ccc;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item .pdi-thumbnail{
    width: 100%;
    height: 250px;
    float: left;
    position: relative;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item .pdi-thumbnail a{
    display: block;
    width: 100%;
    height: 100%;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item .pdi-thumbnail a.edit-style-url{
    position: absolute;
    top: 5px;
    left: 5px;
    width: 50px;
    height: 30px;
    background: #f7f7f7f0;
    text-align: center;
    line-height: 1;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    border-radius: 3px;
    transition: .5s;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item .pdi-thumbnail a.edit-style-url:hover{
    background: #2296f3;
    color: #fff;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item .pdi-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item h3{
    width: 100%;
    text-align: center;
    margin: 10px 0;
    float: left;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item h3 a{
    text-decoration: none;
}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item h3 a:hover{}
.cpg-dashboard .cpg-choose-style-section .photocard-design-item a.add-new-style{
    display: flex;
    height: 100%;
    width: 250px;
    min-height: 250px;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}


/*==================================
    Generate Photocard & Save
==================================*/
.photocard-generator-section{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
}
.photocard-generator-section h1{
    font-size: 1.4rem;
    border-bottom: 1px solid #e1e1e1;
    line-height: 1.5;
    background: #fff;
    padding: 5px;
    color: #990918;
}
.photocard-generator-section .new-card-generator{
    display: grid;
    width: 100%;
    gap: 35px;
    grid-template-columns: 380px auto;
}
.photocard-generator-section .new-card-generator .new-card-generator-form{
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 0 3px #ddd;
}
.photocard-generator-section .new-card-generator .new-card-generator-form .generate-new-snapped{
    width: 100%;
    padding: 10px;
    background: #1E88E5;
    border: none;
    color: #fff;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: .5s;
}
.photocard-generator-section .new-card-generator .new-card-generator-form .generate-new-snapped:hover{
    background: #02877a;
}
.photocard-generator-section .new-card-generator .new-card-generator-form .generate-new-snapped:active{
    background: #000;
}
.photocard-generator-section .new-card-generator-form .form-row{
    display: inline-block;
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.photocard-generator-section .new-card-generator-form .form-row label{
    font-size: 1rem;
    font-weight: bold;
    color: #555;
    float: left;
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.photocard-generator-section .new-card-generator-form .form-row select{
    width: 100%;
    padding: 5px 10px;
    font-size: .9rem;
    font-weight: 500;
    background: #f8f8f8;
    cursor: pointer;
    transition: .5s;
}
.photocard-generator-section .new-card-generator-form .form-row select:hover{background: #fcfeff;color: #2296f3;border-color: #2296f3;}
.photocard-generator-section .new-card-generator-form .form-row select:focus{outline: 1px solid #2296f3;background: #fcfeff;}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector{
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-align: center;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector .photo-selector{
    display: block;
    width: 100%;
    text-align: center;
    padding: 25px;
    margin: 5px 0;
    background: #f8f8f8;
    box-sizing: border-box;
    border: 2px dashed #ccc;
    cursor: pointer;
    transition: .5s;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector span{
    width: 35px;
    height: 35px;
    font-size: 30px;
    color: #8b8b8b;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-selector-preview{
    width: 100%;
    display: none;
    float: left;
    max-width: 100%;
    gap: 25px;
    grid-template-columns: 50% auto;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-selector-preview img{width: 100%;}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action{display: inline-block;width: 100%;clear: both;float: left;}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action ul{
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action ul li{
    margin: 0;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action ul li h4{
    margin: 0;
    text-align: left;
    font-size: 0.80rem;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action ul li input[type="number"]{
    margin-top: 5px;
    float: left;
    width: 95%;
    background: #f9f9f9;
    text-align: left;
    color: #222;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action ul li button.overly-edit-done{
    background: #009688;
    border: none;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    width: 100%;
    padding: 8px;
    border-radius: 5px;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action label.change-photo-label{
    padding: 3px 1px;
    border: none;
    font-size: 0.85rem;
    line-height: 1;
    color: #e90000;
    cursor: pointer;
    transition: .5s;
    width: 100%;
    float: left;
    background: transparent;
    text-decoration: underline;
    text-align: left;
}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action label.change-photo-label.reposition{color:#9C27B0;}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action label.change-photo-label:hover{color: #2196F3;}
.photocard-generator-section .new-card-generator-form .form-row .photo-upload-selector-action label.change-photo-label:active{background: #000;}
/*======= Title Section add =====*/
.photocard-generator-section .new-card-generator-form .title-input{}
.photocard-generator-section .new-card-generator-form .title-input h4{
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    color: #555;
    float: left;
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.photocard-generator-section .new-card-generator-form .title-input .multiple-title-line{display: flex;flex-direction: column;gap: 15px;float: left;}
.photocard-generator-section .new-card-generator-form .title-input .inputtitle-grid{background: #fff;padding: 10px;box-sizing: border-box;border-radius: 3px;border: 1px solid #e8e8e8;display: flex;width: 100%;gap: 5px;flex-direction: row;}
.photocard-generator-section .new-card-generator-form .title-input input[type="text"]{width: 60%;padding: 10px;font-size: 0.90rem;line-height: 1;background: #f8f8f8;transition: .5s;border: 1px solid #ccc;}
.photocard-generator-section .new-card-generator-form .title-input input[type="text"]:focus{background: #fff;}
.photocard-generator-section .new-card-generator-form .title-input .edit-title{
    display: grid;
    width: 40%;
    clear: both;
    grid-template-columns: 60% auto;
    gap: 10px;
    align-items: center;
}
.photocard-generator-section .new-card-generator-form .title-input .edit-title .font-size{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
}
.photocard-generator-section .new-card-generator-form .title-input .edit-title label{
    font-size: 0.80rem;
    font-weight: 500;
}
.photocard-generator-section .new-card-generator-form .title-input .edit-title .font-size input[type="number"]{
    width: 50px;
    padding: 6px;
    background: #f8f8f8;
    font-weight: 600;
    border: 1px solid #ccc;
    transition: .5s;
}
.photocard-generator-section .new-card-generator-form .title-input .edit-title .font-size input[type="number"]:focus{
    background: #fff;
}
.photocard-generator-section .new-card-generator-form .title-input .edit-title .title-color{
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    float: left;
    align-items: center;
}
.photocard-generator-section .new-card-generator-form .title-input .edit-title .title-color input[type="color"]{
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 1;
    border: none;
}


/*===== Preview Data ====*/
.photocard-generator-section .new-card-generator-preview{width: 100%;}
.photocard-generator-section .new-card-generator-preview .ncgp-box{width: min-content;position: relative;overflow: hidden;padding: 30px;border-radius: 5px;background: #fff;box-shadow: 0 0 3px #ccc;}
.photocard-generator-section .new-card-generator-preview .ncgp-grid{display: inline-block;width: 100%;float: left;}
.photocard-generator-section .new-card-generator-preview  .ncgp-snapping{width:520px;height:520px;position:relative;overflow: hidden;}
.photocard-generator-section .new-card-generator-preview .ncgp-box .ncgp-box-overly{width: 520px;height: 520px;overflow: hidden;margin: 0 auto;background: #fff;position: absolute;}
.photocard-generator-section .new-card-generator-preview .ncgp-box .ncgp-data{position: absolute;font-size: 1.5rem;z-index: 3;color: #000;font-family: "Noto Serif Bengali", serif;white-space: nowrap;font-weight: 900;}
.photocard-generator-section .new-card-generator-preview .ncgp-box .ncgp-data-img{width: 100px;cursor: grab;z-index: 5;left: 214px;top: 131px;display:none;opacity: 0.7;}
.photocard-generator-section .new-card-generator-preview .ncgp-box .ncgp-data-img img{width: 100%;height: auto;}
.photocard-generator-section .new-card-generator-preview  .ncgp-download-snap{width: 520px;overflow: hidden;position: relative;border: 1px solid #ccc;display: none;}
.photocard-generator-section .new-card-generator-preview  .ncgp-download-snap img{width: 100%;height: auto;float: left;}
.photocard-generator-section .new-card-generator-preview  .ncgp-download-snap .ncgp-download-button{display: flex;margin: 15px 0;text-align: center;width: 100%;align-items: center;justify-content: center;float: left;gap: 15px;}
.photocard-generator-section .new-card-generator-preview  .ncgp-download-snap button.ncgp-download{padding: 10px 15px;background: linear-gradient(0deg, #1976D2, #2196F3);border: none;color: #fff;border-radius: 5px;cursor: pointer;transition: .5s;}
.photocard-generator-section .new-card-generator-preview  .ncgp-download-snap button.ncgp-download:hover{background: linear-gradient(180deg, #1976D2, #2196F3);}
.photocard-generator-section .new-card-generator-preview  .ncgp-download-snap button.ncgp-download:active{background: #000;}

.ncgp-loader{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffffffe3;
    z-index: 99;
    display:none;
}
.ncgp-loader .loading{border: 16px solid #cfeaff;border-radius: 50%;border-top: 16px solid #1797ed;width: 80px;height: 80px;-webkit-animation: rotateSpin 2s linear infinite; /* Safari */animation: rotateSpin 2s linear infinite;position: absolute;left: 40%;top: 40%;}
@-webkit-keyframes rotateSpin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotateSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Base Container --- */
.generated-photocard-section {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 30px;
}

.generated-photocard-section h1 {
    font-size: 1.5rem;
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 0;
    line-height: 1;
}

/* --- List Grid (Responsive) --- */
.cpg-list-grid {
    display: grid;
    /* Default: 1 column on mobile */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Tablet and Desktop Layouts */
@media (min-width: 640px) {
    .cpg-list-grid {
        /* Medium screens: 3 columns */
        grid-template-columns: repeat(3, 1fr); 
    }
}
@media (min-width: 1024px) {
    .cpg-list-grid {
        /* Large screens: 4 or 5 columns (adjust as needed for 20 total items) */
        grid-template-columns: repeat(8, 1fr);
    }
}

/* --- List Item Box --- */
.cpg-list-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cpg-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

.cpg-list-item .box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- Thumbnail --- */
.cpg-list-item .thumbnail {
    width: 100%;
    /* Maintain a specific aspect ratio for the photocard preview */
     /* 2:3 aspect ratio (typical photocard) */
    position: relative;
    overflow: hidden;
}

.cpg-list-item .thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    float: left;
}

/* --- Metadata --- */
.cpg-list-item .meta-data {
    padding: 10px 15px;
    flex-grow: 1;
}

.cpg-list-item .meta-data h3 {
    font-size: 1rem;
    margin: 0 0 5px 0;
    line-height: 1.3;
    color: #1a1a1a;
}

.cpg-list-item .meta-data .cpg-date {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
}

/* --- Download Button --- */
.cpg-list-item .download-button {
    padding: 15px;
    border-top: 1px solid #eee;
}

.cpg-list-item .download-button a {
    display: block;
    text-align: center;
    padding: 8px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.cpg-list-item .download-button a:hover {
    background-color: #45a049;
}

.cpg-list-item .download-button a .dashicons {
    line-height: 1.5; /* Align icon vertically */
    margin-right: 5px;
}

/* --- Pagination Styles --- */
.cpg-list-navigation {
    text-align: center;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

/* Targeting the list generated by paginate_links */
.cpg-list-navigation .page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cpg-list-navigation li {
    display: inline;
}

.cpg-list-navigation .page-numbers a,
.cpg-list-navigation .page-numbers span {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    background: #fff;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.cpg-list-navigation .page-numbers a:hover {
    background: #f0f0f0;
    border-color: #aaa;
}

.cpg-list-navigation .current {
    background: #0073aa; /* WordPress primary color */
    color: white;
    border-color: #0073aa;
    font-weight: bold;
}