/* ==========================================================
   PRINTQLY CSS FRAMEWORK v2.0
   FILE : buttons.css
========================================================== */

/* ==========================================================
   BUTTON BASE
========================================================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

height:52px;

padding:0 28px;

border:none;

outline:none;

cursor:pointer;

border-radius:var(--radius);

font-size:15px;

font-weight:600;

font-family:inherit;

text-decoration:none;

transition:var(--transition);

user-select:none;

white-space:nowrap;

}

/* ==========================================================
   PRIMARY
========================================================== */

.btn-primary{

background:var(--primary);

color:#000;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

box-shadow:var(--shadow);

}

/* ==========================================================
   DARK
========================================================== */

.btn-dark{

background:#202020;

color:#fff;

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

}

.btn-dark:hover{

background:#2d2d2d;

}

/* ==========================================================
   OUTLINE
========================================================== */

.btn-outline{

background:transparent;

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

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#000;

}

/* ==========================================================
   WHITE
========================================================== */

.btn-white{

background:#fff;

color:#111;

}

.btn-white:hover{

background:#ececec;

}

/* ==========================================================
   SUCCESS
========================================================== */

.btn-success{

background:var(--success);

color:#fff;

}

.btn-success:hover{

filter:brightness(.95);

}

/* ==========================================================
   DANGER
========================================================== */

.btn-danger{

background:var(--danger);

color:#fff;

}

.btn-danger:hover{

filter:brightness(.95);

}

/* ==========================================================
   SIZES
========================================================== */

.btn-sm{

height:40px;

padding:0 18px;

font-size:13px;

}

.btn-lg{

height:60px;

padding:0 36px;

font-size:18px;

}

/* ==========================================================
   FULL WIDTH
========================================================== */

.btn-block{

width:100%;

}

/* ==========================================================
   ROUNDED
========================================================== */

.btn-round{

border-radius:50px;

}

/* ==========================================================
   ICON BUTTON
========================================================== */

.btn-icon{

width:52px;

padding:0;

}

/* ==========================================================
   DISABLED
========================================================== */

.btn:disabled{

opacity:.5;

cursor:not-allowed;

pointer-events:none;

}

/* ==========================================================
   FLOATING ACTION BUTTON
========================================================== */

.fab{

position:fixed;

right:20px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:#000;

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

z-index:999;

}

.fab:hover{

transform:scale(1.08);

}

/* ==========================================================
   BUTTON GROUP
========================================================== */

.btn-group{

display:flex;

gap:15px;

flex-wrap:wrap;

align-items:center;

}

/* ==========================================================
   HERO BUTTON GROUP
========================================================== */

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

.cart-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;          /* Space between buttons */
    flex-wrap:wrap;
}

.cart-buttons .btn{
    width:180px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    margin:0;          /* Remove extra margins */
}

/*=========================================================
  PRINTQLY PREMIUM BUTTONS
  Add at END of buttons.css
=========================================================*/


/* Large Hero Button */

.btn-hero{

height:64px;

padding:0 42px;

font-size:18px;

font-weight:700;

border-radius:18px;

}



/*=========================================================*/


.btn-yellow{

background:#FFD400;

color:#111;

border:2px solid #FFD400;

box-shadow:0 12px 35px rgba(255,212,0,.25);

}


.btn-yellow:hover{

background:#FFE14D;

border-color:#FFE14D;

color:#000;

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(255,212,0,.35);

}



/*=========================================================*/


.btn-outline-yellow{

background:transparent;

border:2px solid #FFD400;

color:#FFD400;

}


.btn-outline-yellow:hover{

background:#FFD400;

color:#111;

transform:translateY(-4px);

}



/*=========================================================*/


.btn-white{

background:#ffffff;

color:#111111;

border:2px solid #ffffff;

}


.btn-white:hover{

background:#f5f5f5;

transform:translateY(-4px);

}



/*=========================================================*/


.btn-glass{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(12px);

color:#ffffff;

}


.btn-glass:hover{

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

border-color:#FFD400;

color:#FFD400;

}



/*=========================================================*/


.btn-success-glow{

background:#22C55E;

color:#fff;

box-shadow:0 12px 30px rgba(34,197,94,.30);

}


.btn-success-glow:hover{

transform:translateY(-4px);

filter:brightness(1.05);

}



/*=========================================================*/


.btn-danger-glow{

background:#EF4444;

color:#fff;

box-shadow:0 12px 30px rgba(239,68,68,.30);

}


.btn-danger-glow:hover{

transform:translateY(-4px);

}



/*=========================================================*/


.btn-icon-left{

display:inline-flex;

align-items:center;

gap:12px;

}


.btn-icon-right{

display:inline-flex;

align-items:center;

gap:12px;

}



/*=========================================================*/


.btn-shadow{

box-shadow:0 15px 40px rgba(0,0,0,.30);

}


.btn-shadow:hover{

box-shadow:0 25px 55px rgba(0,0,0,.45);

}



/*=========================================================*/


.btn-glow:hover{

box-shadow:

0 0 18px rgba(255,212,0,.35),

0 0 40px rgba(255,212,0,.20);

}



/*=========================================================*/


.btn-pill{

border-radius:50px;

}



/*=========================================================*/


.btn-wide{

padding-left:55px;

padding-right:55px;

}



/*=========================================================*/


.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:24px;

flex-wrap:wrap;

margin-top:40px;

}



/*=========================================================*/


.cta-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-top:30px;

}



/*=========================================================*/


@media(max-width:768px){

.hero-buttons,

.cta-buttons{

flex-direction:column;

}

.hero-buttons .btn,

.cta-buttons .btn{

width:100%;

}

.btn-hero{

height:58px;

font-size:17px;

}

}