/* /var/www/html/theweddingcamera/public/css/style.css */

/* Import Google Fonts (already in HTML of index.php, but good to have here for reference or if HTML link is removed) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@400;600;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    /* Tailwind's bg-gray-50 is #F9FAFB */
    /* Tailwind's text-gray-800 is #1F2937 */
    /* These are often set directly with Tailwind classes on the body tag in each PHP file */
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

/* --- Consistent Button Styles (complementing Tailwind) --- */
/* These can be used if you need more specific button styling than Tailwind's defaults,
   or as a base that Tailwind utilities can modify.
   The index.php used Tailwind for buttons, which is generally preferred.
   However, if we want global non-Tailwind button styles, they go here.
   For now, we'll rely on Tailwind for buttons as much as possible in the PHP files.
   If specific overrides are needed, they can be added here.
*/

.btn {
    /* This class can be a base if needed, but Tailwind's approach is usually to compose classes */
    /* Example: text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 */
    /* We will primarily use Tailwind classes for buttons directly in HTML */
}

.btn-primary {
    background-color: #B76E79; /* Rose Gold/Dusty Rose - Example Primary from index.php */
    /* color: white; Tailwind: text-white */
}
.btn-primary:hover {
    background-color: #a35f69;
}

.btn-outline {
    background-color: transparent;
    color: #B76E79; 
    border: 2px solid #B76E79;
}
.btn-outline:hover {
    background-color: #B76E79;
    color: white;
}

/* --- Consistent Navbar Styling (if not fully covered by Tailwind on each page) --- */
/* The index.php navbar uses Tailwind bg-gray-800 text-white p-4 shadow-md sticky top-0 z-50 */
/* We will replicate this structure with Tailwind on other pages. */
.app-navbar {
    /* Example: background-color: #1F2937; /* bg-gray-800 */
    /* color: white; */
    /* padding: 1rem; */
    /* box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-md */
}
.navbar-item { /* Custom style from index.php for hover */
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}
.navbar-item:hover {
    background-color: rgba(255,255,255,0.1);
}


/* --- Consistent Section Titles (from index.php) --- */
.section-title {
    font-family: 'Playfair Display', serif;
    /* Tailwind: text-3xl md:text-4xl font-bold mb-4 text-gray-700 or #333 */
    font-size: 2.25rem; /* Corresponds to text-3xl */
    font-weight: 700;
    margin-bottom: 1rem; 
    color: #333;
}
@media (min-width: 768px) { /* md breakpoint */
    .section-title {
        font-size: 2.5rem; /* Corresponds to text-4xl */
    }
}

.section-subtitle {
    /* Tailwind: text-lg text-gray-600 mb-12 md:mb-16 max-w-3xl mx-auto */
    font-size: 1.125rem; /* text-lg */
    color: #555; 
    margin-bottom: 2.5rem; 
    max-width: 64rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}


/* --- Consistent Footer Styling (from index.php) --- */
/* The index.php footer uses Tailwind bg-gray-800 text-white py-8 text-center */
.app-footer {
    /* Example: background-color: #1F2937; /* bg-gray-800 */
    /* color: white; */
    /* padding-top: 2rem; padding-bottom: 2rem; */
    /* text-align: center; */
}

/* --- General Page Container (if needed beyond Tailwind's container) --- */
.page-container {
    /* Example: max-width: 1200px; margin-left: auto; margin-right: auto; padding: 1.5rem; */
    /* Usually handled by <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8"> */
}

/* --- Form Styling (General reset/base for consistency if needed) --- */
/* We will primarily use Tailwind for form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    /* Example base: border: 1px solid #D1D5DB; /* Tailwind: border-gray-300 */
    /* border-radius: 0.375rem; /* Tailwind: rounded-md */
    /* padding: 0.5rem 0.75rem; /* Tailwind: px-3 py-2 */
    /* width: 100%; */
    /* box-sizing: border-box; */
}

/* Specific styles for messages (can be adapted from various pages) */
.message { 
    padding: 0.75rem 1rem; /* py-3 px-4 */
    margin-bottom: 1rem; /* mb-4 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.95em; 
    border: 1px solid transparent;
}
.message.success { 
    background-color: #D1FAE5; /* Tailwind: bg-green-100 */
    color: #065F46; /* Tailwind: text-green-700 */
    border-color: #A7F3D0; /* Tailwind: border-green-300 */
}
.message.error { 
    background-color: #FEE2E2; /* Tailwind: bg-red-100 */
    color: #991B1B; /* Tailwind: text-red-700 */
    border-color: #FECACA; /* Tailwind: border-red-300 */
}



nav.bg-gray-800.text-white.p-4.shadow-md.sticky.top-0.z-1000 {
  z-index: 9999 !important;
}

/* In public/css/style.css */
@media (max-width: 767px) { /* Adjust breakpoint as needed */
    .media-item { /* Or a more specific selector if needed */
        /* Try to reset properties that might cause layering issues on mobile */
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        z-index: 1 !important; /* Ensure it's low within its parent */
    }

    /* If buttons inside are the issue, you might target them too */
    .media-item .media-actions button {
        position: relative !important; /* If they were absolute/fixed */
        z-index: auto !important;
    }
}

nav.bg-gray-800 {
      position: sticky;
      top: 0;
      padding: 1rem;
      background-color: rgb(31, 41, 55);
      z-index: 9999 ; /* Add this line */
      /* other styles */
    }