/* =========================
   CATEGORY PAGE STYLE
========================= */


/* Breadcrumb */

.breadcrumbs{

font-size:14px;

color:#777;

margin:25px 0;

}


.breadcrumbs a{

color:#ff6b6b;

text-decoration:none;

}



/* =========================
   CATEGORY INTRO
========================= */


.intro,
.info-box,
.faq,
.section-box{

background:#fff;

border-radius:20px;

padding:30px;

margin:30px 0;

box-shadow:

0 6px 20px rgba(0,0,0,.06);

}



.intro p,
.info-box p,
.faq p{

color:#555;

font-size:17px;

}



/* =========================
   CATEGORY JUMP MENU
========================= */


.category-menu{

display:flex;

flex-wrap:wrap;

gap:12px;

}



.category-menu a{

background:#fff2ef;

color:#ff6b6b;

padding:10px 18px;

border-radius:25px;

font-size:15px;

font-weight:600;

transition:.25s;

}



.category-menu a:hover{

background:#ff6b6b;

color:#fff;

transform:translateY(-2px);

}



/* =========================
   MESSAGE LIST
========================= */


.section-box h2{

font-size:28px;

margin-bottom:20px;

}



.message{

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

background:#f7f9fc;

padding:14px 16px;

border-radius:12px;

margin:12px 0;

min-height:60px;

}



.message{

font-size:16px;

color:#333;

}



.message .copy-btn{

flex-shrink:0;

}



/* =========================
   COPY BUTTON
========================= */


.copy-btn{

background:linear-gradient(
135deg,
#ff6b6b,
#ff8e53
);

color:white;

border:none;

padding:8px 18px;

border-radius:22px;

font-size:14px;

font-weight:600;

cursor:pointer;

display:flex;

align-items:center;

gap:6px;

white-space:nowrap;

box-shadow:

0 4px 12px rgba(255,107,107,.25);

transition:.25s;

}



.copy-btn::before{

content:"📋";

}



.copy-btn:hover{

transform:translateY(-2px);

box-shadow:

0 8px 18px rgba(255,107,107,.35);

}



.copy-btn.copied{

background:linear-gradient(
135deg,
#4caf50,
#66bb6a
);

}



.copy-btn.copied::before{

content:"✓";

}



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


.related-links{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(230px,1fr));

gap:20px;

}



.related-links a{

background:#fff;

padding:22px;

border-radius:18px;

box-shadow:

0 5px 18px rgba(0,0,0,.07);

font-weight:600;

transition:.25s;

}



.related-links a:hover{

transform:translateY(-4px);

box-shadow:

0 10px 25px rgba(0,0,0,.12);

color:#ff6b6b;

}



/* =========================
   FAQ
========================= */


.faq h2{

margin-bottom:25px;

}


.faq h3{

font-size:20px;

margin-top:25px;

color:#222;

}



/* =========================
   CATEGORY TITLE
========================= */


main > h1{

font-size:42px;

line-height:1.25;

color:#222;

margin-top:20px;

}



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


@media(max-width:700px){


main > h1{

font-size:30px;

}


.intro,
.info-box,
.faq,
.section-box{

padding:22px;

}



.message{

flex-direction:column;

align-items:flex-start;

gap:10px;

}



.copy-btn{

width:100%;

justify-content:center;

}


.category-menu a{

font-size:14px;

padding:8px 14px;

}


}