/* ==========================================================
   PRINTQLY CSS FRAMEWORK v2.0
   FILE : style.css
   PART : 1 (Core Foundation)
========================================================== */

/* ==========================================================
   GOOGLE FONT
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root{

--primary:#FFD400;
--primary-dark:#F4C400;

--secondary:#111111;
--background:#050505;
--surface:#121212;
--surface-light:#1B1B1B;

--white:#FFFFFF;
--black:#000000;

--text:#F8F8F8;
--text-light:#BFBFBF;
--text-muted:#8A8A8A;

--success:#22C55E;
--danger:#EF4444;
--warning:#F59E0B;
--info:#0EA5E9;

--border:#2B2B2B;

--shadow-sm:0 4px 10px rgba(0,0,0,.15);
--shadow:0 12px 30px rgba(0,0,0,.25);
--shadow-lg:0 20px 50px rgba(0,0,0,.35);

--radius-sm:10px;
--radius:18px;
--radius-lg:26px;

--container:1280px;

--transition:.30s ease;

}

/* ==========================================================
   RESET
========================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ==========================================================
   HTML
========================================================== */

html{

scroll-behavior:smooth;

font-size:16px;

}

/* ==========================================================
   BODY
========================================================== */

body{

font-family:'Poppins',sans-serif;

background:var(--background);

color:var(--text);

font-size:16px;

line-height:1.7;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,h2,h3,h4,h5,h6{

font-weight:700;

line-height:1.25;

margin-bottom:15px;

color:var(--white);

}

h1{

font-size:64px;

}

h2{

font-size:46px;

}

h3{

font-size:30px;

}

h4{

font-size:24px;

}

h5{

font-size:20px;

}

h6{

font-size:18px;

}

p{

margin-bottom:18px;

color:var(--text-light);

}

/* ==========================================================
   LINKS
========================================================== */

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

a:hover{

color:var(--primary);

}

/* ==========================================================
   IMAGES
========================================================== */

img{

display:block;

max-width:100%;

height:auto;

}

/* ==========================================================
   LISTS
========================================================== */

ul,
ol{

list-style:none;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

width:100%;

max-width:var(--container);

margin:0 auto;

padding-left:20px;

padding-right:20px;

}

/* ==========================================================
   SECTION
========================================================== */

section{

padding:30px 0;

position:relative;

}

/* ==========================================================
   COMMON TITLES
========================================================== */

.section-title{

font-size:48px;

font-weight:800;

margin-bottom:18px;

text-align:center;

}

.section-subtitle{

max-width:760px;

margin:0 auto 60px;

text-align:center;

font-size:18px;

color:var(--text-light);

}

/* ==========================================================
   BACKGROUND HELPERS
========================================================== */

.bg-dark{

background:#0D0D0D;

}

.bg-light{

background:#171717;

}

.bg-primary{

background:var(--primary);

color:#000;

}

/* ==========================================================
   SPACING
========================================================== */

.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.pt-60{padding-top:60px;}
.pb-60{padding-bottom:60px;}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

background:var(--primary);

color:#000;

}

/* ==========================================================
   PRINTQLY CSS FRAMEWORK v2.0
   FILE : style.css
   PART : 2 (Header & Navigation)
========================================================== */

/* ==========================================================
   HEADER
========================================================== */

.header{

position:fixed;

top:0;

left:0;

width:100%;

height:82px;

background:rgba(10,10,10,.96);

backdrop-filter:blur(12px);

border-bottom:1px solid var(--border);

z-index:9999;

transition:var(--transition);

}

.header.scrolled{

height:74px;

box-shadow:var(--shadow);

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

display:flex;

align-items:center;

flex-shrink:0;

}

.logo img{

height:66px;

width:auto;

display:block;

transition:var(--transition);

}

.header.scrolled .logo img{

height:58px;

}

/* ==========================================================
   DESKTOP MENU
========================================================== */

.nav-menu{

display:flex;

align-items:center;

gap:32px;

margin-left:auto;

}

.nav-menu li{

list-style:none;

}

