/* assets/css/my-wardrobe.css */

/* Example: Ensuring images within wardrobe cards are consistent */
#wardrobe-items-display img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below images */
}

/* Add any other custom styles here */
.rounded-element {
    border-radius: 0.5rem; /* Consistent rounded corners */
}

.perspective-1000 {
    perspective: 1000px;
}

/* --- Wardrobe Door Styling and Animation Base --- */
/* Consolidated all door-related transitions and base styles here */
.wardrobe-door {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 2.5s ease-in-out; 

    background: linear-gradient(135deg, #f0e0d6 25%, #e6dada 25%, #e6dada 50%, #f0e0d6 50%, #f0e0d6 75%, #e6dada 75%, #e6dada 100%);
    background-size: 10px 10px;
    background-color: #d4c2b8;
    border: 2px solid #c9a0dc;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.2);
}

/* Ensure transform-origin is at the hinge side for the base doors */
.left-door {
    transform-origin: left center;
    overflow-y: auto;
    border-left: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width: 500px) {
    .left-door {
        justify-content: end;
    }
}

.right-door {
    transform-origin: right center;
}

#tagline {
    width: 400px;
    height: 400px;
    object-fit: cover;
}

@media(max-width: 500px) {
    #tagline {
        width: 200px;
        height: 200px;
    }
}

/* --- Open Door States with Realistic Movement --- */
.open-left-door {
    /* Rotate outwards and translate slightly to clear the frame */
    /*transform: rotateY(-100deg) translateX(-30px); */
    transform: rotateY(-100deg); /* opens like a left door */
    transition: transform 1s ease-in-out;
}

.open-right-door {
    /* Rotate outwards and translate slightly to clear the frame */
    /*transform: rotateY(100deg) translateX(30px); */
    transform: rotateY(100deg); /* opens like a right door */
    transition: transform 1s ease-in-out;
}

/* --- Wardrobe Interior Styling --- */

/* Scrollbar styling for interior */
#wardrobe-interior::-webkit-scrollbar {
    width: 8px;
}

#wardrobe-interior::-webkit-scrollbar-track {
    background: #e0d9d9; /* Lighter track for girly look */
    border-radius: 10px;
}

#wardrobe-interior::-webkit-scrollbar-thumb {
    background: #c9a0dc; /* Purple thumb */
    border-radius: 10px;
}

#wardrobe-interior::-webkit-scrollbar-thumb:hover {
    background: #b28bc4; /* Darker purple on hover */
}

/* --- Party Popper CSS --- */
.party-popper-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Confine confetti within the wardrobe visual */
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 99; /* Above interior, below doors when closed */
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #FFD700; /* Default, will be overridden by JS */
    border-radius: 50%;
    opacity: 0;
    transform: translateY(0) rotate(0deg);
    animation: confetti-fall 2.5s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotate(0deg) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translateY(0) rotate(20deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(600px) rotate(720deg) scale(0.2);
    }
}

/* --- Drawer & Shelf Styles (if you use these classes for actual elements) --- */
.shelf, .drawer {
    background: #f2f2f2; /* Keeping light background */
    border: 1px solid #d2c9e0; /* Soft purple border */
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/*---------------himanshi-------------------------*/
.shadow-inner {
    background-color: #d6a76d;
}

.wardrobe-shelf {
  background: #fff6eb;
  border: 2px solid #d0a679;
  border-radius: 4px;
  padding: 15px;
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.15),
    0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
}

.wardrobe-shelf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(to top, #b08968, transparent);
}

.wardrobe-shelf h4 {
  font-size: 1.2rem;
  color: #5a3e1b;
  margin-bottom: 10px;
}

.items-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wardrobe-shelf svg {
  margin-bottom: 8px;
}

/*------------------------ new wardrobe--------------------------*/
/* General Body and Wardrobe Structure (same as before) */

.wardrobe {
    position: relative;
    width: 600px;
    height: 700px;
    transform-style: preserve-3d;
    /*transform: rotateX(-15deg) rotateY(15deg);*/
    pointer-events: none;
}

@media (max-width: 575px) {
    .wardrobe {
        width: 460px !important;
    }
}

.wardrobe-main-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f0f0f0;
    font-family: sans-serif;
    perspective: 1200px;
}

@media(max-width: 991px) {
    .wardrobe-main-div {
        flex-direction: column;
        height: 100%;
    }
}

