/* ================================================================
   DRP COMMERCIFY THEME - DreamProject Support
   Final Clean CSS - Optimized for Desktop & Mobile
   ================================================================ */

/* === VARIABLES === */
:root,[data-bs-theme="dark"]{
  --drp-bg:#1e2026;
  --drp-bg-elevated:#26282f;
  --drp-bg-card:#2e3038;
  --drp-bg-muted:#3c3e48;
  --drp-accent:#ff6a00;
  --drp-accent-strong:#e45f00;
  --drp-accent-2:#5dd4c8;
  --drp-text:#e6e8ed;
  --drp-text-sec:#9ca3af;
  --drp-btn:#c94f00;
  --drp-btn-h:#ab4200;
  --drp-border:rgba(255,255,255,.08);
  --drp-border-s:rgba(255,255,255,.15);
  --drp-header:#1e2026;
  --drp-sidebar:#1a1c21;
  --drp-footer:#1a1c21;
  --drp-r:0px;
  --drp-r-sm:4px;
  --drp-r-md:6px;
  --drp-r-lg:8px;
  --drp-shadow:0 2px 8px rgba(0,0,0,.3);
  --drp-shadow-lg:0 4px 16px rgba(0,0,0,.4);
  --drp-tr:all .2s ease;
  --bs-body-bg:#1e2026;
  --bs-body-color:#e6e8ed;
  --bs-primary:#ff6a00;
  --bs-secondary:#5dd4c8;
  --bs-border-color:rgba(255,255,255,.08)
}

[data-bs-theme="light"]{
  --drp-bg:#f8f9fa;
  --drp-bg-elevated:#fff;
  --drp-bg-card:#fff;
  --drp-bg-muted:#e9ecef;
  --drp-accent:#ff6a00;
  --drp-accent-2:#5dd4c8;
  --drp-text:#212529;
  --drp-text-sec:#6c757d;
  --drp-btn:#c94f00;
  --drp-btn-h:#ab4200;
  --drp-border:rgba(0,0,0,.1);
  --drp-border-s:rgba(0,0,0,.15);
  --drp-header:#fff;
  --drp-sidebar:#f8f9fa;
  --drp-footer:#e9ecef;
  --bs-body-bg:#f8f9fa;
  --bs-body-color:#212529;
  --bs-border-color:rgba(0,0,0,.1)
}

/* === BASE === */
body.drpcommercify{
  background:var(--drp-bg);
  color:var(--drp-text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  line-height:1.6;
  min-height:100vh
}

.drp-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column
}

/* === LOGO #DreamprojectAI === */
.drp-logo{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:var(--drp-text);
  font-family:Inter,sans-serif;
  transition:var(--drp-tr)
}

.drp-logo:hover{
  color:var(--drp-text);
  transform:translateY(-1px)
}

.drp-logo__cluster{
  display:inline-flex;
  align-items:center;
  gap:.03em;
  padding:.1em .36em .08em;
  background:rgba(201,79,0,.14);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 24%,#fff 52%,#fff 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 24%,#fff 52%,#fff 100%);
  position:relative
}

.drp-logo__hash{
  font-weight:700;
  transform:skewX(-9deg);
  color:var(--drp-text);
  text-shadow:0 1px 2px rgba(0,0,0,.35)
}

.drp-logo__brand{
  display:inline-flex;
  align-items:baseline;
  font-weight:600;
  transform:skewX(-7deg);
  font-size:.8em;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--drp-text-sec)
}

.drp-logo__d{text-transform:uppercase}

.drp-logo__ai{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.14em;
  padding:.09em .38em .08em .22em;
  font-weight:700;
  font-size:1em;
  font-style:italic;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:var(--drp-btn-h);
  clip-path:path("M 10% 0 L 100% 0 L 100% 100% L 0 100% C 12% 86%,10% 26%,0 12% Q 0 0 10% 0 Z");
  -webkit-clip-path:path("M 10% 0 L 100% 0 L 100% 100% L 0 100% C 12% 86%,10% 26%,0 12% Q 0 0 10% 0 Z")
}

.drp-logo__sub{
  font-size:.75rem;
  font-weight:500;
  color:var(--drp-text-sec);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-left:.25rem
}

/* === HEADER === */
.drp-header{
  background:var(--drp-header);
  border-bottom:1px solid var(--drp-border);
  padding:.75rem 0;
  position:sticky;
  top:0;
  z-index:1030;
  box-shadow:var(--drp-shadow)
}

.drp-header__inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem
}

.drp-header__actions{
  display:flex;
  align-items:center;
  gap:.75rem
}