.nav-menu a{

display:flex;

align-items:center;

height:82px;

font-size:15px;

font-weight:600;

color:var(--white);

position:relative;

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:18px;

width:0;

height:3px;

background:var(--primary);

border-radius:10px;

transition:var(--transition);

}

.nav-menu a:hover{

color:var(--primary);

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

width:100%;

}

.nav-menu a.active{

color:var(--primary);

}

/* ==========================================================
   RIGHT SIDE
========================================================== */

.nav-right{

display:flex;

align-items:center;

gap:15px;

margin-left:35px;

}

/* ==========================================================
   HEADER BUTTONS
========================================================== */

.nav-right .btn{

height:46px;

padding:0 22px;

font-size:15px;

border-radius:12px;

}

/* ==========================================================
   MOBILE MENU ICON
========================================================== */

.mobile-menu{
    width:32px;
    height:32px;
    border-radius:8px;
    font-size:12px;
}

.mobile-menu:hover{

background:var(--primary);

color:#000;

}

/* ==========================================================
   PAGE OFFSET
========================================================== */

body{

padding-top:82px;

}

/* ==========================================================
   PRINTQLY CSS FRAMEWORK v2.0
   FILE : style.css
   PART : 3 (Mobile Navigation & Dropdowns)
========================================================== */

/* ==========================================================
   MOBILE OVERLAY
========================================================== */

.menu-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

backdrop-filter:blur(3px);

opacity:0;

visibility:hidden;

transition:var(--transition);

z-index:9997;

}

.menu-overlay.active{

opacity:1;

visibility:visible;

}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

.mobile-nav{
    position:fixed;
    top:0;
    left:-220px;
    width:200px;
    height:100vh;
    background:#111;
    overflow-y:auto;
    transition:left .30s ease;
    z-index:9998;
    padding:70px 12px 20px;
    border-right:1px solid #2b2b2b;
}

.mobile-nav.active{
    left:0;
}

/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-nav ul{

margin:0;

padding:0;

}

.mobile-nav li{

list-style:none;

margin-bottom:6px;

}

.mobile-nav li a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 10px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
}

.mobile-nav li a:hover{

background:#1d1d1d;

color:var(--primary);

}

.mobile-nav li a.active{

background:rgba(255,212,0,.12);

color:var(--primary);

}

/* ==========================================================
   MOBILE BUTTONS
========================================================== */

