/* =======================================
   Lyla's Corner
   style.css
   Part 1/3
======================================= */

:root{

--bg:#fff7fb;
--bg2:#ffe8f5;
--bg3:#ffd9ef;

--card:rgba(255,255,255,.72);

--border:#ffffffaa;

--text:#4b3d47;

--accent:#ff8fc2;

--accent2:#ffb5d8;

--shadow:0 12px 35px rgba(255,170,210,.18);

--radius:22px;

--transition:.3s ease;

font-family:"Quicksand",sans-serif;

}

/* ========= Themes ========= */

body[data-theme="pink"]{

--bg:#fff6fb;
--bg2:#ffe7f5;
--bg3:#ffd7ee;

}

body[data-theme="cotton"]{

--bg:#eef9ff;
--bg2:#f9ecff;
--bg3:#fff8fd;

}

body[data-theme="lavender"]{

--bg:#f4edff;
--bg2:#eadbff;
--bg3:#ffffff;

}

body[data-theme="midnight"]{

--bg:#1d2038;
--bg2:#2d3158;
--bg3:#453661;

--card:rgba(35,40,70,.72);

--border:rgba(255,255,255,.08);

--text:#ffffff;

--shadow:0 12px 30px rgba(0,0,0,.45);

}

/* ========= Body ========= */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

color:var(--text);

background:

linear-gradient(-45deg,

var(--bg),

var(--bg2),

var(--bg3));

background-size:400% 400%;

animation:

gradientMove 18s ease infinite;

min-height:100vh;

padding:25px;

}

/* ========= Animations ========= */

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}

}

/* ========= Loading ========= */

#loading-screen{

position:fixed;

inset:0;

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

backdrop-filter:blur(18px);

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

transition:.5s;

}

#loading-screen.hide{

opacity:0;

pointer-events:none;

}

.loading-card{

background:white;

padding:35px;

border-radius:24px;

width:320px;

text-align:center;

box-shadow:var(--shadow);

animation:fadeIn .5s;

}

.loading-pfp{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin-bottom:15px;

border:4px solid white;

}

.loader{

margin-top:20px;

height:8px;

background:#eee;

border-radius:999px;

overflow:hidden;

}

.loader-fill{

height:100%;

width:100%;

background:linear-gradient(90deg,

#ffb5da,

#ffcde6);

animation:loading 1.3s linear infinite;

}

@keyframes loading{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}

/* ========= Browser ========= */

.window{

max-width:1200px;

margin:auto;

background:var(--card);

backdrop-filter:blur(22px);

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

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

}

.browser{

padding:14px 18px;

display:flex;

justify-content:space-between;

align-items:center;

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

border-bottom:1px solid rgba(255,255,255,.3);

}

.browser-left{

display:flex;

gap:8px;

}

.circle{

width:12px;

height:12px;

border-radius:50%;

}

.red{background:#ff605c;}

.yellow{background:#ffbd44;}

.green{background:#00ca4e;}

.address-bar{

padding:12px;

text-align:center;

font-size:.9rem;

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

border-bottom:1px solid rgba(255,255,255,.25);

}

/* ========= Navigation ========= */

.browser-tabs{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.tab{

padding:10px 18px;

border:none;

background:white;

border-radius:999px;

cursor:pointer;

font-weight:700;

transition:var(--transition);

}

.tab:hover{

transform:translateY(-2px);

}

.tab.active{

background:var(--accent);

color:white;

}

/* ========= Theme Picker ========= */

.theme-picker{

display:flex;

gap:12px;

justify-content:center;

padding:18px;

flex-wrap:wrap;

}

.theme-btn{

padding:10px 18px;

border:none;

border-radius:999px;

background:white;

cursor:pointer;

font-weight:700;

transition:var(--transition);

}

.theme-btn.active{

background:var(--accent);

color:white;

}

/* ========= Pages ========= */

.page{

display:none;

padding:40px;

animation:fadeIn .35s;

}

.page.active{

display:block;

}

.page-title{

font-size:2rem;

margin-bottom:10px;

}

.page-subtitle{

opacity:.75;

margin-bottom:30px;

}

/* ========= Banner ========= */

.banner{

width:100%;

height:250px;

object-fit:cover;

border-radius:20px;

margin-bottom:30px;

}

/* ========= About ========= */

.profile-section{

display:flex;

gap:30px;

align-items:center;

flex-wrap:wrap;

margin-bottom:40px;

}

.profile{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

border:6px solid white;

box-shadow:var(--shadow);

}

.profile-info{

flex:1;

}

.profile-info h1{

font-size:2.5rem;

margin-bottom:10px;

}

.subtitle{

opacity:.8;

margin-bottom:18px;

}

.bio{

line-height:1.8;

margin-top:18px;

}

.badges{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:15px;

}

.badges span{

background:white;

padding:8px 14px;

border-radius:999px;

font-weight:700;

box-shadow:var(--shadow);

}

/* ========= Buttons ========= */

.button-row{

margin-top:25px;

}

.primary-btn,
.payment-button,
button{

padding:12px 22px;

border:none;

border-radius:14px;

background:linear-gradient(135deg,

var(--accent),

var(--accent2));

color:white;

font-weight:700;

cursor:pointer;

transition:var(--transition);

text-decoration:none;

display:inline-block;

}

button:hover,
.primary-btn:hover,
.payment-button:hover{

transform:translateY(-3px);

/* =======================================
   Menu
======================================= */

.menu-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:22px;

margin-bottom:30px;

}

.service-card{

background:var(--card);

backdrop-filter:blur(16px);

padding:25px;

border-radius:var(--radius);

box-shadow:var(--shadow);

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

transition:var(--transition);

text-align:center;

}

.service-card:hover{

transform:translateY(-6px);

}

.service-card h2{

margin-bottom:15px;

}

.service-card p{

margin:10px 0;

opacity:.85;

}

.service-card h3{

font-size:1.6rem;

color:var(--accent);

margin-bottom:12px;

}

.service-card small{

display:block;

margin-top:12px;

line-height:1.6;

opacity:.75;

}

/* =======================================
   Extras
======================================= */

.extras-card,
.notice-card{

background:var(--card);

padding:28px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin-top:25px;

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

}

.extras-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:16px;

margin-top:20px;

}

.extras-grid div{

background:white;

padding:14px;

border-radius:14px;

display:flex;

justify-content:space-between;

font-weight:700;

}

/* =======================================
   Gallery
======================================= */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}

.gallery-img{

width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

cursor:pointer;

transition:.3s;

box-shadow:var(--shadow);

}

.gallery-img:hover{

transform:scale(1.04);

}

/* =======================================
   Lightbox
======================================= */

#lightbox{

position:fixed;

inset:0;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

pointer-events:none;

transition:.3s;

z-index:9998;

}

#lightbox.show{

opacity:1;

pointer-events:auto;

}

#lightbox img{

max-width:90%;

max-height:85%;

border-radius:18px;

box-shadow:0 20px 60px rgba(0,0,0,.4);

}

