@charset "UTF-8";

@font-face {
    font-family: 'LEMON MILK Pro FTR';
    src: url('/media/fonts/LEMONMILKProFTR-Regular.eot');
    src: url('/media/fonts/LEMONMILKProFTR-Regular.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/LEMONMILKProFTR-Regular.woff2') format('woff2'),
        url('/media/fonts/LEMONMILKProFTR-Regular.woff') format('woff'),
        url('/media/fonts/LEMONMILKProFTR-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'LEMON MILK Pro FTR';
    src: url('/media/fonts/LEMONMILKProFTR-Bold.eot');
    src: url('/media/fonts/LEMONMILKProFTR-Bold.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/LEMONMILKProFTR-Bold.woff2') format('woff2'),
        url('/media/fonts/LEMONMILKProFTR-Bold.woff') format('woff'),
        url('/media/fonts/LEMONMILKProFTR-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
      font-family: 'LEMON MILK Pro FTR';
      src: url('/media/fonts/LEMONMILKProFTR-Medium.eot');
      src: url('/media/fonts/LEMONMILKProFTR-Medium.eot?#iefix') format('embedded-opentype'),
          url('/media/fonts/LEMONMILKProFTR-Medium.woff2') format('woff2'),
          url('/media/fonts/LEMONMILKProFTR-Medium.woff') format('woff'),
          url('/media/fonts/LEMONMILKProFTR-Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
  }



/* BODY */
* {
    outline: none !important;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    color: #000;
    font-size: .85rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    background: #FFF;
  }
  
  a {
    text-decoration: none !important;
    color: #000;
  }
  
  .bgwhite {
    background-color: #ffffff !important;
  }

  .white {
    color: #fff;
  }


  .layout {
      background-color: #E5E5E5;
      max-width: 414px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-items: center;
  }


  .bit_title {
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 90%; /* 0px */
    letter-spacing: -1.6px;
}

.profile-info {
    display: flex;
    align-items: center;
}

.profile_user {
    font-family: "LEMON MILK Pro FTR", sans-serif;
    color: #ffffff;
    text-align: center;
    font-size: 2.3rem;
    padding: 0px;
    font-style: normal;
    font-weight: normal;
    line-height: 10px;
}

.profile-age {
    font-family: "LEMON MILK Pro FTR", sans-serif;
    color: #ffffffaa;
    text-align: center;
    padding-left: 5px;
    font-size: 2.3rem;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
}

.profile-online{
    line-height: 2rem;
    padding-left: 5px;
}

.profile_last_seen {
    font-family: "LEMON MILK Pro FTR", sans-serif;
    color: #ffffff;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
}

.star-background {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    color: black;
    z-index: 2;  
}

.star-background::before {
    content: "\f005";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: FontAwesome;
    font-size: 44px;
    color: #fff;
    z-index: 1;  
}



.star-rating {
    direction: ltr;
    display: inline-block;
}

.fa-star {
    color: #ffffff;
    padding: 0 1px;
}

.fa-star.checked {
    color: #ffc107;
}

.profile_stats_numbers {
    color: #fff;
    text-align: center;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}

.profile_stats_text {
    color: #fff;
    text-align: center;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: .7rem;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    letter-spacing: -0.32px;
    text-transform: uppercase;
}

.profile_bg {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0));
    height: 87px;
}

.profile_menu {
    color: #000;
    text-align: center;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase !important;
}

.profile_title {
    color: #000;
    text-align: left;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.profile-link-value {
    color: #000;
    text-decoration: underline;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}
.profile-link-value:hover {
    color: #00A4F0;
    text-decoration: underline;
}
.profile-link-value span {
    text-decoration: inherit;
    color: inherit;
}

/* Profile modal buttons */
.profile-btn-save {
    background: #000000;
    color: #FFFFFF;
    border: none;
    border-radius: 0;
    padding: 12px 20px;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
}
.profile-btn-save:hover {
    background: #333333;
    color: #FFFFFF;
}

.profile-btn-cancel {
    background: #FFFFFF;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0;
    padding: 12px 20px;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
}
.profile-btn-cancel:hover {
    background: #f0f0f0;
    color: #000000;
}

/* Modal footer for profile modals */
.profile-modal-footer {
    display: flex;
    gap: 0;
    padding: 0;
    border-top: none;
}
.profile-modal-footer .profile-btn-cancel {
    flex: 1;
}
.profile-modal-footer .profile-btn-save {
    flex: 1;
}
.profile-modal-footer.single-button {
    display: block;
}
.profile-modal-footer.single-button .profile-btn-save {
    width: 100%;
}

.profile-custom-badge {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    text-align: center;
    width: auto;
    display: inline-block;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    min-width: 60px;
}

/* Photo Grid - Square photos with 2px padding */
.photo-grid-item {
    padding: 2px !important;
}

.photo-grid-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio - square */
    overflow: hidden;
    background: #f0f0f0;
}

.photo-grid-wrapper > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.photo-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Photo Edit Container - Same style as like */
.photo-edit-container {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.photo-edit-container a {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    padding: 4px 8px;
    transition: background 0.2s;
    text-decoration: none;
}

.photo-edit-container a:hover {
    background: rgba(0, 0, 0, 0.7);
}

.photo-edit-container i {
    color: white;
    font-size: 14px;
}

/* Photo Like Container */
.photo-like-container {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 10;
}

.photo-like-container a {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    padding: 4px 8px;
    transition: background 0.2s;
}

.photo-like-container a:hover {
    background: rgba(0, 0, 0, 0.7);
}

.photo-like-container i {
    color: white;
    font-size: 14px;
}

.photo-like-container .likes-count {
    color: white;
    font-size: 12px;
    font-weight: 500;
}

/* Add Photo Button - Material Symbols Circle Icon */
.add-photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio - square */
    position: relative;
    background: #FFF;
    transition: background 0.3s ease;
}

.add-photo-btn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #000;
    transition: all 0.3s ease;
}

.add-photo-btn-large span {
    font-size: 80px;
}

.add-photo-btn:hover {
    background: #f8f8f8;
}

.add-photo-btn:hover span {
    transform: translate(-50%, -50%) scale(1.1);
    color: #000;
}

/* Upload Progress Overlay */
#upload-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-progress-spinner {
    text-align: center;
    color: white;
}

.upload-progress-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

.upload-progress-text {
    font-size: 18px;
    font-weight: 500;
    color: white;
    margin-top: 10px;
}

