/* ==========================================================================
   COUPLEWALLS THEME & DESIGN SYSTEM
   ========================================================================== */

:root {
  /* --- 1. Core Theme Colors (Dark Mode) --- */
  /* This creates a layered, professional dark look, not just flat black. */
  --bg-dark: #121212;         /* The deepest background color for the page */
  --card-dark: #1E1E1E;       /* A slightly lighter color for cards and surfaces */
  --divider-dark: #2A2A2A;    /* For subtle borders and dividers */
  --hover-dark: #2C2C2C;      /* A color for subtle hover effects on cards */

  /* --- 2. Text Colors --- */
  /* A good theme needs a clear text hierarchy. */
  --text-light: #E0E0E0;      /* Main text color - slightly off-white is easier on the eyes */
  --text-muted: #888888;      /* For secondary text like timestamps or subtitles */
  --text-dark: #121212;       /* For text on light-colored buttons */

  /* --- 3. Accent & Brand Colors (The "CoupleWalls" Theme) --- */
  /* These colors are chosen to feel romantic, warm, and modern. */
  
  --accent-pink: #FF6B6B;     /* A vibrant, warm pink for primary actions (like download buttons) */
  --accent-pink-hover: #e65a5a; /* A slightly darker version for hover states */
  
  --accent-lavender: #A06CD5; /* A soft, romantic purple for secondary highlights or links */
  --accent-lavender-hover: #8e5cc2;
  
  --accent-gold: #FFD700;     /* A touch of gold for special highlights or premium features */

  /* --- 4. UI Feedback Colors --- */
  /* Standard colors for alerts, notifications, etc. */
  --success: #28a745;         /* For successful actions */
  --warning: #ffc107;         /* For warnings or alerts */
  --danger: #dc3545;          /* For errors or delete actions */

  /* --- 5. Sizing & Spacing --- */
  /* Using variables for spacing ensures a consistent rhythm throughout your site. */
  --spacing-base: 8px;
  --spacing-sm: var(--spacing-base);      /* 8px */
  --spacing-md: calc(var(--spacing-base) * 2); /* 16px */
  --spacing-lg: calc(var(--spacing-base) * 3); /* 24px */
  --spacing-xl: calc(var(--spacing-base) * 4); /* 32px */

  /* --- 6. Border Radius --- */
  /* Using a variable for border-radius makes your design consistent. */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;    /* Perfect for cards */

  /* --- 7. Typography --- */
  --font-main: 'Poppins', sans-serif;
  --font-size-base: 16px;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* --- 8. Shadows & Effects --- */
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.4);
  --transition-fast: 0.2s ease-in-out;
}
*{
    font-family: 'Poppins', sans-serif;
}
/* font */
.poppins-regular{
    font-weight: 400; 
}

.poppins-medium{
    font-weight: 500; 
}

.poppins-black{
    font-weight: 900;
}
.poppins-light{
     font-weight: 100;
}
.nre-serchbar{
    color: var(--text-dark);
    font-size: small;
    
}
.nre-serchbar::placeholder{
    color: var(--text-dark);
    box-shadow: 0;
    font-size: small;
}
.nre-serchbar:focus{
    color: var(--text-dark);
    box-shadow: 0;
    font-size: small;
}
.nre-body{
    background-color: var(--bg-dark);
}

.card-main{
    background-color: var(--card-dark);
}

/* --- Custom Wallpaper Card Styles --- */

.wallpaper-card {
    background-color: #1E1E1E; /* Example dark color */
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #2A2A2A;
    transition: transform 0.2s ease-in-out;
}
.wallpaper-card:hover {
    transform: scale(1.02);
}

/* This is the container that allows for absolute positioning */
.wallpaper-images {
    position: relative; /* This is the most important property */
    height: 250px;
    display: flex; /* We can still use flexbox for centering */
    justify-content: center;
    align-items: center;
    background-color: #111;
}

/* Style for BOTH images */
.wallpaper-img {
    position: absolute; /* This lets us overlap them */
    height: 85%;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease-in-out;
}

/* Position for the front image */
.wallpaper-img-a {
    transform: translateX(-25%) rotate(-8deg);
    z-index: 2; /* z-index determines the stacking order (higher is on top) */
}

/* Position for the back image */
.wallpaper-img-b {
    transform: translateX(25%) rotate(8deg);
    z-index: 1;
}

/* A cool hover effect for the images */
.wallpaper-card:hover .wallpaper-img-a {
    transform: translateX(-30%) rotate(-10deg) scale(1.05);
}
.wallpaper-card:hover .wallpaper-img-b {
    transform: translateX(30%) rotate(10deg) scale(1.05);
}

/* Style for the title and button area */
.wallpaper-info {
    padding: 24px;
    text-align: center;
}

.wallpaper-title {
    font-weight: 500;
    color: #E0E0E0;
    margin-bottom: 16px;
}

.btn-view {
    background-color: #FF6B6B;
    color: #121212;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 8px 24px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.btn-view:hover {
    background-color: #e65a5a;
    color: #121212;
}