.mobile-buttons{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mobile-buttons .btn{

justify-content:center;

}

.mobile-buttons .btn{
    width:100%;
    height:34px;
    min-height:34px;
    padding:0 12px;
    font-size:13px;
    border-radius:20px;
}

/* ==========================================================
   DROPDOWN MENU
========================================================== */

.dropdown{

position:relative;

}

.dropdown-menu{

position:absolute;

top:100%;

left:0;

min-width:230px;

background:#181818;

border:1px solid var(--border);

border-radius:16px;

padding:12px 0;

opacity:0;

visibility:hidden;

transform:translateY(12px);

transition:var(--transition);

box-shadow:var(--shadow);

z-index:999;

}

.dropdown:hover .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.dropdown-menu a{

display:block;

padding:12px 18px;

font-size:15px;

font-weight:500;

height:auto;

color:var(--white);

}

.dropdown-menu a:hover{

background:#222;

color:var(--primary);

}

/* ==========================================================
   NAVIGATION ICONS
========================================================== */

.nav-icon{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:#1a1a1a;

cursor:pointer;

transition:var(--transition);

}

.nav-icon:hover{

background:var(--primary);

color:#000;

}

/* ==========================================================
   USER MENU
========================================================== */

.user-avatar{

width:42px;

height:42px;

border-radius:50%;

overflow:hidden;

cursor:pointer;

border:2px solid var(--border);

}

.user-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.user-menu{

position:absolute;

top:65px;

right:0;

width:240px;

background:#181818;

border:1px solid var(--border);

border-radius:16px;

padding:12px 0;

display:none;

box-shadow:var(--shadow);

z-index:9999;

}

.user-menu.show{

display:block;

}

.user-menu a{

display:block;

padding:13px 20px;

font-size:15px;

color:var(--white);

}

.user-menu a:hover{

background:#232323;

color:var(--primary);

}

/* ==========================================================
   SEARCH BAR
========================================================== */

.header-search{

display:flex;

align-items:center;

background:#181818;

border:1px solid var(--border);

border-radius:14px;

height:46px;

padding:0 15px;

min-width:260px;

}

.header-search input{

flex:1;

background:transparent;

border:none;

outline:none;

color:#fff;

font-size:15px;

}

.header-search input::placeholder{

color:var(--text-muted);

}

.header-search button{

background:none;

border:none;

cursor:pointer;

color:var(--primary);

font-size:18px;

}

/* ==========================================================
   PRINTQLY CSS FRAMEWORK v2.0
   FILE : style.css
   PART : 4 (Layout System)
========================================================== */

/* ==========================================================
   PAGE WRAPPER
========================================================== */

.page-wrapper{
    width:100%;
    min-height:100vh;
    overflow:hidden;
}

/* ==========================================================
   MAIN
========================================================== */

main{
    display:block;
    width:100%;
}

/* ==========================================================
   SECTION
========================================================== */

.section{
    position:relative;
    padding:90px 0;
}

.section-sm{
    padding:60px 0;
}

.section-lg{
    padding:120px 0;
}

/* ==========================================================
   GRID SYSTEM
========================================================== */

.grid{
    display:grid;
    gap:30px;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.grid-auto{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

/* ==========================================================
   FLEX
========================================================== */

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

/* ==========================================================
   CARD
========================================================== */

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

/* ==========================================================
   CONTENT BOX
========================================================== */

.content-box{
    background:var(--surface-light);
    border-radius:var(--radius);
    padding:35px;
}

.content-box h2,
.content-box h3{
    margin-bottom:18px;
}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
    font-size:14px;
}

.breadcrumb a{
    color:var(--text-light);
}

.breadcrumb span{
    color:var(--primary);
}

/* ==========================================================
   PAGE TITLE
========================================================== */

.page-title{
    text-align:center;
    margin-bottom:60px;
}

.page-title h1{
    margin-bottom:15px;
}

.page-title p{
    max-width:700px;
    margin:auto;
}

/* ==========================================================
   DIVIDER
========================================================== */

.divider{
    width:100%;
    height:1px;
    background:var(--border);
    margin:40px 0;
}

/* ==========================================================
   BADGES
========================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
}

.badge-primary{
    background:rgba(255,212,0,.15);
    color:var(--primary);
}

.badge-success{
    background:rgba(34,197,94,.15);
    color:var(--success);
}

.badge-danger{
    background:rgba(239,68,68,.15);
    color:var(--danger);
}

/* ==========================================================
   ALERT
========================================================== */

.alert{
    border-radius:14px;
    padding:18px 22px;
    margin-bottom:20px;
}

.alert-success{
    background:rgba(34,197,94,.10);
    color:var(--success);
}

.alert-danger{
    background:rgba(239,68,68,.10);
    color:var(--danger);
}

.alert-warning{
    background:rgba(245,158,11,.10);
    color:var(--warning);
}

/* ==========================================================
   TABLE
========================================================== */

.table-responsive{
    width:100%;
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

table th{
    background:#1a1a1a;
    color:#fff;
    padding:16px;
    text-align:left;
}

table td{
    padding:16px;
    border-bottom:1px solid var(--border);
}

/* ==========================================================
   LOADER
========================================================== */

.page-loader{
    position:fixed;
    inset:0;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
}

.loader-circle{
    width:58px;
    height:58px;
    border:5px solid #222;
    border-top:5px solid var(--primary);
    border-radius:50%;
    animation:loaderSpin .9s linear infinite;
}

@keyframes loaderSpin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

/* ==========================================================
   PRINTQLY CSS FRAMEWORK v2.0
   FILE : style.css
   PART : 5 (Global Components)
========================================================== */

/* ==========================================================
   MODAL
========================================================== */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

align-items:center;
justify-content:center;

background:rgba(0,0,0,.75);

backdrop-filter:blur(6px);

z-index:10000;

}

.modal.show{

display:flex;

}

.modal-content{

width:100%;

max-width:550px;

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius-lg);

padding:35px;

box-shadow:var(--shadow-lg);

position:relative;

}

.modal-close{

position:absolute;

top:18px;

right:18px;

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

border-radius:50%;

background:#1d1d1d;

transition:var(--transition);

}

.modal-close:hover{

background:var(--primary);

color:#000;

}

/* ==========================================================
   ACCORDION
========================================================== */

.accordion{

border:1px solid var(--border);

border-radius:var(--radius);

overflow:hidden;

}

.accordion-item{

border-bottom:1px solid var(--border);

}

.accordion-item:last-child{

border-bottom:none;

}

.accordion-header{

padding:20px 25px;

font-weight:600;

cursor:pointer;

background:#181818;

}

.accordion-body{

display:none;

padding:20px 25px;

background:#111;

color:var(--text-light);

}

.accordion-item.active .accordion-body{

display:block;

}

/* ==========================================================
   TABS
========================================================== */

.tabs{

display:flex;

gap:15px;

margin-bottom:30px;

flex-wrap:wrap;

}

.tab-btn{

padding:12px 24px;

border-radius:50px;

background:#181818;

cursor:pointer;

transition:var(--transition);

}

.tab-btn.active{

background:var(--primary);

color:#000;

}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-top:50px;

}