/* Language and Interest badges (pills) */
.language-badge, .interest-badge {
    display: inline-block;
    background-color: #eee;
    color: #000;
    font-size: 11px;
    font-weight: normal;
    padding: 8px;
    margin-bottom: 8px;
    margin-right: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.language-badge.checked {
    background-color: #00A4F0;
    color: #000;
}

.language-badge img {
    padding-right: 10px;
}

.interest-badge i {
    padding-right: 10px;
}

.pill-input {
    display: none;
}

/* Permission pills for photo settings */
.permission-pill {
    display: inline-block;
    padding: 10px 16px;
    margin: 4px;
    background: #FFFFFF;
    border: 2px solid #000000;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
}

.permission-pill input {
    display: none;
}

.permission-pill:hover {
    background: #f0f0f0;
}

.permission-pill.active {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
}

.profile-custom-badge-rt {
    background-color: rgb(255, 217, 0);
    padding: 5px 10px;
    text-align: center;
    width: auto;
    display: inline-block;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    min-width: 60px;
}



.medium {
    font-weight: 500;
}

.thumbnail {
    width: 115px;
    height: 80px;
    object-fit: cover;
}

.interest_pill {
    display: inline-flex;
    padding: 6px 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.32px;
}


/* Curved Bottom Navbar Container */
.navbar-curved-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 101px;
    width: 100%;
    pointer-events: none;
}

/* Combined SVG with gradient + white navbar */
.navbar-combined-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 101px;
    pointer-events: none;
    filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.1));
}

/* Center Plus Button - transparent bg, large clickable area */
.center-plus-button {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.center-plus-button:hover i {
    transform: scale(1.1);
}

.center-plus-button i {
    color: white;
    transition: transform 0.3s ease;
}

/* Navigation Icons Container */
.navbar-icons {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 30px;
    z-index: 5;
}

.nav-spacer {
    width: 60px;
}

.bottom-nav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.2s ease;
}

.icon-img {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg);
    opacity: 0.5;
    transition: all 0.2s ease;
}

.bottom-nav-icon.active .icon-img {
    filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(2670%) hue-rotate(201deg) brightness(101%) contrast(101%);
    opacity: 1;
    transform: scale(1.1);
}

/* Profile avatar in navbar */
.profile-avatar-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.bottom-nav-icon.active .profile-avatar-nav {
    border-color: #4285F4;
    transform: scale(1.1);
}

/* Friends icon (FontAwesome) */
.bottom-nav-icon i {
    color: rgba(100, 100, 100, 0.6);
    transition: all 0.2s ease;
}

.bottom-nav-icon.active i {
    color: #4285F4;
    transform: scale(1.1);
}

/* Bottom navbar - fixed positioning (for old style fallback) */
.navbar.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0;
    height: 60px;
}

.bottom-link {
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}
  
.bottom-link.active {
    color: #fff !important;
}

.bottom-link .bottom-icon {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: all 0.2s ease;
}

.bottom-link.active .bottom-icon {
    opacity: 1;
    transform: scale(1.1);
}   

.bottom-plus {
    color: #00A4F0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-plus.active {
    color: #ed1b36 !important;
}

/* Curved navbar center button */
.bottom-plus-curved {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.plus-button-curved {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6478FF 0%, #9650FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(100, 80, 255, 0.4);
    transition: all 0.3s ease;
}

.plus-button-curved:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(100, 80, 255, 0.6);
}

/* Notification badges */
.badge-notification {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FF3B30;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.95);
}

/* Body padding to prevent content from hiding under fixed navbar */
body:not(.no-bottom-nav) {
    padding-bottom: 100px !important;
}

/* Override for specific pages (chat, etc) */
body.no-bottom-nav {
    padding-bottom: 0 !important;
}

/* Ensure main content doesn't overlap with bottom nav */


/* Profile Edit Sections - Bottom Sheet Style */
.profile-edit-section {
    padding: 16px 0;
    border-bottom: 1px solid #e4dfdf;
}

.profile-edit-section:last-child {
    border-bottom: none;
}

.profile-edit-label {
    font-family: 'Avenir Next', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #263238;
    margin-bottom: 10px;
}

.profile-edit-selector {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e4dfdf;
    border-radius: 8px;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    color: #263238;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-edit-selector:hover {
    background: #e9ecef;
    border-color: #00A4F0;
}

.profile-edit-selector i {
    color: #999;
}

/* Selector list in nested bottom sheet */
.selector-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px;
}

.selector-item {
    display: inline-block;
    padding: 8px;
    margin-bottom: 8px;
    margin-right: 5px;
    background: #eee;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000;
}

.selector-item:hover {
    background: #ddd;
}

.selector-item.active {
    background: #000000;
    color: #FFFFFF;
}

.icon-with-badge {
    position: relative;
}

.badge-custom {
    position: absolute;
    top: -10px;
    right: -15px;
    padding: 3px 7px;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 10px;
    display: inline-block;
}

.overflow-auto {
    overflow-x: auto;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.user-card {
    width: 80px;
    height: 80px;
}

.rating-badge {
    width: 44px;
    height: 20px;
    flex-shrink: 0;
    font-size: 12px;
    border-radius: 10px;
    background: #EDEDED;
}

.nav-pills .nav-link, .nav-pills .show>.nav-link {
    color: #000;
    border: 0px;
    border-radius: 0px;
    background-color: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #000;
    border-radius: 0px;
    border-bottom: #00A4F0 1px solid;
    font-weight: 600;
    background-color: #fff;

}

.message-item-name {
    font-weight: 500;
}

.message-second{
    color: #999;
}

:root {
    --bs-primary: #00A4F0;
    --bs-primary-rgb: 0, 164, 240;
    --bs-primary-opacity: 1;
    --bs-primary-hover: #007ebc;
    --bs-primary-hover-opacity: 1;
}


.bg-primary {
    background-color: #00A4F0 !important;
}

.bg-light {
    background-color: #eee !important;
}
.color-toosa {
    color: #00A4F0;
}

.black {
    color: #000;
}

.red {
    color: #ed1b36;
}



.likes-count {
    font-size: 12px;
    font-weight: 500;
    color: #FFF;
}

.navbar-2 {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1; /* This ensures navbar-2 is above navbar-1 */
}
.navbar-hidden {
    display: none;
}

.navbar-visible {
    display: block;
    transition: all 1s ease;
}

.navbar-3 {
    margin-top: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #FFF;
    transition: top 0.3s ease, margin 0.3s ease;
}

.navbar-3.fixed-top {
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    margin: 0;
}

.navbar-3-fake {
    height: 50px;
    display: none;
    background-color: #FFF;
}

.navbar-3-fake.navbar-visible {
    display: block;
}

.main-head {
    padding: 0px;
    background-color: #FFF;
    transition: margin-top 0.3s ease-in-out;
}

/* Tab content - scrollable container */
#v-pills-tabContent {
    padding-bottom: 0px;
}