#close-lightbox{

position:absolute;

top:30px;

right:40px;

font-size:2rem;

cursor:pointer;

color:white;

}

/* =======================================
   Reviews
======================================= */

.rating-summary{

display:grid;

grid-template-columns:260px 1fr;

gap:30px;

margin-bottom:35px;

}

.average-rating{

background:var(--card);

padding:30px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

}

.average-rating h2{

font-size:3rem;

}

.rating-bars{

display:flex;

flex-direction:column;

gap:14px;

justify-content:center;

}

.rating-row{

display:flex;

align-items:center;

gap:12px;

}

.rating-bar{

flex:1;

height:12px;

background:#ececec;

border-radius:999px;

overflow:hidden;

}

.rating-fill{

height:100%;

width:0%;

background:linear-gradient(

90deg,

#ffd35a,

#ffb545

);

transition:.4s;

}

/* =======================================
   Review Form
======================================= */

.review-form{

background:var(--card);

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin-bottom:35px;

display:flex;

flex-direction:column;

gap:18px;

}

.review-form input,

.review-form textarea,

.review-form select{

padding:14px;

border-radius:14px;

border:1px solid #ddd;

font-family:inherit;

font-size:1rem;

resize:none;

}

.checkbox{

display:flex;

gap:10px;

align-items:center;

}

/* =======================================
   Review Cards
======================================= */

#reviews-container{

display:flex;

flex-direction:column;

gap:20px;

}

.review-card{

background:var(--card);

padding:24px;

border-radius:var(--radius);

box-shadow:var(--shadow);

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

animation:fadeIn .35s;

}

.review-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:15px;

gap:20px;

}

.review-text{

line-height:1.8;

margin-top:10px;

}

.stars{

color:#ffbf42;

font-size:1.1rem;

margin-top:4px;

}

.featured-review{

display:inline-block;

background:#ffe8a6;

padding:8px 14px;

border-radius:999px;

font-size:.85rem;

font-weight:700;

margin-bottom:16px;

}

.verified-badge{

background:#d9f5dd;

color:#2f7d32;

padding:4px 10px;

border-radius:999px;

font-size:.75rem;

margin-left:8px;

font-weight:700;

}

.owner-reply{

margin-top:20px;

padding:18px;

border-left:5px solid var(--accent);

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

border-radius:14px;

}

.owner-reply strong{

display:block;

margin-bottom:8px;

}

/* =======================================
   Cookie Jar
======================================= */

#cookie-jar{

position:fixed;

bottom:20px;