.pagination a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:12px;

background:#181818;

font-weight:600;

}

.pagination a.active{

background:var(--primary);

color:#000;

}

/* ==========================================================
   TOOLTIPS
========================================================== */

.tooltip{

position:relative;

display:inline-block;

}

.tooltip::after{

content:attr(data-title);

position:absolute;

left:50%;

bottom:125%;

transform:translateX(-50%);

background:#000;

color:#fff;

padding:8px 12px;

border-radius:8px;

font-size:13px;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.25s;

}

.tooltip:hover::after{

opacity:1;

visibility:visible;

}

/* ==========================================================
   PROGRESS BAR
========================================================== */

.progress{

width:100%;

height:10px;

background:#1b1b1b;

border-radius:50px;

overflow:hidden;

}

.progress-bar{

height:100%;

background:var(--primary);

width:0;

transition:width .5s;

}

/* ==========================================================
   AVATAR
========================================================== */

.avatar{

width:60px;

height:60px;

border-radius:50%;

overflow:hidden;

}

.avatar img{

width:100%;

height:100%;

object-fit:cover;

}

/* ==========================================================
   STATUS
========================================================== */

.status-online{

color:var(--success);

}

.status-offline{

color:var(--danger);

}

.status-warning{

color:var(--warning);

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state{

text-align:center;

padding:80px 20px;

}

.empty-state img{

width:180px;

margin:auto;

margin-bottom:25px;

}

.empty-state h3{

margin-bottom:12px;

}

.empty-state p{

max-width:500px;

margin:auto;

}

/* Bottom space for fixed mobile navigation */
body{
    padding-bottom:90px;
}

/* ==========================================================
   END OF STYLE.CSS
========================================================== */


.customer-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 18px;
    background:#111;
    border-bottom:1px solid #333;
}

.home-btn{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
}

.customer-name{
    color:#FFD400;
    font-weight:600;
    font-size:16px;
}

.input,
.form-control,
textarea,
select{
    width:100%;
    padding:14px;
    background:#1b1b1b;
    color:#fff;
    border:1px solid #333;
    border-radius:10px;
    font-size:16px;
    box-sizing:border-box;
}

textarea{
    min-height:120px;
    resize:vertical;
}

.profile-page select,
.profile-page textarea,
.profile-page input{
    width:100% !important;
    padding:14px !important;
    background:#1b1b1b !important;
    color:#fff !important;
    border:1px solid #333 !important;
    border-radius:10px !important;
    font-size:16px !important;
    box-sizing:border-box;
}

.profile-page textarea{
    min-height:120px;
}