/* Tab content scrolling - only for non-photos tabs */
#v-pills-about, #v-pills-friends, #v-pills-awards {
    padding-top: 10px;
    overflow-y: visible;
    overflow-x: hidden;
    padding-bottom: 20px;
}

/* Photos tab - full page scroll (keeps existing behavior) */
#v-pills-photos {
    overflow: visible;
}

.navbar-1, .navbar-2 {
    transition: opacity 0.3s ease-in-out;
}

.bold {
    font-weight: bold;
}

.splash {
    background: url("/media/assets/reg/toosa_splash.jpg");
    background-size: cover;
}

.splash-basic {
    background: url("/media/assets/reg/toosa_splash_basic.jpg");
    background-size: cover;
}

.splash-interests {
    background: url("/media/assets/reg/toosa_splash_interests.jpg");
    background-size: cover;
}

.splash-photo {
    background: url("/media/assets/reg/toosa_splash_photo.jpg");
    background-size: cover;
}

.splash-final {
    background: url("/media/assets/reg/toosa_splash_final.jpg");
    background-size: cover;
}
.big_blue_button {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 18px;
    border-radius: 10px;
    border-color: #FFF;
    background: #00A4F0;
}

.button-container {
    position: fixed;  
    bottom: 25px;
    left: 0;          
    width: 100%;      
    z-index: 1000;    
    text-align: center; 
}

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

