/*
|--------------------------------------------------------------------------
| Custom CSS Styles Extracted from HTML for Header Components
|--------------------------------------------------------------------------
| These styles implement the Meesho-inspired design for the header's search,
| right-side links, and bottom navigation.
*/

/* --- MEESHO STYLE HEADER CSS --- */

/* Search Bar Styling */
.meesho-search-container {
    flex-grow: 1;
    max-width: 600px; /* Limit width on large screens */
    margin: 0 20px;
}

/* FIX: Make the form the reference point for the absolute icon */
.meesho-search-container form {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.meesho-search-input {
    width: 100%;
    height: 45px;
    border: 1px solid #999;
    border-radius: 4px;
    padding-left: 45px; /* Space for icon */
    padding-right: 15px;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease;
}
.meesho-search-input:focus {
    border-color: #f43397; /* Meesho Pink/Purple brand color */
}

/* FIX: Vertical Centering for the Icon */
.meesho-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%); /* Perfectly center vertically */
    color: #999;
    width: 20px;
    height: 20px;
    pointer-events: none; /* Allows clicking through the icon to the input */
    z-index: 10;
}

/* Right Side Links */
.header__right--links {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header__text-link {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.header__text-link:hover {
    color: #f43397;
}

/* --- Button Style for Request Call Back --- */
.header__text-link.btn-request {
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.header__text-link.btn-request:hover {
    border-color: #f43397;
    background-color: #fff0f5; /* Light pink background on hover */
    color: #f43397;
}

.header__divider {
    height: 20px;
    width: 1px;
    background-color: #ccc;
}

/* Profile & Cart Icons (Icon Top, Text Bottom) */
.header__icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    line-height: 1.2;
    position: relative;
}
.header__icon-item svg {
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    stroke-width: 2;
}
.header__icon-item:hover {
    color: #f43397;
}
.header__icon-item:hover svg {
    stroke: #f43397;
}

/* Bottom Nav Clean Style WITH ICONS */
.header__bottom {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 0;
}
.meesho-nav-list {
    display: flex;
    justify-content: space-between; /* Distribute evenly */
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto; /* Scroll on mobile */
}
.meesho-nav-item {
    margin: 0;
    padding: 12px 15px;
}
.meesho-nav-link {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    display: flex;      /* Flex for icon alignment */
    align-items: center;
    gap: 8px;           /* Space between icon and text */
}
.meesho-nav-link svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    color: #555;
}
.meesho-nav-link:hover {
    color: #f43397;
}
.meesho-nav-link:hover svg {
    stroke: #f43397;
    color: #f43397;
}
.meesho-nav-item:hover {
    border-bottom: 2px solid #f43397;
    margin-bottom: -2px; /* Prevent jump */
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .meesho-search-container {
        display: none; /* Hide on mobile header */
    }
    .header__right--links .header__text-link, .header__divider {
        display: none; /* Hide extra links on mobile */
    }
}


/*
|--------------------------------------------------------------------------
| Footer Styles (Appended from second request)
|--------------------------------------------------------------------------
*/

/* Custom Styles to match the Screenshot exactly */
.footer__section.bg__black {
    background-color: #000;
    color: #b3b3b3; /* Light grey text */
    padding-top: 60px;
    padding-bottom: 30px;
    font-family: sans-serif;
}

/* Headings */
.footer__widget--title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid #ff9900; /* The Orange/Gold underline */
}

/* Logo Area */
.footer-logo-text {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    display: block;
}
.footer-logo-text span {
    color: #ff9900; /* Orange accent in logo */
}
.footer-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
    margin-bottom: 15px;
    display: block;
}
.footer-divider {
    border-top: 1px solid #333;
    margin: 15px 0;
}

/* Links List */
.footer__widget--menu__list {
    margin-bottom: 8px;
    list-style: none;
}
.footer__widget--menu {
    padding-left: 0;
}
.footer__widget--menu__text {
    color: #b3b3b3;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}
.footer__widget--menu__text:hover {
    color: #fff;
    padding-left: 5px; 
}
/* The chevron icon > before links */
.footer__widget--menu__text::before {
    content: "›";
    font-size: 18px;
    line-height: 1;
    margin-right: 8px;
    color: #777;
}

/* Special Highlight for Submit Resume */
.link-highlight-blue {
    color: #3b82f6 !important; /* Bright Blue */
    font-weight: 600;
}

/* NEW STYLES FOR ADDRESS SECTION */
.footer-contact-block {
    margin-top: 25px;
    border-top: 1px dashed #333;
    padding-top: 20px;
}
.footer-contact-country {
    color: #fff;
    font-size: 14px; /* Slightly smaller to fit side by side */
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #333; /* Add visual separation */
    padding-bottom: 3px;
    margin-bottom: 8px;
}
.footer-contact-text {
    font-size: 12px; /* Reduced slightly for better fit in columns */
    color: #ccc;
    margin-bottom: 0; /* Remove bottom margin since it's in a column */
    line-height: 1.5;
}
.footer-contact-text strong {
    color: #b3b3b3;
}
.footer-contact-text a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block; /* Helps with breaking long emails */
    word-break: break-word; /* Ensure long emails don't overflow */
}
.footer-contact-text a:hover {
    color: #ff9900;
}

/* Bottom Bar */
.footer__bottom {
    border-top: 1px solid #222;
    margin-top: 40px;
    padding-top: 20px;
}
.copyright__content {
    font-size: 13px;
    color: #999;
}

/* Social Icons in Bottom Right */
.social__shear {
    list-style: none;
    padding: 0;
    margin: 0;
}
.social__shear--list {
    margin-left: 10px;
}
.social__shear--list__icon {
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s;
}
.social__shear--list__icon:hover {
    background-color: #fff;
    color: #000;
}
.social__shear--list__icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}