.js-theme-toggler,.drp-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-sm);
  background:0 0;
  color:var(--drp-text-sec);
  text-decoration:none;
  transition:var(--drp-tr)
}

.js-theme-toggler:hover,.drp-theme-toggle:hover{
  color:var(--drp-text);
  border-color:var(--drp-border-s);
  background:var(--drp-bg-muted)
}

.drp-lang-select{
  background:var(--drp-bg-card);
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-sm);
  color:var(--drp-text);
  font-size:.875rem;
  padding:.4rem 2rem .4rem .75rem
}

.drp-user-btn{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:0 0;
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-sm);
  color:var(--drp-text);
  padding:.4rem .75rem;
  cursor:pointer;
  transition:var(--drp-tr)
}

.drp-user-btn:hover{
  background:var(--drp-bg-muted);
  border-color:var(--drp-border-s)
}

.drp-dropdown-menu{
  background:var(--drp-bg-card);
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-md);
  box-shadow:var(--drp-shadow-lg);
  min-width:12rem;
  padding:.5rem 0
}

.drp-dropdown-menu .dropdown-item{
  color:var(--drp-text);
  padding:.5rem 1rem;
  transition:var(--drp-tr);
  display:flex;
  align-items:center
}

.drp-dropdown-menu .dropdown-item:hover{
  background:var(--drp-bg-muted);
  color:var(--drp-accent)
}

.drp-dropdown-menu .dropdown-divider{
  border-color:var(--drp-border);
  margin:.25rem 0
}

/* === BUTTONS === */
.drp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem 1.25rem;
  border:1px solid transparent;
  border-radius:var(--drp-r-sm);
  font-weight:500;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
  transition:var(--drp-tr);
  white-space:nowrap
}

.drp-btn--primary{
  background:var(--drp-btn);
  color:#fff;
  border-color:var(--drp-btn)
}

.drp-btn--primary:hover{
  background:var(--drp-btn-h);
  border-color:var(--drp-btn-h);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(201,79,0,.3)
}

.drp-btn--outline{
  background:0 0;
  color:var(--drp-text);
  border-color:var(--drp-border-s)
}

.drp-btn--outline:hover{
  background:var(--drp-bg-muted);
  border-color:var(--drp-accent);
  color:var(--drp-accent)
}

.drp-btn--full{
  width:100%;
  margin-top:.5rem
}

/* === LAYOUT === */
.drp-layout{
  flex:1;
  display:flex;
  max-width:1400px;
  margin:0 auto;
  width:100%
}

/* === SIDEBAR === */
.drp-sidebar{
  width:260px;
  flex-shrink:0;
  background:var(--drp-sidebar);
  border-right:1px solid var(--drp-border);
  min-height:calc(100vh - 60px);
  padding:1.5rem 0
}

.drp-nav{
  list-style:none;
  padding:0;
  margin:0
}

.drp-nav__link{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1.5rem;
  color:var(--drp-text-sec);
  text-decoration:none;
  transition:var(--drp-tr);
  border-left:3px solid transparent
}

.drp-nav__link:hover{
  background:var(--drp-bg-muted);
  color:var(--drp-text)
}

.drp-nav__link.active{
  background:rgba(255,106,0,.08);
  color:var(--drp-accent);
  border-left-color:var(--drp-accent);
  font-weight:600
}

.drp-nav__link .icon{
  width:18px;
  height:18px;
  flex-shrink:0
}

.drp-nav__divider{
  height:1px;
  background:var(--drp-border);
  margin:1rem 0
}

.drp-nav__balance{
  padding:1rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.25rem
}

.drp-nav__balance-label{
  font-size:.75rem;
  color:var(--drp-text-sec);
  text-transform:uppercase;
  letter-spacing:.05em
}

.drp-nav__balance-value{
  font-size:1.25rem;
  font-weight:600;
  color:var(--drp-accent-2)
}

/* === CONTENT === */
.drp-content{
  flex:1;
  padding:2rem;
  min-width:0
}

.drp-breadcrumb-nav{
  margin-bottom:1.5rem
}

.drp-breadcrumb-nav .breadcrumb{
  background:0 0;
  padding:0;
  margin:0;
  font-size:.875rem
}

.drp-breadcrumb-nav .breadcrumb-item{
  color:var(--drp-text-sec)
}

.drp-breadcrumb-nav .breadcrumb-item a{
  color:var(--drp-accent);
  text-decoration:none
}

.drp-breadcrumb-nav .breadcrumb-item a:hover{
  text-decoration:underline
}

.drp-breadcrumb-nav .breadcrumb-item.active{
  color:var(--drp-text)
}