.wardrobe > div {
    /*position: absolute;*/
    /*background-color: #a87e60;*/
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.wardrobe-back {
    width: 100%;
    height: 100%;
    transform: translateZ(-30px);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    background: #1F1F1F;
}

.wardrobe-top, .wardrobe-bottom {
    width: 100%;
    height: 30px;
    transform: rotateX(-90deg) translateZ(15px);
    transform-origin: top;
}

@media(max-width: 992px) {
    .wardrobe-top, .wardrobe-bottom {
        display: none;
    }
}

.wardrobe-top { 
    top: 0; 
    box-shadow: none !important;
}
.wardrobe-bottom { 
    bottom: 0; 
    transform: rotateX(90deg) translateZ(15px); 
    box-shadow: none !important;
}

.wardrobe-side {
    width: 30px;
    height: 100%;
    transform: rotateY(-90deg) translateZ(15px);
    transform-origin: left;
    box-shadow: none !important;
}

.left-side { left: 0; }

@ media (max-width: 992px){
   .left-side {
       display: none !important;
   } 
}

.right-side { right: 0; transform: rotateY(90deg) translateZ(15px); }

@ media (max-width: 992px){
   .right-side {
       display: none;
   } 
}

/* Wardrobe Interior and Compartments */
.wardrobe-interior {
    position: absolute;
    top: 30px;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background-color: #d1b4a0;
    transform: translateZ(-20px);
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    gap: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    background: #6F6F6F;
}

.compartment {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 10px;
}

.left-compartment {
    width: 60%;
    padding: 10px;
    cursor: pointer;
}

.right-compartment {
    width: 40%;
    padding: 10px;
    cursor: pointer;
}

.shelf.shelf-divider {
    width: 100%;
    height: 8px;
    background-color: #dbdfe1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* --- Left Compartment Styles --- */
.hanging-section {
    position: relative;
    height: 200px;
    background-color: transparent;
}

.hanging-rod {
    position: absolute;
    top: 15px;
    left: 5%;
    width: 90%;
    height: 5px;
    background-color: #666;
    border-radius: 2.5px;
}

.hanging-clothes {
    width: 100%;
}

.hanger {
    width: 50px;
    height: 10px;
    background-color: #c9c9c9;
    border-radius: 5px;
    position: relative;
    top: 0;
}
.hanger::before {
    content: '';
    position: absolute;
    top: -10px;
    left: calc(50% - 2.5px);
    width: 5px;
    height: 10px;
    background-color: #c9c9c9;
    border-radius: 5px 5px 0 0;
}

.dress, .outerwear {
    width: 60px;
    height: 150px;
    background-color: #e0e0e0;
    border-radius: 5px 5px 20px 20px;
    position: relative;
    transform: skewX(-5deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.dress-1 { background-color: #e3a5c7; }
.dress-2 { background-color: #5d4a66; }
.outerwear-1 { background-color: #8c7853; }
.outerwear-2 { background-color: #a0978f; }

.folded-items-section {
    height: 100px;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.folded-items-section .fold-dress-top {
    height: 100px !important;
}

.folded-items-section .fold-bottom {
    height: 145px !important;
}

.folded-stack {
    width: 30%;
    height: 80px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.stack-1 { background-color: #8c6a51; }
.stack-2 { background-color: #d1b4a0; }
.stack-3 { background-color: #e3e1d9; }
.stack-4 { background-color: #f0f0f0; }
.stack-5 { background-color: #a0978f; }
.stack-6 { background-color: #e3a5c7; }

.shoes-section-left {
    height: 60px;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.shoe-pair {
    width: 25%;
    height: 40px;
    background-color: #c9c9c9;
    border-radius: 10px;
}

/* --- Right Compartment Styles --- */
.section-title {
    color: #555;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}

.accessories-section {
    height: 100px;
    background-color: transparent;
}
.accessory-tray {
    width: 100%;
    height: 90px;
    background-color: #1F1F1F;
    border: 2px solid #181717;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.item {
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
.item.scarf { background-color: #e3e1d9; border-radius: 5px; transform: rotate(15deg); }
.item.hat { background-color: #8c7853; border-radius: 50% 50% 0 0; height: 30px; width: 40px; }
.item.sunglasses { background-color: transparent; border: 2px solid #4b4b4b; border-radius: 5px; height: 15px; width: 40px; }

.swimsuit-section {
    height: 80px;
    background-color: transparent;
}

.swimsuit-section .swimsuit{
    height: 80px;
    width: 100%;
    object-fit: cover;
}

.drawer {
    width: 90%;
    height: 60px;
    background-color: #a87e60;
    margin: auto;
    border: 2px solid #8c6a51;
    display: flex;
    justify-content: center;
    align-items: center;
}
.drawer-handle {
    width: 40px;
    height: 5px;
    background-color: #4b4b4b;
    border-radius: 5px;
}

.bags-section {
    height: 80px;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.bag {
    width: 40%;
    height: 50px;
    background-color: #a0978f;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.bag-1 { background-color: #b89379; }
.bag-2 { background-color: #5d4a66; }

.undergarments-section {
    height: 100px;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.storage-box {
    width: 40%;
    height: 60px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.box-1 { background-color: #f0f0f0; }
.box-2 { background-color: #e3e1d9; }

.bottom-wear-section {
    height: 80px;
    background-color: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.folded-item {
    width: 40%;
    height: 50px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.pants { background-color: #5d4a66; }
.skirts { background-color: #e3a5c7; }

.shoes-section-right {
    height: 80px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.shoe-pair-4 {
    width: 50%;
    height: 30px;
    background-color: #a87e60;
    border-radius: 10px;
}
.other-box {
    width: 60%;
    height: 20px;
    background-color: #b89379;
    border-radius: 5px;
}

/* Door and Handle styles (same as before) */
.door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: rotateY(0deg);
  z-index: 10;
  overflow: hidden;
  pointer-events: auto;

  /* Black cloudy marble-like texture */
  background: url("https://girlsflavour.com/wp-content/uploads/wardrobe/door.png") center/cover no-repeat;

  border: 5px solid #595959;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05),
              0 5px 25px rgba(0, 0, 0, 0.7);
}



/* Sparkle overlay */
.door::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background:
    /* Top sparkle (dense) */
    url("https://www.transparenttextures.com/patterns/stardust.png") repeat,
    /* Middle sparkle (very light, using gradient mask trick) */
    linear-gradient(to bottom, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.02) 70%),
    /* Bottom sparkle (dense again) */
    url("https://www.transparenttextures.com/patterns/stardust.png") repeat;

  background-blend-mode: screen;
  opacity: 0.35; 
  pointer-events: none;
}

.right-door {
    left: 50%;
    transform-origin: right;
    border-right: 0 !important;
}

.door-handle {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 50px;
    background: linear-gradient(to bottom, #E0E0E0, #C0C0C0, #A9A9A9);
    border-radius: 1px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.wardrobe-tagline {
  position: absolute;
  top: 15%;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: 'Inter', sans-serif;
  color: #C0C0C0; 
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 20;   /* above doors */
  transition: opacity 0.5s ease;
  text-align: center;
  color: transparent;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
  transition: opacity 0.5s ease;
  z-index: 20; 
}

.wardrobe-tagline h6 {
    font-style: italic;
    font-size: 6.5rem;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    z-index: 20; 
    font-style: italic;
}

.wardrobe-tagline p{
    font-size: 2.5rem;
    text-transform: capitalize;
    color: #fff;
    z-index: 20; 
}


/* When either door is open → hide */
.left-door.door-open ~ .wardrobe-tagline,
.right-door.door-open ~ .wardrobe-tagline {
  opacity: 0;
}


.left-door .door-handle { right: 10px; }
.right-door .door-handle { left: 10px; }

.door-open.left-door { transform: rotateY(-110deg); }
.door-open.right-door { transform: rotateY(110deg); }

.inner-door-content {
    position: absolute;
    top: 40px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    overflow-y: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transform: scaleX(-1); /* reverse the door flip effect */
    transform: none; /* make images normal when doors are open */
}

.door-product {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 6px;
    text-align: center;
    width: 60px;
}

.accessory-tray img {
    height: 130px !important;
    width: 180px;
}

.bags-section img {
    width: 100%;
}

.other-section img {
    width: 100px;
}

.door-open .group {
    transform: scaleX(-1); /* reverse the door flip effect */
}

.door-open .group:hover {
    transform: scaleX(-1); /* reverse the door flip effect */
}

.door-open .group img {
    height: 8rem;
}

.door h4 {
    transform: scaleX(-1);
    color: #fff;
}

.door p {
    transform: scaleX(1);
    color: #fff;
}
/*-------------------------*/

.clickable-section {
    cursor: pointer;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
    transform: translateZ(11px) !important;
}

.login {
    color : #e31979;
}

.login-btn {
    background-color: #e31979;
}

.login-btn:hover {
    background-color: #111;
}