.form-control-1 {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center  !important;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.reg-forms {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1.2rem;
    color:#999;
    font-weight: 400;
    line-height: 1.5;
    text-align: center  !important;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.reg-select {
    display: block;
    text-align: center  !important;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.edit-forms {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    color:#999;
    font-weight: 400;
    line-height: 1.5;
    text-align: right  !important;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 10px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    direction: rtl;
}

.edit-bio {
    display: block;
    width: 100%;
    height: 100px;
    padding: 0.75rem 0.75rem;
    font-size: 1rem;
    color:#999;
    font-weight: 400;
    text-align: left  !important;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: #ccc 1px solid;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.language-badge {
    cursor: pointer;
}

.language-badge.checked {
    background-color: #00A4F0;
}


.pill-label {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.pill-input {
    display: none;
}

.pill-input:checked + .pill-label {
    background-color: #007bff;
    color: white;
    border: 1px solid transparent !important;
}


.hmenu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.pmenu {
    position: relative;
    z-index: 1001;
}

.edit-profile-left {
    border-right:0px;
    text-align:center;
    border-radius:10px 0px 0px 10px;
}

.edit-profile-right {
    text-align:center;
    border-radius:0px 10px 10px 0px;
}

.edit-profile-center {
    text-align:center;
    border-radius:0px; 
    border-right:0px;
}

.custom-modal-style {
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
}

.modal.fade .modal-dialog {
    transform: translateY(100vh);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

.modal-dialog {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
}

.modal-content {
    border-radius: 0;
    border: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Nested modal animations - slide first modal down when second opens */
.modal.show:has(~ .modal.show) .modal-dialog {
    transform: translateY(100vh) !important;
    transition: transform 0.3s ease-out;
}

.modal.nested-hidden .modal-dialog {
    transform: translateY(100vh) !important;
    transition: transform 0.3s ease-out;
}

.modal-backdrop ~ .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-title {
    color: #000;
    text-align: left;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.modal-desc{
    color: #545454;
    text-align: left;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    line-height: 100%;
}

.edit-icon-link {
    background-color: rgba(0, 0, 0, 0.5); /* You can adjust the background color */
    padding: 4px;
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); /* Optional shadow */
}

#confirmationModal {
    z-index: 1900;  /* This value should be higher than any other modal or overlay */
}
#deleteConfirmationModal{
    z-index: 1901;  /* This value should be higher than any other modal or overlay */
}

.noleft {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: none;
}

.noright {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


.btn {
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}




.btn-primary {
    --bs-btn-color: #fff;
    border: 0px;
    --bs-btn-bg: #00A4F0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}




.date-divider {
    background-color:#ffffff;
    border-radius: 10px;
    font-size: 10px;
  }

  .text-muted {
    color: #aeaeae !important;
  }

  #message-container {
    height: calc(100vh - 155px); /* 60px for top navbar and 60px for bottom navbar */
    overflow-y: auto;
    overflow-x: hidden;
}


.d-flex.flex-column.chat-message-container {
  height: calc(100vh - 110px); /* fixed-top navbar */
  padding-top: 40px;
}


  .media.ww-50.ml-auto {
      justify-content: flex-end;
  }

  .media.ww-50.ml-auto .media-body {
      text-align: right;
  }

  .media-body .bg-primary, .media-body .bg-light {
      display: inline-block;
  }

  #image-input {
      display: none;
  }

  #image-preview {
    max-height: 70px;  /* Adjust as needed */
    transition: opacity 0.3s ease;  /* Smooth transition for showing and hiding */
}

  .file_Upload {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-right: 10px;
}



/* ICONS */

.icn-usr-add {
    background-image: url('/media/assets/icons/user_add.svg');
    background-size: 100% 100%;

}

.icn-usr-add-black {
    background-image: url('/media/assets/icons/user_add_black.svg');
    background-size: 100% 100%;

}

.icn-usr-friends {
    background-image: url('/media/assets/icons/user_friends.svg');
    background-size: 100% 100%;

}

.icn-msg {
    background-image: url('/media/assets/icons/message.svg');
    background-size: 100% 100%;

}

.icn-msg-2 {
    background-image: url('/media/assets/icons/message_2.svg');
    background-size: 100% 100%;

}

.icn-msg-2-black {
    background-image: url('/media/assets/icons/message_2_black.svg');
    background-size: 100% 100%;

}


.icn-ban {
    background-image: url('/media/assets/icons/user_ban.svg');
    background-size: 100% 100%;

}

.icn-ban-active {
    background-image: url('/media/assets/icons/user_ban_active.svg');
    background-size: 100% 100%;
}

.icn-friend-pending {
    background-image: url('/media/assets/icons/user_pending.svg');
    background-size: 100% 100%;
}

.icn-user {
    background-image: url('/media/assets/icons/user_ban_active.svg');
    background-size: 100% 100%;
}

.icn-notifications {
    background-image: url('/media/assets/icons/notif.svg');
    background-size: 100% 100%;
    fill: #353A3D;
    width: 18px;
    height: 18px;
}

.bottom-icon {
    fill: #353A3D;
    width: 18px;
    height: 18px;
}

.top-icon {
    fill: #353A3D;
    width: 18px;
    height: 18px;
}

.notifications-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.notification-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.notification-item.unread {
    background-color: #f5f5f5;
}

.notification-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.notification-content {
    flex-grow: 1;
    margin-left: 10px;
}

.notification-timestamp {
    font-size: 0.8rem;
    color: #888;
}


.chat-txt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                 "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.2rem;
}

.chat-bubble {
    max-width: 85%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                 "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.chat-bottom {
    height: 80px;
    background-color: #ffffffda;
}

.chat-inputbox {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid #bababa;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.chat-buble {
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 1rem;
}

.message-first {
    font-size: 0.875rem;
}

.fixed-bottom-party {
    position: fixed;
    right: 0;
    bottom: 73px;
    left: 0;
    z-index: 1030;
}

/* ===== Create Party (Mobile) ===== */
.cp-page {
    max-width: 414px;
    margin: 0 auto;
    min-height: 100vh;
    background: #FFFFFF;
    position: relative;
}
.cp-topbar {
    position: sticky;
    top: 0;
    height: 90px;
    background: #FFFFFF;
    z-index: 10;
}
.cp-cancel {
    position: absolute;
    top: 73px;
    right: 20px;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 20px;
}
.cp-title {
    margin: 0;
    padding: 119px 20px 0 20px;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}
.cp-sub {
    padding: 10px 20px 0 20px;
    color: #AAAAAA;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 20px;
}
.cp-grid {
    position: relative;
    height: 594px;
    margin: 25px 20px 0 20px;
    overflow-y: auto;
}
.cp-tiles {
    display: grid;
    grid-template-columns: repeat(4, 74px);
    grid-auto-rows: 74px;
    gap: 10px 25px;
}
.cp-tile {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 10px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cp-tile i { color: #AAAAAA; }
.cp-tile .cp-label {
    position: absolute;
    bottom: 6px;
    left: 0; right: 0;
    text-align: center;
    color: #AAAAAA;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: -0.22px;
}
.cp-tile.active {
    background: #000000;
}
.cp-tile.active .cp-label { color: #FFFFFF; }
.cp-tile.active i { color: #FFFFFF; }
.cp-fade {
    position: absolute;
    left: 0; right:0;
    bottom: 0;
    height: 98px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
    pointer-events: none;
}
.cp-next {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 75px;
    height: 30px;
    background: transparent;
    border: 0;
}
.cp-next .cp-pill {
    position: relative;
    width: 75px; height: 30px;
}
.cp-next .cp-pill::before {
    content: '';
    position: absolute;
    left: 45%; right: 0; top: 0; bottom: 0;
    background: url('/media/assets/ui/ellipse_right.svg') no-repeat center/contain;
}
.cp-next .cp-text {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 20px;
}
.cp-back {
    position: absolute;
    left: 20px;
    top: 73px;
    width: 75px; height: 30px;
}
.cp-input, .cp-textarea {
    width: calc(100% - 40px);
    margin-left: 20px;
    border: 1px solid #e4dfdf;
    border-radius: 12px;
    background: #FFFFFF;
    padding: 10px 20px;
    font-size: 20px;
}
.cp-textarea {
    height: 195px;
    border-radius: 10px;
}
.cp-section-title {
    padding: 20px;
    font-family: "LEMON MILK Pro FTR", sans-serif;
    font-size: 20px;
}
.cp-menu {
    margin-top: 10px;
}
.cp-menu-item {
    position: relative;
    height: 56px;
    width: 100%;
    box-shadow: 0 1px 0 rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 20px;
}
.cp-btn-main {
    position: fixed;
    left: 26%; right: 25.6%; bottom: 4%;
    padding: 18px 54px;
    background: #ed1b36;
    border-radius: 10px;
    color: #FFFFFF;
    text-transform: uppercase;
    border: none;
}

/* ===== Friends List Page ===== */
.friends-page {
    max-width: 414px;
    margin: 0 auto;
    background: #FFFFFF;
}

/* Fixed tabs below header */
.friends-tabs-fixed {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-width: 414px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding: 15px 20px 0 20px;
    background: #FFFFFF;
    z-index: 1030;
}

/* Scrollable content area */
.friends-scrollable-content {
    position: fixed;
    top: 120px;
    bottom: 100px;
    left: 0;
    right: 0;
    max-width: 414px;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.friends-tab {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 10px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.friends-tab.active {
    color: #000;
    border-bottom-color: #4285F4;
}

.friends-content {
    padding: 0;
    min-height: 100%;
}

.friends-content .tab-pane {
    display: none;
}

.friends-content .tab-pane.active {
    display: block;
}

.friend-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid #EEE;
    position: relative;
}

.friend-item:first-child {
    border-top: 1px solid #EEE;
}

.friend-link {
    display: flex;
    align-items: flex-start;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.friend-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.friend-info {
    flex: 1;
}

.friend-name {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
}

.friend-rating {
    font-size: 12px;
    margin-left: 8px;
}

.friend-bio {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
    line-height: 1.3;
}

.friend-time {
    font-size: 11px;
    color: #999;
}

.friend-action-menu {
    background: transparent;
    border: none;
    color: #999;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    transition: color 0.2s ease;
    align-self: flex-start;
    margin-top: 5px;
}

.friend-action-menu:hover {
    color: #4285F4;
}

.empty-state {
    padding: 40px 20px;
    text-align: center;
}

/* Modal action items (like in profile modals) */
.modal-action-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.modal-action-item:hover {
    background: #F8F8F8;
}

.modal-action-item:last-child {
    border-bottom: none;
}

.modal-action-item i {
    font-size: 20px;
    color: #000;
    width: 30px;
    margin-right: 15px;
}

.modal-action-item span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

/* ===== Chat Improvements ===== */

/* Typing indicator animation */
#typing-indicator {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.typing-dot {
    animation: typingDot 1.4s infinite;
    color: #999;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* Upload progress bar */
.upload-progress {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(66, 133, 244, 0.2);
    z-index: 9999;
    display: none;
}

.upload-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4285F4 0%, #AE5EEC 100%);
    transition: width 0.3s ease;
    width: 0%;
}

/* File attachment preview */
.file-preview {
    position: absolute;
    bottom: 60px;
    left: 20px;
    right: 20px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: none;
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-preview-thumb {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

.file-preview-info {
    flex: 1;
}

.file-preview-remove {
    color: #FF3B30;
    cursor: pointer;
    font-size: 20px;
}

/* ==================== LOGO/TOP NAVIGATION ==================== */
.navbar-brand {
    display: flex;
    justify-content: center;
    width: 100%;
}

.logo {
    justify-content: center;
    height: 33px;
}

/* ==================== NOTIFICATIONS ==================== */
.notifications-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    gap: 12px;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: #f8f8f8;
}

.notification-item.unread {
    background-color: #e7f3ff;
}

.notification-item.unread:hover {
    background-color: #d9edff;
}

.notification-image {
    flex-shrink: 0;
}

.notification-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.notification-content {
    flex-grow: 1;
    min-width: 0;
}

.notification-text {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-sender {
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

.notification-sender:hover {
    text-decoration: underline;
}

.notification-action {
    color: #000;
    font-weight: 400;
}

.notification-timestamp {
    font-size: 13px;
    color: #65676b;
    margin-top: 2px;
}

/* Photo preview on the right side (Facebook style) */
.notification-photo-right {
    flex-shrink: 0;
    margin-left: auto;
}

.notification-photo-right img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.notification-photo-right a {
    display: block;
    line-height: 0;
}

/* Notification buttons */
.notification-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.notification-btn {
    padding: 8px 16px;
    border: none;
    background-color: #000;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: opacity 0.2s;
}

.notification-btn:hover {
    opacity: 0.8;
}

.notification-btn-accept {
    flex: 1;
}

.notification-btn-deny {
    background-color: #666;
    flex: 0.6;
}

/* ==================== CHAT LIST ==================== */
.fa-xl {
    font-size: 1.5em;
    line-height: .04167em;
    vertical-align: -0.125em;
}

/* ==================== CHAT PAGE ==================== */
.chat-page body,
.chat-page html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.chat-page body {
    padding-top: 30px;
}

#message-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8); 
    z-index: 1000;
    visibility: visible; 
}

#message-loader .spinner-border {
    width: 3rem;
    height: 3rem; 
}

#message-sending {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8); 
    z-index: 1000;
    visibility: hidden; 
}

#message-sending .spinner-border {
    width: 3rem;
    height: 3rem; 
}

/* ==================== REGISTRATION ==================== */
.registration-page input[type="text"],
.registration-page input[type="password"] {
    width: 100%;
}

.registration-page .iti--allow-dropdown input, 
.registration-page .iti--allow-dropdown input[type=text], 
.registration-page .iti--allow-dropdown input[type=tel], 
.registration-page .iti--separate-dial-code input, 
.registration-page .iti--separate-dial-code input[type=text], 
.registration-page .iti--separate-dial-code input[type=tel] {
    padding-right: 106px;
    padding-left: 52px;
    margin-left: 0;
}


/* ==================== CREATE PARTY PAGE ==================== */

/* Hide main top/bottom navbars on create party page */
.create-party-page .navbar-curved-container,
.create-party-page .fixed-top {
    display: none !important;
}

.create-party-page main {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Fixed Top Header */
.party-create-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #FFF;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

.party-cancel {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #000;
    text-decoration: none;
    letter-spacing: -0.4px;
    padding: 10px;
    cursor: pointer;
}

.party-cancel:hover {
    opacity: 0.7;
}

/* Main Container */
.party-create-container {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 100px;
    background: #FFF;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px 40px 20px;
}

.party-create-title {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -0.6px;
    margin: 20px 0 10px 0;
}

.party-create-subtitle {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #AAAAAA;
    letter-spacing: -0.4px;
    margin: 0 0 20px 0;
}

/* Scrollable Activity Grid */
.party-activity-scroll {
    position: absolute;
    top: 100px;
    left: 20px;
    right: 20px;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.party-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 0 20px 0;
}

/* Activity Cards */
.activity-card {
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px;
}

.activity-card i {
    font-size: 26px;
    color: #AAAAAA;
    margin-bottom: 8px;
}

.activity-card span {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: #AAAAAA;
    text-align: center;
    letter-spacing: -0.22px;
    text-transform: uppercase;
}

.activity-card:hover {
    transform: scale(1.05);
    border-color: #ddd;
}

.activity-card.active {
    background: #000;
}

.activity-card.active i {
    color: #FFF;
}

.activity-card.active span {
    color: #FFF;
}

/* Fade Effects */
.party-fade-top {
    position: fixed;
    top: 178px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 50;
}

.party-fade-bottom {
    position: fixed;
    bottom: 100px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 50;
}

/* Fixed Bottom Footer */
.party-create-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #FFF;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

.party-next-btn {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    transition: opacity 0.2s;
}

.party-next-btn:hover:not(:disabled) {
    opacity: 0.7;
}

.party-next-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.party-next-text {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #000;
    letter-spacing: -0.4px;
}

.party-next-arrow {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-next-arrow .fa-circle {
    position: absolute;
    font-size: 30px;
    color: #000;
}

.party-next-arrow .fa-arrow-right {
    position: relative;
    font-size: 14px;
    color: #FFF;
    z-index: 1;
}

/* Back Button */
.party-back {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    transition: opacity 0.2s;
    text-decoration: none;
    position: absolute;
    left: 20px;
}

.party-back:hover {
    opacity: 0.7;
}

.party-back-arrow {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-back-arrow .fa-circle {
    position: absolute;
    font-size: 30px;
    color: #000;
}

.party-back-arrow .fa-arrow-left {
    position: relative;
    font-size: 14px;
    color: #FFF;
    z-index: 1;
}

.party-back-text {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #000;
    letter-spacing: -0.4px;
}

/* Form Fields */
.party-form-fields {
    padding-top: 20px;
}

.party-input {
    width: 100%;
    height: 55px;
    background: #FFF;
    border: 1px solid #e4dfdf;
    border-radius: 12px;
    padding: 0 20px;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    margin-bottom: 15px;
}

.party-input::placeholder {
    color: #CCCCCC;
}

.party-textarea {
    width: 100%;
    height: 195px;
    background: #FFF;
    border: 1px solid #e4dfdf;
    border-radius: 10px;
    padding: 15px 20px;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    resize: none;
    margin-bottom: 20px;
}

.party-textarea::placeholder {
    color: #CCCCCC;
}

.party-section-title {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #000;
    letter-spacing: -0.4px;
    margin: 12px 0;
}

/* Menu Item (Date Selector) */
.party-menu-item {
    width: 100%;
    height: 56px;
    background: #FFF;
    border: none;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    cursor: pointer;
    margin-bottom: 20px;
}

.party-menu-item span {
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #263238;
}

.party-menu-item i {
    font-size: 24px;
    color: #AAAAAA;
}

/* Timeframes Grid */
.party-timeframes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 40px;
}

.timeframe-card {
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 2px;
    min-height: 80px;
}

.timeframe-card-wide {
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 10px 8px;
    min-height: 80px;
}

.timeframe-card .timeframe-icon,
.timeframe-card-wide .timeframe-icon {
    font-size: 16px;
    color: #AAAAAA;
    margin-bottom: 6px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
}

.timeframe-card i.timeframe-icon {
    font-size: 18px;
}

/* Title for timeframe cards (MORNING, AFTERNOON, etc.) */
.timeframe-title {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #AAAAAA;
    text-align: center;
    letter-spacing: -0.28px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Time range for timeframe cards (5:00 AM - 12:00 PM) */
.timeframe-range {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: #AAAAAA;
    line-height: 1;
    letter-spacing: -0.18px;
}

/* Last span for ALL DAY card */
.timeframe-card > span:last-child:not(.timeframe-title),
.timeframe-card-wide span:last-child {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 9px;
    line-height: 1;
    color: #AAAAAA;
    text-align: center;
    letter-spacing: -0.18px;
    text-transform: uppercase;
}

.timeframe-card:hover,
.timeframe-card-wide:hover {
    transform: scale(1.05);
    border-color: #ddd;
}

.timeframe-card.active,
.timeframe-card-wide.active {
    background: #000;
}

.timeframe-card.active .timeframe-icon,
.timeframe-card.active .timeframe-range,
.timeframe-card.active .timeframe-title,
.timeframe-card.active span,
.timeframe-card-wide.active .timeframe-icon,
.timeframe-card-wide.active span,
.timeframe-card-wide.active .exact-time-display span,
.timeframe-card-wide.active .time-colon {
    color: #FFF !important;
}

.timeframe-card.active i.timeframe-icon,
.timeframe-card-wide.active .time-arrow {
    color: #FFF !important;
}

.timeframe-card.active .timeframe-range span {
    color: #FFF !important;
}

/* Exact Time Display */
.exact-time-display {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.time-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.time-value {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #FFF;
    min-width: 32px;
    text-align: center;
    line-height: 1.2;
}

.time-colon {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #AAAAAA;
    margin: 0 2px;
    line-height: 1.2;
}

.timeframe-card-wide.active .time-colon {
    color: #FFF;
}

.time-arrow-up,
.time-arrow-down {
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    transition: opacity 0.2s;
    user-select: none;
    display: block;
    padding: 2px;
}

.time-arrow-up:hover,
.time-arrow-down:hover {
    opacity: 0.7;
}

.exact-time-label {
    color: #FFF;
}

/* ==================== CALENDAR BOTTOM SHEET ==================== */

.calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.calendar-overlay.active {
    display: block;
    opacity: 1;
}

.calendar-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFF;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    padding: 24px;
    max-width: 100%;
}

.calendar-sheet.active {
    transform: translateY(0);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.calendar-month {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #000;
    margin: 0;
}

.calendar-controls {
    display: flex;
    gap: 28px;
}

.calendar-controls i {
    font-size: 20px;
    color: #000;
    cursor: pointer;
    transition: opacity 0.2s;
    padding: 4px;
}

.calendar-controls i:hover {
    opacity: 0.6;
}

.calendar-body {
    width: 100%;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.calendar-weekdays div {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: #000;
    text-align: center;
    padding: 8px 0;
    letter-spacing: -0.28px;
}

.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #FFF;
    min-height: 44px;
}

.calendar-day.empty {
    cursor: default;
    visibility: hidden;
}

.calendar-day:not(.empty):hover {
    background: #f5f5f5;
}

.calendar-day.today {
    border: 2px solid #00A4F0;
    font-weight: 600;
}

.calendar-day.selected {
    background: #00A4F0;
    color: #FFF;
    font-weight: 600;
    box-shadow: 0px 4px 20px 0px rgba(0,164,240,0.3);
}

.calendar-day.selected:hover {
    background: #00A4F0;
}


/* ==================== PARTY MISC PAGE ==================== */

/* Menu Items List */
.party-menu-list {
    padding-top: 20px;
}

.party-menu-item {
    width: 100%;
    height: 56px;
    background: #FFF;
    border: none;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    cursor: pointer;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #263238;
    text-align: left;
}

.party-menu-item-toggle,
.party-menu-item-slider,
.party-menu-item-rating {
    width: 100%;
    min-height: 56px;
    background: #FFF;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #263238;
}

.party-menu-item-toggle.no-border,
.party-menu-item.no-border {
    box-shadow: none;
}

.menu-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-item-value {
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #AAAAAA;
}

.menu-item-right i {
    font-size: 24px;
    color: #AAAAAA;
}

/* Toggle Switch */
.party-toggle {
    position: relative;
    width: 40px;
    height: 24px;
    display: inline-block;
}

.party-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAA;
    opacity: 0.8;
    transition: .3s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 0px rgba(79,79,79,0.54);
}

.party-toggle input:checked + .toggle-slider {
    background-color: #9fc7ff;
}

.party-toggle input:checked + .toggle-slider:before {
    transform: translateX(16px);
    background-color: #00A4F0;
    box-shadow: 0px 1px 1px 0px rgba(48,79,254,0.54);
}

/* Age Slider */
.age-slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 300px;
}

.age-value-box {
    background: #000;
    color: #FFF;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 9px;
    min-width: 45px;
    text-align: center;
}

.age-slider-track {
    position: relative;
    flex: 1;
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px;
}

.age-slider-range {
    position: absolute;
    height: 6px;
    background: #00A4F0;
    border-radius: 3px;
    pointer-events: none;
}

.age-slider {
    position: absolute;
    top: -7px;
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.age-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A4F0;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.age-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00A4F0;
    cursor: pointer;
    pointer-events: auto;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Rating Stars */
.rating-stars {
    display: flex;
    gap: 8px;
}

.rating-stars i {
    font-size: 22px;
    color: #FFD700;
    cursor: pointer;
    transition: transform 0.2s;
}

.rating-stars i:hover {
    transform: scale(1.2);
}

/* Create Button */
.party-btn-create {
    width: 100%;
    height: 54px;
    background: #000;
    color: #FFF;
    border: none;
    border-radius: 0;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.36px;
    cursor: pointer;
    transition: opacity 0.2s;
    text-transform: uppercase;
}

.party-btn-create:hover {
    opacity: 0.8;
}

.party-btn-dark {
    width: 100%;
    height: 50px;
    background: #000;
    color: #FFF;
    border: none;
    border-radius: 0;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.32px;
    cursor: pointer;
    margin-top: 20px;
}

/* Modal Overlays */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: block;
    opacity: 1;
}

.modal-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFF;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-sheet-small {
    max-height: 300px;
}

.modal-title {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    margin: 0 0 20px 0;
}

.modal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.modal-option-card {
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px;
}

.modal-option-card i {
    font-size: 26px;
    color: #AAAAAA;
    margin-bottom: 8px;
}

.modal-option-card span {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: #AAAAAA;
    text-align: center;
    letter-spacing: -0.22px;
    text-transform: uppercase;
}

.modal-option-card:hover {
    transform: scale(1.05);
    border-color: #ddd;
}

.modal-option-card.active {
    background: #000;
}

.modal-option-card.active i {
    color: #FFF;
}

.modal-option-card.active span {
    color: #FFF;
}


/* ==================== MAP LOCATION PAGE ==================== */

.party-map-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.map-search-bar {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 10px;
}

.map-search-input {
    flex: 1;
    height: 55px;
    background: #FFF;
    border: 1px solid #e4dfdf;
    border-radius: 12px;
    padding: 0 20px;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.map-search-input::placeholder {
    color: #CCCCCC;
}

.map-location-btn {
    width: 55px;
    height: 55px;
    background: #FFF;
    border: 1px solid #e4dfdf;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.map-location-btn i {
    font-size: 24px;
    color: #00A4F0;
}

.map-suggestions {
    position: absolute;
    top: 85px;
    left: 20px;
    right: 20px;
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 16px 20px;
    cursor: pointer;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-size: 16px;
    color: #263238;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background: #f5f5f5;
}

.map-center-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 999;
    pointer-events: none;
}

.map-center-pin i {
    font-size: 38px;
    color: #00A4F0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.map-address-display {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #FFF;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
    z-index: 1000;
}

.map-address-display p {
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-size: 16px;
    color: #263238;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

/* ==================== PARTY DETAIL PAGE ==================== */

.party-detail-page .navbar-curved-container,
.party-detail-page .fixed-top,
.party-detail-page .fixed-bottom {
    display: none !important;
}

.party-detail-page main {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Party Header with Cover */
.party-header {
    position: relative;
    width: 100%;
    height: 270px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/media/assets/no-user-image.png');
    background-color: #e0e0e0;
}

.party-header-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(186,186,186,0) 52.6%, rgba(0,0,0,0.7) 100%);
}

.party-back-btn {
    position: absolute;
    top: 40px;
    left: 21px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    z-index: 10;
}

.party-back-arrow {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-back-arrow .fa-circle {
    position: absolute;
    font-size: 30px;
    color: #000;
}

.party-back-arrow .fa-arrow-left {
    position: relative;
    font-size: 14px;
    color: #FFF;
    z-index: 1;
}

.party-back-text {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #FFF;
    letter-spacing: -0.4px;
}

.party-menu-btn {
    position: absolute;
    top: 45px;
    right: 18px;
    background: none;
    border: none;
    color: #FFF;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    padding: 5px 10px;
}

.party-owner-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 82px;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 13px;
    z-index: 10;
}

.party-owner-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #FFF;
    object-fit: cover;
}

.party-owner-details {
    flex: 1;
}

.party-owner-name {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #FFF;
    margin: 0;
}

.party-creation-time {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #CCC;
    margin: 4px 0 0 0;
}

.party-owner-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #FFF;
}

.party-owner-rating i {
    color: #FFD700;
    font-size: 15px;
}

/* Tab Navigation */
.party-tabs-nav {
    position: sticky;
    top: 0;
    background: #FFF;
    z-index: 100;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.05);
}

.party-tabs {
    display: flex;
    height: 50px;
}

.party-tab {
    flex: 1;
    background: #FFF;
    border: none;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.party-tab.active {
    color: #00A4F0;
}

.party-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #00A4F0;
}

/* Main Content */
.party-content {
    background: #E0E0E0;
    min-height: calc(100vh - 320px);
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Main Info Section */
.party-main-info {
    background: #FFF;
    padding: 20px;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

.party-date {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    margin: 0 0 12px 0;
}

.party-title {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.161;
    color: #000;
    margin: 0 0 10px 0;
}

.party-description {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.32px;
    color: #000;
    margin: 0 0 20px 0;
}

/* Action Buttons */
.party-actions {
    display: flex;
    gap: 11px;
    margin-top: 20px;
}

.party-btn-primary {
    flex: 1;
    height: 50px;
    background: #009914;
    border: none;
    border-radius: 10px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.32px;
    text-transform: uppercase;
    color: #FFF;
    cursor: pointer;
    transition: opacity 0.2s;
}

.party-btn-primary:hover {
    opacity: 0.9;
}

.party-btn-secondary {
    width: 60px;
    height: 50px;
    background: #E2E2E2;
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.party-btn-secondary:hover {
    opacity: 0.9;
}

.party-btn-count {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.161;
    color: #000;
}

.party-btn-label {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.24px;
    color: #000;
    margin-top: 2px;
}

.party-btn-icon {
    width: 60px;
    height: 50px;
    background: #E2E2E2;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    color: #000;
    cursor: pointer;
    transition: opacity 0.2s;
}

.party-btn-icon:hover {
    opacity: 0.9;
}

/* Event Information Section */
.party-info-section {
    background: #FFF;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

.party-section-title {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #000;
    margin: 0 0 15px 0;
}

.party-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
}

.party-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.party-info-icon {
    width: 35px;
    height: 35px;
    background: #CCC;
    opacity: 0.4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.party-info-icon i {
    font-size: 18px;
    color: #000;
}

.party-info-label {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

/* Location Section */
.party-location-section {
    background: #FFF;
    padding: 0;
    margin-top: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

.party-map-container {
    width: 100%;
    height: 190px;
    background: #CCC;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.party-location-address {
    width: 100%;
    height: 50px;
    background: rgba(255,255,255,0.7);
    border: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: background 0.2s;
}

.party-location-address:hover {
    background: rgba(255,255,255,0.9);
}

.party-location-address i {
    color: #000;
    font-size: 20px;
}

/* Comments Section */
.party-comments-section {
    background: #FFF;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    min-height: 400px;
}

.party-comments-list {
    margin-top: 20px;
}

.party-comment-item {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}

.party-comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.party-comment-content {
    flex: 1;
}

.party-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.party-comment-author {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 0.916;
    letter-spacing: -0.36px;
    color: #000;
}

.party-comment-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #000;
}

.party-comment-rating i {
    color: #FFD700;
    font-size: 15px;
}

.party-comment-text {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.32px;
    color: #000;
    margin: 8px 0;
}

.party-comment-time {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.24px;
    color: #AAA;
    margin-right: 20px;
}

.party-comment-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 6px;
}

.party-comment-reply {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.24px;
    color: #AAA;
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

.party-comment-like,
.party-comment-dislike {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.party-comment-like i,
.party-comment-dislike i {
    font-size: 16px;
    color: #AAA;
}

.party-comment-like.active i {
    color: #00A4F0;
}

.party-comment-dislike.active i {
    color: #D32F2F;
}

.party-comment-like span,
.party-comment-dislike span {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #AAA;
}

.party-comment-input {
    position: relative;
    margin-top: 20px;
}

.party-comment-input input {
    width: 100%;
    height: 40px;
    background: #F1F1F1;
    border: none;
    border-radius: 10px;
    padding: 0 50px 0 16px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: #000;
}

.party-comment-input input::placeholder {
    color: #AAA;
}

.party-comment-input button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #000;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

/* Comment Replies */
.party-comment-replies {
    margin-top: 15px;
    margin-left: 40px;
}

.party-comment-reply-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.party-comment-reply-item .party-comment-avatar {
    width: 40px;
    height: 40px;
}

.party-comment-reply-item .party-comment-author {
    font-size: 16px;
}

.party-comment-reply-item .party-comment-text {
    font-size: 14px;
}

.party-comment-reply-item .party-comment-time {
    font-size: 11px;
    display: inline-block;
    margin-top: 4px;
}

/* Gallery Section */
.party-gallery-section {
    background: #FFF;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

.party-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.party-gallery-see-all {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #00A4F0;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.party-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.party-gallery-add {
    aspect-ratio: 1;
    background: #F0F0F0;
    border: 2px dashed #CCC;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.party-gallery-add:hover {
    background: #E5E5E5;
}

.party-gallery-add i {
    font-size: 40px;
    color: #AAA;
}

.party-gallery-item {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.party-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modals */
.modal-sheet-share,
.modal-sheet-requests,
.modal-sheet-going {
    max-height: 65vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.party-share-search {
    position: relative;
    margin-bottom: 20px;
}

.party-share-search i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #AAA;
    font-size: 18px;
}

.party-share-search input {
    width: 100%;
    height: 53px;
    background: #E2E2E2;
    border: none;
    border-radius: 10px;
    padding: 0 15px 0 50px;
    font-family: 'Avenir Next', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #000;
}

.party-share-search input::placeholder {
    color: #AAA;
}

.party-share-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.party-share-link-btn,
.party-share-share-btn {
    width: 44px;
    height: 44px;
    background: #E2E2E2;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.party-share-link-btn:hover,
.party-share-share-btn:hover {
    opacity: 0.8;
}

.party-share-link-btn i,
.party-share-share-btn i {
    font-size: 20px;
    color: #000;
}

.party-share-friends {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.party-share-friend {
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

.party-share-friend:hover {
    opacity: 0.8;
}

.party-share-friend.selected {
    opacity: 1;
}

.party-share-friend img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}

.party-share-friend.selected img {
    border: 3px solid #00A4F0;
}

.party-share-friend-name {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    line-height: 1;
    word-wrap: break-word;
}

.party-share-friend.selected .party-share-friend-name {
    color: #00A4F0;
}

.party-share-friend-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #EDEDED;
    padding: 4px 8px;
    border-radius: 10px;
    margin-top: 6px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.28px;
    color: #000;
}

.party-share-friend-rating i {
    color: #FFD700;
    font-size: 12px;
}

/* Requests List */
.party-requests-list,
.party-going-list {
    overflow-y: auto;
    max-height: 50vh;
}

.party-request-item,
.party-going-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #E0E0E0;
}

.party-request-item img,
.party-going-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.party-request-info,
.party-going-info {
    flex: 1;
}

.party-request-info h4,
.party-going-info h4 {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 0.916;
    letter-spacing: -0.36px;
    color: #000;
    margin: 0;
}

.party-request-time {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: #AAA;
    margin: 4px 0 0 0;
}

.party-request-rating,
.party-going-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin-right: 10px;
}

.party-request-rating i,
.party-going-rating i {
    color: #FFD700;
    font-size: 15px;
}

.party-request-accept,
.party-request-decline {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.party-request-accept {
    background: #000;
    color: #FFF;
}

.party-request-decline {
    background: #D32F2F;
    color: #FFF;
}

.party-request-accept:hover,
.party-request-decline:hover {
    opacity: 0.8;
}

.party-request-accept i,
.party-request-decline i {
    font-size: 14px;
}

/* Link Copied Notification */
.party-link-copied {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 271px;
    height: 162px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 2000;
}

.party-link-copied.show {
    opacity: 1;
}

.party-link-copied i {
    font-size: 37px;
    color: #00A4F0;
}

.party-link-copied p {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.161;
    color: #000;
    margin: 0;
}

/* Onboarding Tooltips */
.party-tooltip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
}

.party-tooltip {
    position: fixed;
    z-index: 9999;
    animation: tooltipFadeIn 0.3s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.party-tooltip-content {
    background: #FFF;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    max-width: 280px;
}

.party-tooltip-content p {
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    margin: 0 0 15px 0;
}

.party-tooltip-next {
    width: 100%;
    height: 40px;
    background: #00A4F0;
    border: none;
    border-radius: 8px;
    font-family: 'Avenir Next Condensed', 'LEMON MILK Pro FTR', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #FFF;
    cursor: pointer;
    transition: opacity 0.2s;
}

.party-tooltip-next:hover {
    opacity: 0.9;
}

.party-tooltip-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFF;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
}