/**
 * Mobiscroll Modern CSS Overrides
 * Simple enhancements: rounder cards + enhanced forms
 */

/* Prevent scroll anchoring issues */
html {
    overflow-anchor: none;
}

body {
    overflow-anchor: none;
}

/* ============================================
   CARDS - Rounder Corners
   ============================================ */

.mbsc-card {
    border-radius: 16px !important;
}


/* ============================================
   FORMS - Modern Input Styling
   ============================================ */

/* Input fields with better focus states */
.mbsc-textfield,
.mbsc-input,
.mbsc-textarea {
    border-radius: 10px !important;
    transition: all 0.2s ease;
}

.mbsc-textfield-wrapper,
.mbsc-input-wrap {
    border-radius: 10px !important;
    transition: all 0.2s ease;
}

/* Focus glow - target form-control inputs and mbsc inputs */
label input.form-control:focus,
label textarea.form-control:focus,
label input[mbsc-input]:focus,
label textarea[mbsc-textarea]:focus,
.mbsc-form-group label input:focus,
.mbsc-form-group label textarea:focus,
input.form-control:focus,
textarea.form-control:focus,
input[mbsc-input]:focus,
textarea[mbsc-textarea]:focus,
.mbsc-textfield:focus,
.mbsc-input:focus,
.mbsc-textarea:focus {
    box-shadow: 0 0 0 4px rgba(168, 25, 85, 0.25) !important;
    border-color: #A81955 !important;
    outline: none !important;
}

/* Remove input focus when inside a wrapper (wrapper will handle the highlight) */
.mbsc-textfield-wrapper:focus-within input:focus,
.mbsc-input-wrap:focus-within input:focus,
.mbsc-textfield-wrapper.mbsc-focus input:focus,
.mbsc-input-wrap.mbsc-focus input:focus,
.mbsc-ltr.mbsc-textfield-wrapper-box.mbsc-focus input:focus,
.mbsc-textfield-wrapper-outline.mbsc-focus input:focus,
.mbsc-textfield-wrapper-underline.mbsc-focus input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Focus on wrapper elements */
.mbsc-textfield-wrapper:focus-within,
.mbsc-input-wrap:focus-within,
.mbsc-textfield-wrapper.mbsc-focus,
.mbsc-input-wrap.mbsc-focus,
.mbsc-ltr.mbsc-textfield-wrapper-box.mbsc-focus,
.mbsc-textfield-wrapper-outline.mbsc-focus,
.mbsc-textfield-wrapper-underline.mbsc-focus {
    box-shadow: 0 0 0 4px rgba(168, 25, 85, 0.25) !important;
}

/* iOS-style segmented controls - disabled to prevent conflicts */
/*
.mbsc-segmented {
    background: rgba(118, 118, 128, 0.12) !important;
    border-radius: 10px !important;
    padding: 2px;
}

.mbsc-segmented-item input:checked + .mbsc-segmented-content {
    background: white !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    font-weight: 600;
}

body.dark .mbsc-segmented {
    background: rgba(118, 118, 128, 0.24) !important;
}

body.dark .mbsc-segmented-item input:checked + .mbsc-segmented-content {
    background: rgba(58, 58, 60, 1) !important;
}
*/

/* Floating labels animation */
.mbsc-label.mbsc-label-floating-active {
    transition: all 0.2s ease;
}

/* Select/Dropdown styling */
.mbsc-select,
.mbsc-dropdown {
    border-radius: 10px !important;
}

/* Button enhancements */
.mbsc-btn,
.mbsc-button {
    border-radius: 10px !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mbsc-btn:active,
.mbsc-button:active {
    transform: scale(0.96);
}

.mbsc-btn-primary {
    box-shadow: 0 4px 12px rgba(168, 25, 85, 0.25);
}

.mbsc-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(168, 25, 85, 0.35);
}

/* Form group spacing */
.mbsc-form-group,
.mbsc-form-group-title {
    border-radius: 10px !important;
}

/* ============================================
   OVERLAY - Blur Effect for Menus/Popups
   ============================================ */

/* Add blur effect to overlay when menus/popups open */
body.dark .mbsc-fr-overlay,
body.light .mbsc-fr-overlay,
.mbsc-fr-overlay {
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
}

/* Adjust background opacity to make blur more visible */
body.light .mbsc-fr-overlay {
    background: rgba(0,0,0,.3) !important;
}

body.dark .mbsc-fr-overlay {
    background: rgba(0,0,0,.5) !important;
}

/* Fallback for browsers that don't support backdrop-filter */
/* Blur the main content when overlay is active */
body.mbsc-fr-lock #mainPage,
body.mbsc-fr-lock .topBar,
body.mbsc-fr-lock #exploreWrapperWrapper {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    transition: filter 0.3s ease;
}

/* Remove blur when overlay is gone */
#mainPage,
.topBar,
#exploreWrapperWrapper {
    filter: none;
    -webkit-filter: none;
    transition: filter 0.3s ease;
}


/* Bottom sheet look */
   .post-bottom-sheet .mbsc-popup {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      padding: 8px 0;
   }
   
   /* Menu list styling */
   .postMenu {
      list-style: none;
      margin: 0;
      padding: 8px 16px;
   }
   
   .postMenu li {
      padding: 10px 0;
      border-bottom: 1px solid rgba(215, 5, 100, 0.05); /* tweak per theme */
      cursor: pointer;
   }
   .postMenu li:hover {
      background: rgba(215, 5, 100,0.08);     /* light grey hover */
   }
   .postMenu li:last-child {
      border-bottom: none;
   }
   
   .postMenu a {
      display: block;
      text-decoration: none;
      font-size: 14px;
   }
   
/* Ellipsis trigger button styling */
.postMenuTrigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 42px;            /* bigger touch target */
   height: 42px;

   border-radius: 8px;     /* rounded square */
   border: none;
   background: transparent !important;
   cursor: pointer;

   transition: background 0.15s ease;
}

/* Make icon bigger */
.postMenuTrigger i {
   font-size: 22px;        /* increase icon size */
   line-height: 1;
}

/* Hover state (desktop) */
.postMenuTrigger:hover {
   background: rgba(215, 5, 100,0.08);     /* light grey hover */
}

/* Pressed/click state (mobile active) */
.postMenuTrigger:active {
   background: rgba(215, 5, 100,0.15);
}