right:20px;

display:flex;

align-items:center;

gap:14px;

background:var(--card);

padding:14px 18px;

border-radius:999px;

box-shadow:var(--shadow);

backdrop-filter:blur(18px);

z-index:999;

}

.cookie{

font-size:1.8rem;

background:none;

border:none;

cursor:pointer;

transition:.2s;

}

.cookie:hover{

transform:scale(1.15) rotate(8deg);

}

.cookie-info h3{

font-size:1rem;

}

.cookie-info p{

font-size:.9rem;

opacity:.8;

}

.floating-cookie{

position:fixed;

font-weight:700;

pointer-events:none;

animation:floatCookie 1.5s forwards;

z-index:1000;

}

@keyframes floatCookie{

0%{

opacity:1;

transform:translateY(0);

}

100%{

opacity:0;

transform:translateY(-80px);

}

}

/* =======================================
   Toast
======================================= */

#toast{

position:fixed;

left:50%;

bottom:35px;

transform:translateX(-50%) translateY(30px);

background:#333;

color:white;

padding:14px 24px;

border-radius:999px;

opacity:0;

transition:.3s;

z-index:10000;

}

#toast.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}

/* =======================================
   Boundaries
======================================= */

.boundary-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:22px;

}

.boundary-card{

background:var(--card);

padding:25px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.boundary-card:hover{

transform:translateY(-6px);

}

.boundary-card h3{

margin-bottom:14px;

color:var(--accent);

}

.boundary-card p{

line-height:1.8;

opacity:.9;

}

/* =======================================
   Payment
======================================= */

.payment-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:24px;

}

.payment-card{

background:var(--card);

padding:28px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

text-align:center;

transition:var(--transition);

}

.payment-card:hover{

transform:translateY(-6px);

}

.payment-card h2{

margin-bottom:15px;

}

.payment-card p{

line-height:1.8;

margin-bottom:20px;

}

.payment-card button,

.payment-card a{

width:100%;

}

/* =======================================
   Spotify
======================================= */

.spotify-card{

margin-top:35px;

background:var(--card);

padding:25px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

}

.spotify-card h2{

margin-bottom:20px;

}

.spotify-card iframe{

border:none;

border-radius:18px;

}

/* =======================================
   Footer
======================================= */

footer{

margin-top:40px;

padding:25px;

text-align:center;

font-weight:700;

opacity:.8;

}

/* =======================================
   Scrollbar
======================================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:transparent;

}

::-webkit-scrollbar-thumb{

background:var(--accent);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--accent2);

}

/* =======================================
   Midnight Theme
======================================= */

body[data-theme="midnight"] .tab,

body[data-theme="midnight"] .theme-btn,

body[data-theme="midnight"] .badges span,

body[data-theme="midnight"] .extras-grid div{

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

color:white;

}

body[data-theme="midnight"] input,

body[data-theme="midnight"] textarea,

body[data-theme="midnight"] select{

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

color:white;

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

}

body[data-theme="midnight"] input::placeholder,

body[data-theme="midnight"] textarea::placeholder{

color:rgba(255,255,255,.6);

}

body[data-theme="midnight"] .address-bar,

body[data-theme="midnight"] .browser{

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

}

/* =======================================
   Mobile
======================================= */

@media (max-width:900px){

.browser{

flex-direction:column;

gap:15px;

}

.browser-tabs{

justify-content:center;

}

.profile-section{

flex-direction:column;

text-align:center;

}

.profile{

width:150px;

height:150px;

}

.rating-summary{

grid-template-columns:1fr;

}

}

@media (max-width:700px){

body{

padding:10px;

}

.page{

padding:22px;

}

.banner{

height:170px;

}

.page-title{

font-size:1.7rem;

}

.profile-info h1{

font-size:2rem;

}

#cookie-jar{

left:50%;

right:auto;

bottom:15px;

transform:translateX(-50%);

width:90%;

justify-content:center;

}

.payment-grid,

.menu-grid,

.boundary-grid,

.gallery-grid,

.about-grid{

grid-template-columns:1fr;

}

.browser-tabs{

overflow-x:auto;

flex-wrap:nowrap;

padding-bottom:8px;

}

.tab{

flex-shrink:0;

}

}

/* =======================================
   About Grid
======================================= */

.about-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:22px;

margin-top:30px;

}

.card{

background:var(--card);

padding:24px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.card:hover{

transform:translateY(-6px);

}

.card h2{

margin-bottom:14px;

}

.card ul{

padding-left:20px;

line-height:1.8;

}

/* =======================================
   Links
======================================= */

a{

color:inherit;

text-decoration:none;

}

/* =======================================
   Image Safety
======================================= */

img{

max-width:100%;

display:block;

}

/* =======================================
   End
======================================= */

filter:brightness(1.05);

}