.drp-card{
  background:var(--drp-bg-card);
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-md);
  padding:1.5rem;
  box-shadow:var(--drp-shadow)
}

/* === FOOTER === */
.drp-footer{
  background:var(--drp-footer);
  border-top:1px solid var(--drp-border);
  padding:1.5rem 0;
  margin-top:auto
}

.drp-footer__inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap
}

.drp-footer__brand{
  display:flex;
  align-items:center;
  gap:1rem
}

.drp-footer__copy{
  font-size:.875rem;
  color:var(--drp-text-sec)
}

.drp-footer__links{
  display:flex;
  align-items:center;
  gap:1.5rem
}

.drp-footer__link{
  color:var(--drp-text-sec);
  text-decoration:none;
  font-size:.875rem;
  transition:var(--drp-tr)
}

.drp-footer__link:hover{
  color:var(--drp-accent)
}

/* === PUBLIC PAGES (Login/Signup) - OPTIMIZED === */
.drp-public-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--drp-bg)
}

.drp-public-header{
  text-align:center;
  padding:2rem 1rem 1rem;
  flex-shrink:0
}

.drp-public-content{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  width:100%
}

.drp-public-footer{
  text-align:center;
  padding:1.5rem 1rem;
  border-top:1px solid var(--drp-border);
  font-size:.8rem;
  color:var(--drp-text-sec);
  flex-shrink:0;
  margin-top:auto
}

/* Login/Signup Card - Desktop Optimized */
.drp-login-wrapper{
  width:100%;
  max-width:100%;
  display:flex;
  justify-content:center;
  align-items:center
}

.drp-login-card{
  background:var(--drp-bg-card);
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-lg);
  box-shadow:var(--drp-shadow-lg);
  width:100%;
  max-width:480px
}

.drp-login-card-body{
  padding:2.5rem
}

.drp-login-title{
  color:var(--drp-text);
  font-weight:600;
  font-size:1.5rem;
  margin-bottom:2rem;
  text-align:center
}

/* Form Elements */
.drp-form-group{
  margin-bottom:1.25rem
}

.drp-form-label{
  display:block;
  color:var(--drp-text);
  font-weight:500;
  font-size:.875rem;
  margin-bottom:.5rem
}

.drp-form-control{
  display:block;
  width:100%;
  background:var(--drp-bg-elevated);
  border:1px solid var(--drp-border);
  border-radius:var(--drp-r-sm);
  color:var(--drp-text);
  padding:.75rem 1rem;
  font-size:.95rem;
  transition:all .2s ease
}

.drp-form-control:focus{
  background:var(--drp-bg-elevated);
  border-color:var(--drp-accent);
  color:var(--drp-text);
  box-shadow:0 0 0 3px rgba(255,106,0,.15);
  outline:none
}

.drp-form-control::placeholder{
  color:var(--drp-text-sec);
  opacity:.6
}

.drp-form-control:disabled{
  opacity:.5;
  cursor:not-allowed
}

.drp-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.drp-form-col{
  min-width:0
}

.drp-login-links{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem
}

/* Alert */
.drp-alert{
  border-radius:var(--drp-r-sm);
  font-size:.9rem;
  padding:1rem 1.25rem;
  margin-bottom:1.5rem
}

.drp-alert--warning{
  background-color:rgba(255,193,7,.12);
  border:1px solid rgba(255,193,7,.3);
  color:#fbbf24
}

.drp-alert strong{
  display:block;
  margin-bottom:.25rem;
  font-weight:600
}

.drp-alert small{
  color:var(--drp-text-sec);
  font-size:.85rem;
  display:block
}

/* Top Button */
.drp-top-btn{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:3rem;
  height:3rem;
  background:var(--drp-btn);
  color:#fff;
  border-radius:var(--drp-r-md);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:var(--drp-shadow-lg);
  transition:var(--drp-tr);
  z-index:1000
}

.drp-top-btn:hover{
  background:var(--drp-btn-h);
  transform:translateY(-2px);
  color:#fff
}

/* === BOOTSTRAP OVERRIDES === */
.btn-primary{
  background-color:var(--drp-btn) !important;
  border-color:var(--drp-btn) !important;
  color:#fff !important
}

.btn-primary:hover{
  background-color:var(--drp-btn-h) !important;
  border-color:var(--drp-btn-h) !important
}

.btn-outline-primary{
  color:var(--drp-accent) !important;
  border-color:var(--drp-accent) !important;
  background:0 0 !important
}

.btn-outline-primary:hover{
  background-color:var(--drp-accent) !important;
  border-color:var(--drp-accent) !important;
  color:#fff !important
}

