/* ═══════════════════════════════════════════
   Rana's Art — Website Stylesheet
   Palette matches the .NET MAUI mobile app
═══════════════════════════════════════════ */

/* ─── Variables ─── */
:root {
  --primary:     #1C1C2E;
  --gold:        #C4A34A;
  --gold-hover:  #D4B96A;
  --bg:          #F7F4EF;
  --card:        #FFFFFF;
  --text:        #1C1C2E;
  --text-sec:    #5C5C6B;
  --text-muted:  #9898A6;
  --available:   #2A6B4A;
  --avail-bg:    #E8F5EE;
  --sold:        #9898A6;
  --sold-bg:     #EDEDF2;
  --border:      #E5E1D8;
  --shadow:      0 2px 12px rgba(28,28,46,.08);
  --shadow-lg:   0 4px 24px rgba(28,28,46,.13);
  --r-sm:        8px;
  --r:           12px;
  --r-lg:        16px;
  --nav-h:       64px;
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;border:none;outline:none;background:none}
ul{list-style:none}
h1,h2,h3,h4{font-weight:700;line-height:1.2}

/* ─── Navigation ─── */
.nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);background:var(--primary);
  display:flex;align-items:center;padding:0 24px;gap:20px;
}
.nav-logo{
  font-size:.75rem;font-weight:700;letter-spacing:3px;
  color:var(--gold);text-transform:uppercase;white-space:nowrap;
  flex-shrink:0;
}
.nav-links{display:flex;gap:2px;flex:1}
.nav-links a{
  padding:8px 13px;color:rgba(255,255,255,.72);font-size:.875rem;
  border-radius:var(--r-sm);transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-auth{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.nav-btn{
  font-size:.875rem;padding:7px 15px;border-radius:var(--r-sm);
  cursor:pointer;transition:opacity .2s;white-space:nowrap;
}
.nav-ghost{color:rgba(255,255,255,.8)}
.nav-ghost:hover{color:#fff}
.nav-solid{background:var(--gold);color:var(--primary);font-weight:700}
.nav-solid:hover{opacity:.9}
.nav-user{color:rgba(255,255,255,.75);font-size:.875rem;white-space:nowrap}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:8px;margin-left:auto;
}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:2px}
.nav-mobile{
  display:none;flex-direction:column;
  background:var(--primary);border-top:1px solid rgba(255,255,255,.1);
}
.nav-mobile.open{display:flex}
.nav-mobile a,.nav-mobile button{
  padding:13px 24px;color:rgba(255,255,255,.8);font-size:.9375rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;text-align:left;width:100%;
}
.nav-mobile a:hover,.nav-mobile button:hover{color:#fff}
@media(max-width:680px){
  .nav-links,.nav-auth{display:none}
  .hamburger{display:flex}
}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:12px 24px;border-radius:var(--r-sm);
  font-size:.9375rem;font-weight:600;cursor:pointer;
  transition:opacity .2s,transform .1s;
}
.btn:hover{opacity:.9}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:#fff}
.btn-gold{background:var(--gold);color:var(--primary)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--primary)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-white:hover{border-color:#fff}
.btn-danger{background:#CC3333;color:#fff}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-sm{padding:7px 14px;font-size:.8125rem}
.btn-full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ─── Hero ─── */
.hero{background:var(--primary);padding:72px 24px 64px;text-align:center}
.hero-inner{max-width:560px;margin:0 auto}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;
}
.hero h1{
  font-size:clamp(2rem,5vw,3rem);color:#fff;margin:0 0 6px;font-weight:800;
}
.hero p{color:rgba(255,255,255,.62);font-size:1rem;line-height:1.65;margin:12px 0 0}
.hero-divider{width:60px;height:2px;background:var(--gold);margin:18px auto}
.hero-ctas{
  display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap;margin-top:28px;
}

/* ─── Stats bar ─── */
.stats-bar{
  background:var(--gold);
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;padding:16px 0;
}
.stats-bar .divider{background:rgba(28,28,46,.18);align-self:stretch}
.stat-item{text-align:center;padding:0 12px}
.stat-number{font-size:1.375rem;font-weight:800;color:var(--primary);line-height:1.1}
.stat-label{font-size:.6875rem;color:var(--primary);margin-top:3px}

/* ─── Section header ─── */
.section-header{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;
}
.section-header h2{font-size:1.375rem;color:var(--text)}
.section-header a{font-size:.8125rem;color:var(--gold);font-weight:600}
.section-header a:hover{text-decoration:underline}

/* ─── Painting card ─── */
.pcard{
  background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);box-shadow:var(--shadow);
  overflow:hidden;cursor:pointer;display:block;color:inherit;
  transition:box-shadow .2s,transform .2s;
}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pcard-img{position:relative;overflow:hidden}
.pcard-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .3s;display:block;
}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-badge{
  position:absolute;top:10px;right:10px;
  padding:4px 10px;border-radius:20px;
  font-size:.6875rem;font-weight:700;color:#fff;letter-spacing:.5px;
}
.badge-available{background:var(--available)}
.badge-sold{background:var(--sold)}
.pcard-sold{
  position:absolute;inset:0;background:rgba(28,28,46,.56);
  display:flex;align-items:center;justify-content:center;
}
.pcard-sold span{font-size:1rem;font-weight:800;letter-spacing:4px;color:#fff}
.pcard-info{padding:12px 14px 14px}
.pcard-title{
  font-size:.875rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;
}
.pcard-dims{font-size:.75rem;color:var(--text-muted);margin-bottom:4px}
.pcard-price{font-size:.9375rem;font-weight:700;color:var(--gold)}

/* ─── Gallery grid ─── */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filter-pill{
  padding:8px 20px;border-radius:20px;font-size:.8125rem;font-weight:600;
  cursor:pointer;transition:all .2s;border:1.5px solid var(--border);
  color:var(--text-sec);background:transparent;
}
.filter-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-pill:hover:not(.active){border-color:var(--primary);color:var(--text)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}

/* ─── Featured row ─── */
.featured-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.featured-row::-webkit-scrollbar{display:none}
.featured-card{flex:0 0 175px;min-width:175px}
.featured-card .pcard-img img{aspect-ratio:1}
@media(min-width:640px){
  .featured-row{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .featured-card{flex:unset;min-width:unset}
}
@media(min-width:1024px){.featured-row{grid-template-columns:repeat(4,1fr)}}

/* ─── Generic card ─── */
.card{
  background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);padding:20px;
}
.card-title{font-size:1.125rem;font-weight:700;color:var(--text);margin-bottom:8px}
.card-divider{width:32px;height:2px;background:var(--gold);margin-bottom:14px}
.about-card p{
  font-size:.9375rem;color:var(--text-sec);line-height:1.7;margin-bottom:12px;
}
.about-card p:last-of-type{margin-bottom:0}
.commission-card{background:var(--primary);border-radius:var(--r);padding:28px;color:#fff}
.commission-card h3{font-size:1.125rem;font-weight:700;margin-bottom:8px}
.commission-card p{font-size:.875rem;color:rgba(255,255,255,.62);line-height:1.6;margin-bottom:20px}

/* ─── Painting detail ─── */
.detail-layout{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:900px){.detail-layout{grid-template-columns:1fr 1fr;align-items:start}}
.detail-img-wrap{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  background:#f0ece4;
}
.detail-img-wrap img{
  width:100%;max-height:560px;object-fit:contain;
  display:block;background:#f0ece4;
}
.detail-badge{
  display:inline-flex;align-items:center;padding:6px 14px;
  border-radius:20px;font-size:.8125rem;font-weight:700;margin-bottom:16px;
}
.detail-title{font-size:1.75rem;font-weight:800;color:var(--text);margin-bottom:6px}
.detail-artist{font-size:1rem;color:var(--text-sec);margin-bottom:20px}
.detail-price{font-size:1.75rem;font-weight:800;color:var(--gold);margin-bottom:24px}
.detail-price.sold{color:var(--sold);font-size:1.25rem}
.detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.meta-chip{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 14px;
}
.meta-chip-label{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.meta-chip-value{font-size:.875rem;font-weight:600;color:var(--text)}
.detail-story{font-size:.9375rem;color:var(--text-sec);line-height:1.8;margin-bottom:28px}
.detail-ctas{display:flex;flex-direction:column;gap:12px}
@media(min-width:480px){.detail-ctas{flex-direction:row}}

/* ─── Order page ─── */
.order-summary{
  display:flex;gap:16px;background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);padding:16px;margin-bottom:24px;align-items:center;
}
.order-summary img{
  width:80px;height:80px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0;
}
.order-summary-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:4px}
.order-summary-meta{font-size:.8125rem;color:var(--text-muted);margin-bottom:6px}
.order-summary-price{font-size:1.125rem;font-weight:800;color:var(--gold)}
.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.pay-card{
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:13px 14px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  transition:border-color .2s,background .2s;user-select:none;
}
.pay-card.selected{border-color:var(--primary);background:rgba(28,28,46,.04)}
.pay-dot{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border);flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.pay-card.selected .pay-dot{background:var(--primary);border-color:var(--primary)}
.pay-name{font-size:.875rem;font-weight:600;color:var(--text)}

/* ─── Auth forms ─── */
.auth-page{
  min-height:calc(100vh - var(--nav-h));
  display:flex;align-items:center;justify-content:center;padding:40px 20px;
}
.auth-card{
  background:var(--card);border-radius:var(--r-lg);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);padding:36px 32px;width:100%;max-width:420px;
}
.auth-card h2{font-size:1.5rem;color:var(--text);margin-bottom:8px}
.auth-card .subtitle{font-size:.875rem;color:var(--text-sec);margin-bottom:28px}
.auth-link{
  text-align:center;margin-top:20px;font-size:.875rem;color:var(--text-sec);
}
.auth-link a{color:var(--gold);font-weight:600}
.auth-link a:hover{text-decoration:underline}

/* ─── Forms ─── */
.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:.8125rem;font-weight:600;
  color:var(--text);margin-bottom:6px;
}
.form-control{
  width:100%;padding:11px 14px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);background:var(--card);color:var(--text);
  font-size:.9375rem;transition:border-color .2s;
}
.form-control:focus{border-color:var(--primary)}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:88px}
select.form-control{cursor:pointer}

/* ─── Toggle switch ─── */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.toggle-row label{font-size:.9375rem;font-weight:600;color:var(--text)}
.toggle{position:relative;width:46px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.tog-slider{
  position:absolute;inset:0;background:var(--border);
  border-radius:26px;cursor:pointer;transition:background .2s;
}
.tog-slider::before{
  content:'';position:absolute;width:20px;height:20px;
  left:3px;top:3px;background:#fff;border-radius:50%;
  transition:transform .2s;
}
.toggle input:checked+.tog-slider{background:var(--available)}
.toggle input:checked+.tog-slider::before{transform:translateX(20px)}

/* ─── Page header ─── */
.page-header{background:var(--primary);padding:28px 24px;color:#fff}
.page-header h1{font-size:1.5rem;font-weight:800;margin-bottom:8px}
.page-header p{font-size:.9375rem;color:rgba(255,255,255,.62);line-height:1.5}
.gold-line{width:36px;height:2px;background:var(--gold);margin-top:12px}

/* ─── Contact page ─── */
.contact-btns{display:flex;flex-direction:column;gap:12px}
.info-cards{display:flex;flex-direction:column;gap:12px}
.info-card{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);padding:16px 18px;
}
.info-icon{font-size:1.5rem;flex-shrink:0}
.info-label{font-size:.75rem;color:var(--text-muted);margin-bottom:3px}
.info-value{font-size:.9375rem;font-weight:600;color:var(--text)}
.info-sub{font-size:.8125rem;color:var(--text-sec);margin-top:2px}

/* ─── Admin ─── */
.admin-banner{
  background:var(--primary);padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.admin-banner h2{
  font-size:.8125rem;font-weight:700;letter-spacing:2px;
  color:var(--gold);text-transform:uppercase;
}
.admin-list{display:flex;flex-direction:column;gap:12px;padding:16px}
.admin-item{
  display:grid;grid-template-columns:88px 1fr auto;
  background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);overflow:hidden;
}
.admin-item img{width:88px;height:88px;object-fit:cover}
.admin-item-info{padding:12px;min-width:0}
.admin-item-title{
  font-size:.9375rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.admin-item-dims{font-size:.8125rem;color:var(--text-muted);margin:3px 0 6px}
.admin-item-btns{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 12px 12px 0;justify-content:center;
}

/* ─── Image picker ─── */
.img-picker{
  border:2px dashed var(--border);border-radius:var(--r);
  padding:28px;text-align:center;cursor:pointer;transition:border-color .2s;
}
.img-picker:hover{border-color:var(--primary)}
.img-picker img{max-height:200px;border-radius:var(--r-sm);margin:0 auto 12px;display:none}
.img-picker img.visible{display:block}
.img-picker p{font-size:.875rem;color:var(--text-muted)}
#imgFile{display:none}

/* ─── PIN overlay ─── */
.pin-overlay{
  position:fixed;inset:0;background:rgba(28,28,46,.75);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
}
.pin-card{
  background:var(--card);border-radius:var(--r-lg);padding:36px 32px;
  width:100%;max-width:360px;box-shadow:var(--shadow-lg);text-align:center;
}
.pin-card h2{font-size:1.25rem;margin-bottom:8px;color:var(--text)}
.pin-card p{font-size:.875rem;color:var(--text-sec);margin-bottom:24px}
.pin-input{
  text-align:center;letter-spacing:8px;font-size:1.375rem;font-weight:700;
}

/* ─── Utilities ─── */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:32px 0}
.page-wrap{min-height:calc(100vh - var(--nav-h))}
.loader{
  text-align:center;padding:60px 20px;color:var(--text-muted);font-size:.9375rem;
}
.loader::before{
  content:'';display:block;width:32px;height:32px;
  border:3px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;animation:spin .8s linear infinite;
  margin:0 auto 16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{padding:13px 16px;border-radius:var(--r-sm);font-size:.875rem;margin-bottom:16px}
.alert-error{background:#FEE2E2;color:#B91C1C;border:1px solid #FCA5A5}
.alert-success{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7}
.empty{text-align:center;padding:60px 20px;color:var(--text-muted)}

/* ─── Footer ─── */
.footer{
  text-align:center;padding:28px 20px;
  border-top:1px solid var(--border);margin-top:48px;
}
.footer-dev{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.footer-name{font-size:.9375rem;font-weight:700;color:var(--text);margin-bottom:3px}
.footer-url{font-size:.8125rem;color:var(--gold);text-decoration:underline}
.footer-url:hover{color:var(--gold-hover)}
.footer-copy{font-size:.75rem;color:var(--text-muted);margin-top:14px}