.card{
  background-color:var(--drp-bg-card) !important;
  border:1px solid var(--drp-border) !important;
  color:var(--drp-text) !important
}

.card-header{
  background-color:var(--drp-bg-elevated) !important;
  border-bottom:1px solid var(--drp-border) !important;
  color:var(--drp-text) !important
}

.card-footer{
  background-color:var(--drp-bg-elevated) !important;
  border-top:1px solid var(--drp-border) !important;
  color:var(--drp-text-sec) !important
}

.form-control,.form-select{
  background-color:var(--drp-bg-elevated) !important;
  border:1px solid var(--drp-border) !important;
  color:var(--drp-text) !important
}

.form-control:focus,.form-select:focus{
  background-color:var(--drp-bg-elevated) !important;
  border-color:var(--drp-accent) !important;
  color:var(--drp-text) !important;
  box-shadow:0 0 0 .2rem rgba(255,106,0,.25) !important
}

.form-control::placeholder{
  color:var(--drp-text-sec) !important;
  opacity:.7
}

.form-label{
  color:var(--drp-text) !important
}

/* === RESPONSIVE - OPTIMIZED === */

/* Desktop Large (1200px+) */
@media(min-width:1200px){
  .drp-login-card{
    max-width:500px
  }
  
  .drp-login-card-body{
    padding:3rem
  }
  
  .drp-login-title{
    font-size:1.75rem;
    margin-bottom:2.5rem
  }
}

/* Desktop (992px - 1199px) */
@media(min-width:992px) and (max-width:1199.98px){
  .drp-login-card{
    max-width:480px
  }
  
  .drp-login-card-body{
    padding:2.5rem
  }
}

/* Tablet (768px - 991px) */
@media(min-width:768px) and (max-width:991.98px){
  .drp-content{
    padding:1.5rem
  }
  
  .drp-header__inner{
    padding:0 1rem
  }
  
  .drp-logo__sub{
    display:none
  }
  
  .drp-footer__inner{
    flex-direction:column;
    text-align:center;
    gap:1rem
  }
  
  .drp-footer__links{
    flex-wrap:wrap;
    justify-content:center
  }
  
  .drp-login-card{
    max-width:450px
  }
  
  .drp-login-card-body{
    padding:2rem
  }
  
  .drp-public-content{
    padding:1.5rem 1rem
  }
}

/* Mobile (< 768px) */
@media(max-width:767.98px){
  .drp-header__actions{
    gap:.5rem
  }
  
  .drp-lang-select{
    display:none
  }
  
  .drp-user-name{
    display:none
  }
  
  .drp-content{
    padding:1rem
  }
  
  .drp-card{
    padding:1rem
  }
  
  .drp-login-card-body{
    padding:1.5rem
  }
  
  .drp-login-title{
    font-size:1.25rem;
    margin-bottom:1.5rem
  }
  
  .drp-form-row{
    grid-template-columns:1fr;
    gap:0
  }
  
  .drp-form-group{
    margin-bottom:1rem
  }
  
  .drp-public-container{
    padding:0
  }
  
  .drp-public-header{
    padding:1.5rem 1rem .75rem
  }
  
  .drp-public-content{
    padding:1rem .75rem
  }
  
  .drp-public-footer{
    padding:1rem .75rem
  }
  
  .drp-footer__inner{
    flex-direction:column;
    text-align:center;
    gap:.75rem
  }
}

/* Small Mobile (< 576px) */
@media(max-width:575.98px){
  .drp-login-card{
    max-width:100%;
    border-radius:var(--drp-r-md)
  }
  
  .drp-login-card-body{
    padding:1.25rem
  }
  
  .drp-btn{
    padding:.5rem 1rem;
    font-size:.875rem
  }
}

/* === LIGHT MODE === */
[data-bs-theme="light"] .drp-login-card{
  box-shadow:0 4px 24px rgba(0,0,0,.08)
}

[data-bs-theme="light"] .drp-form-control{
  background:#fff !important;
  border-color:var(--drp-border) !important;
  color:var(--drp-text) !important
}

[data-bs-theme="light"] .drp-form-control:focus{
  background:#fff !important;
  border-color:var(--drp-accent) !important
}

/* === SIGNUP PAGE LOGO === */
.drp-login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.drp-login-logo .drp-logo {
  font-size: 1.5rem;
  justify-content: center;
}

.drp-login-logo .drp-logo__sub {
  display: none;
}

.drp-signup-message {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--drp-text-sec);
}

.drp-signup-message p {
  margin-bottom: 0.5rem;
}