body, .ow, body, html, .base_sign_in{background-color:#FFF}
/* SkaDate Support Lora: delete the two choices “online only and with photo” (delete them only for the index page not for other pages */
.index_qs_widget .ow_qs_field.qs_checkboxes {
display:none;
}

/*SkaDate Support Lora: Delete the Advanced search text from index page but keep for other pages */
.index_qs_widget a {
display: none;
}

/* SkaDate Support Lora: change the color of the search button to something like Cranberry red */
.custom_platinum_pro_index .index_qs_widget span.ow_button {
background-color: #ed266b;
border-color: #ed266b !important;
}

/* SkaDate Support Lora: remove join section from index page*/
.custom_platinum_pro_index .user_counter_join {
display: none;
}


/* SkaDate Support Lora: Change the color of “join now button bottom of index page to blue */
.footer_bottom_banner .ow_join_button a {
background-color: blue;
}

/* Above done by Skadate  */


/* Force the homepage QS button to be visible and clickable */
.custom_platinum_pro_index .index_qs_widget span.ow_button{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

html, body, .ow, .ow_page, .ow_page_wrap, .ow_page_wrap_in, .ow_content, .ow_main, .ow_center, .ow_footer, input, button, select, textarea {
  font-family: "Roboto", Arial, sans-serif !important;
  color: #ffffff;
}


/* =====================================================
   HAYAA MATRIMONY – PLATINUM PRO HEADER CLEANUP
   Goal:
   1) Remove the large promo banner on internal pages
   2) Remove the empty space it creates
   3) Keep menu clickable
   4) Show and style hero text only on the homepage
===================================================== */


/* =====================================================
   1) GLOBAL: Remove Platinum Pro promo banner background
   (This is the big image and tall header space)
===================================================== */
.ow_header{
  background: none !important;
  background-image: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* If the theme uses pseudo elements for overlays, disable them */
.ow_header::before,
.ow_header::after{
  background: none !important;
  background-image: none !important;
  content: none !important;
  pointer-events: none !important; /* prevents click blocking */
}


/* =====================================================
   2) GLOBAL: Remove leftover spacing after header removal
   (Pull content up so there is no empty gap)
===================================================== */
.ow_page_wrap,
.ow_page_padding{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove extra spacing around the menu wrapper */
.ow_menu_wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =====================================================
   3) GLOBAL: Make menu clickable (fix invisible overlays)
===================================================== */
.ow_menu_wrap,
.ow_menu_wrap *{
  pointer-events: auto !important;
}

.ow_menu_wrap{
  position: relative !important;
  z-index: 999999 !important;
}

/* Keep header content above any remaining layers */
.ow_header .container_wrap{
  position: relative !important;
  z-index: 999999 !important;
}


/* =====================================================
   4) HERO TEXT (Slider Slogan)
   Default: hidden everywhere
   Homepage: visible + positioned + styled
===================================================== */

/* Default: hide slogan text on all pages */
.header_slogan{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Homepage ONLY: show slogan text again
   Note: your homepage body class is base_index_page
*/
body.base_index_page .header_slogan{
  display: block !important;
  position: absolute !important;
  top: 190px !important;      /* vertical position of slogan block */
  left: 140px !important;     /* horizontal position of slogan block */
  z-index: 9999 !important;
  width: auto !important;
  max-width: 70% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Main quote line (large text) */
body.base_index_page .header_slogan .Qu{
  font-size: 44px !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;          /* gap between quote and reference */
  color: #f8f3ea !important;              /* soft ivory */
  text-shadow: 0 4px 22px rgba(0,0,0,0.65) !important;
}

/* Reference line (smaller text) */
body.base_index_page .header_slogan .Qr{
  display: inline-block !important;
  margin-top: 0 !important;
  font-size: 18px !important;
  letter-spacing: 0.6px !important;
  color: #e6c98a !important;              /* elegant warm gold */
  text-shadow: 0 3px 14px rgba(0,0,0,0.6) !important;
}
/* =====================================================
   HAYAA MATRIMONY – PLATINUM PRO HEADER CLEANUP
   Goal:
===================================================== */


/* =====================================================
   TEXT IN THE TOP SILDER IMAGES
===================================================== */

.Qu{
font-family: 'Amiri', serif;
font-size: 38px;

color: #FFFFFF;
text-shadow:
0 0 2px rgba(0,0,0,0.85),
0 0 6px rgba(0,0,0,0.55),
0 0 1px rgba(255,255,255,0.55);
}

.Qr{

margin-top: 0px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #F1F3F8;
text-shadow:
0 0 2px rgba(0,0,0,0.80),
0 0 5px rgba(0,0,0,0.50),
0 0 1px rgba(255,255,255,0.45);
}
/* =====================================================
   TEXT IN THE TOP SILDER IMAGES
===================================================== */


/* =========================================================
QUICK SEARCH (horizontal_qs)
Theme: Platinum Pro
Purpose:
A) Round the 3 fields (Gender, Looking For, Age)
B) Control the SEARCH button (width, gap, alignment, icon)
---------------------------------------------------------
IMPORTANT:
Change only the values marked "EDIT THIS" in future.
========================================================= */


/* =========================================================
A) FIELD RADIUS (Gender, Looking For, Age)
---------------------------------------------------------
EDIT THIS: radius value (3px to 5px recommended)
========================================================= */

.horizontal_qs .index_qs_widget .ow_qs_field:not(.ow_qs_btn) .placeholder{
border-radius: 8px !important;        /* EDIT THIS: 3px, 4px, or 5px */
}

/* Age field uses a different wrapper that draws the border */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_presentation_age .ow_qs_value .birthdate,
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_presentation_age .ow_qs_value .birhdate{
border-radius: 8px !important;        /* EDIT THIS: keep same as above */
overflow: hidden !important;
}


/* =========================================================
B) SEARCH BUTTON (only)
Controls: width, space from Age, content alignment, icon
---------------------------------------------------------
EDIT THIS:
- button width (166px)
- gap from Age (20px)
- button height (54px)
- icon spacing (right 18px / padding-right 46px)
========================================================= */

/* Button container sizing in the row */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn{
margin-left: 20px;                     /* EDIT THIS: space between Age and button */
width: 166px !important;               /* EDIT THIS: button width */
max-width: 166px !important;
flex: 0 0 166px !important;            /* prevents stretching */
}

/* Make button fill the fixed width */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn .ow_button{
display: block;
width: 100%;
}

/* Button text + icon layout */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn .ow_button input[type="submit"]{
width: 100% !important;
height: 54px;                          /* EDIT THIS: match field height */
line-height: 54px;                     /* keeps text vertically centered */
box-sizing: border-box;

white-space: nowrap;
overflow: hidden;

text-align: center;                    /* centers SEARCH text */
padding-left: 9px;                    /* EDIT THIS: small nudge to balance icon */
padding-right: 46px !important;        /* EDIT THIS: reserved space for icon */

background-position: right 18px center !important; /* EDIT THIS: icon position */
background-repeat: no-repeat !important;
}

/* If theme injects icon using pseudo elements, keep it in same place */
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn:after,
.horizontal_qs .index_qs_widget .ow_qs_field.ow_qs_btn .ow_button:after{
right: 18px !important;                /* EDIT THIS: icon position */
}

/* =========================================================
QUICK SEARCH (horizontal_qs)
--------------------------------------------------------- */


/* How We Do It images background fix */
.how_we_do_it_item .image {
background-color: #ffffff !important;
}






/* Main body font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

/* Apply Roboto site-wide */
html, body,
.ow, .ow_page, .ow_page_wrap, .ow_page_wrap_in,
.ow_content, .ow_main, .ow_center, .ow_footer,
input, button, select, textarea {
font-family: "Roboto", Arial, sans-serif !important;
color:  #6F7683;
}

/* Headings: slightly stronger */
h1, h2, h3, h4, h5, h6,
.ow_header, .ow_section, .ow_box_cap,
.ow_box_cap h3, .ow_box_cap h4 {
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 600;
}

/* Buttons and key UI labels */
button, .ow_button, .ow_button input, .ow_btn, .ow_btn_submit,
.ow_menu, .ow_nav, .ow_console, .ow_console_item {
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 500;
}

/* Form inputs: keep readable */
input, select, textarea {
font-weight: 400;
}
/* Main body font */















/* =========================================================
hottest_users
--------------------------------------------------------- */
.circle_user_title {
font-family: 'core_sans_e85_extrabold', sans-serif;
color: #ffffff;          /* better on blue */
font-size: 31px;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.65);
letter-spacing: 16px;
}

.hottest_users {
background: linear-gradient(90deg, #5b8ec2, #579FDD);
}
/* =========================================================
hottest_users
--------------------------------------------------------- */










/* Sweet Stories =========================================================
HOME: SWEET STORIES / "WHAT MAKES US UNIQUE" SLIDER
Location: Homepage section with the phone + text panel
Goal:
1) Hide the white overlay title on the image ("Sweet success stories")
2) Keep BOTH sides of the slide background pure white
========================================================= */

/* 1) HIDE THE WHITE OVERLAY TITLE ON THE IMAGE
Element: .img_title (the white text overlay on the left image)
To re-enable: delete this block
*/
.custom_platinum_pro_index .stories_carousel_item_img .img_title{
display:none !important;
}


/* 2) FORCE THE RIGHT TEXT PANEL BACKGROUND TO WHITE
This removes the grey background on the right side
To re-enable: delete this block
*/
.custom_platinum_pro_index .stories_carousel_item_text{
background:#ffffff !important;
}

/* Sometimes Platinum Pro sets a grey background on inner wrappers.
This forces inner elements to stay transparent so the panel stays white.
If you ever see grey again, keep this line. If not needed, remove it.
*/
.custom_platinum_pro_index .stories_carousel_item_text *{
background:transparent !important;
}


/* 3) FORCE THE LEFT IMAGE PANEL BACKGROUND TO WHITE
This ensures the area behind the image is white, not grey
*/
.custom_platinum_pro_index .stories_carousel_item_img{
background-color:#ffffff !important;
background-repeat:no-repeat !important;
background-position:center center !important;
background-size:contain !important;
}

/* APP SECTION: force smaller app image (overrides inline max-width:100%) */
.custom_platinum_pro_index .app-banner-visual img{
width: 454px !important;
max-width: 454px !important;
height: 460px !important;
}

/* =====================================================
STORIES CAROUSEL – NAVIGATION DOTS STYLING
Controls position + color of Owl Carousel dots
===================================================== */
/* -----------------------------------------
Positioning of the dots container
(Adjust bottom value to move dots up/down)
------------------------------------------ */
.stories_carousel .owl-dots {
position: absolute;
bottom: 130px;   /* Increase to move UP, decrease to move DOWN */
left: 53%;       /* Horizontal alignment */
}


/* -----------------------------------------
Default / Inactive Dots
------------------------------------------ */
.stories_carousel .owl-dots button.owl-dot {
background-color: #007bff !important;  /* Brand blue (inactive state) */
width: 44px;                           /* Dot width */
height: 6px;                           /* Dot height */
border-radius: 20px;                   /* Rounded edges */
border: 0;
opacity: 0.4;                          /* Softer appearance when inactive */
}


/* -----------------------------------------
Active Dot
------------------------------------------ */
.stories_carousel .owl-dots button.owl-dot.active {
background-color: #000000 !important;  /* Active highlight color */
opacity: 1;                            /* Full visibility */
}
/* =====================================================
STORIES CAROUSEL – NAVIGATION DOTS STYLING
Controls position + color of Owl Carousel dots
===================================================== */



/* =====================================================
STORIES SECTION – READ MORE
Border normally, underline only on hover
===================================================== */

.stories_carousel_item_text .read_more a {
color: #000;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #000;
border-radius: 20px;
position: relative;
transition: all 0.25s ease;
}
/* Underline (hidden initially) */
.stories_carousel_item_text .read_more a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background-color: currentColor;
transition: width 0.25s ease;
}
/* Hover state */
.stories_carousel_item_text .read_more a:hover {
color: #c0c0c0;
border-color: transparent;   /* Hide border */
background: transparent;     /* Ensure no fill */
}
/* Animate underline in */
.stories_carousel_item_text .read_more a:hover::after {
width: 100%;
}
/* =====================================================
STORIES SECTION – READ MORE
===================================================== */




/* Sweet Stories ==================== */




/*App outer section*/

/*Launch app section*/







/* Vertically center the app banner text */
.index-SKMOBILEAPP_CMP_MobileExperience .app-banner-text{
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
font-family: "Roboto", Arial, sans-serif !important;
}
.app-banner-text{
color: #6F7683;
font-size: 21px;
line-height: 1.3;
text-align: center;
}
.app-banner-text strong{
font-weight: 500;
text-align: center;
}


.app-banner-visual{
width: 100%;
}

.app-banner-visual img{
display: block;
margin-left: auto;
}




/*App outer section*/



.footer_bottom_banner .text {
font-size: 26px;
color: #5c5c5c;
font-family: 'core_sans_e35_light', "Trebuchet MS", "Helvetica CY", sans-serif;
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 400;
}

/*Bottom button*/
.footer_bottom_banner .ow_join_button a {
background-color:DodgerBlue;
}
.index_join_button, body .camera_wrap .index_join_button {
height: 56px;
background-color: #fff;
border-radius: 10px;
line-height: 57px;
font-size: 17px;
color: #000;
text-align: center;
text-transform: uppercase;
font-family: 'core_sans_e45_regular', "Trebuchet MS", "Helvetica CY", sans-serif;
letter-spacing: 1px;
display: inline-block;
padding: 0 34px;
}




/* Index page background color*/
.ow.platinum_pro.base_index_page.user_not_logged div.index_master_page_wrap.custom_platinum_pro_index div.ow_page_wrap.index_master_page {
    background-color: #ffffff;
}
/* The app section in home page, app image and phone */
.ow.platinum_pro.base_index_page.user_not_logged div.index_master_page_wrap.custom_platinum_pro_index div.ow_page_wrap.index_master_page div.ow_page_wrap_in div.ow_page_padding div.ow_page_container.clearfix div.ow_page.ow_bg_color.clearfix{
background-color: #ffffff;
}

/* Widget header bar left and right border  (card top)*/
.ow_box_cap_right {
  border-right: 0px solid #ffffff;
  border-left: 0px solid #ffffff;
}






/* =====================================================
   HAYAA MATRIMONY SKADATE DASHBOARD CSS
   PAGE SCOPE: DASHBOARD PAGE
   TARGET: body.base_user_dashboard
   ===================================================== */


/* =====================================================
   1. SITE BACKGROUND
   Whole site outer and middle background
   ===================================================== */

/* Whole site outer background */
.ow_page_wrap{
  background-color: #e6e7ef;
}

/* Whole site middle page background */
.ow_page_container .ow_page{
  background-color: #e6e7ef;
}


/* =====================================================
   2. DASHBOARD PAGE MAIN BACKGROUND
   Removes the heavy white dashboard page block
   ===================================================== */

/* Dashboard main content area background */
body.base_user_dashboard .ow_page.ow_bg_color{
  background: transparent !important;
}


/* =====================================================
   3. DASHBOARD TOP MENU BAR
   Dashboard / My Profile / Photo / Search
   This is placed first because it appears first on the page
   ===================================================== */

/* Top menu bar background */
body.base_user_dashboard .ow_menu_wrap{
  background: linear-gradient(
      to right,
      #00a3da 0%,
      #0a82e2 50%,
      #115eee 100%
  ) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Top menu links */
body.base_user_dashboard .ow_main_menu li a{
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: #444 !important;
  padding: 14px 18px !important;
  transition: all 0.2s ease !important;
}

/* Top menu link hover */
body.base_user_dashboard .ow_main_menu li a:hover{
  color: #ed266b !important;
}

/* Active top menu link */
body.base_user_dashboard .ow_main_menu li.active a{
  color: #ed266b !important;
  position: relative !important;
}

/* Active top menu underline */
body.base_user_dashboard .ow_main_menu li.active a::after{
  content: "" !important;
  position: absolute !important;
  left: 20% !important;
  right: 20% !important;
  bottom: -8px !important; 
  height: 3px !important;
  background: #ed266b !important;
  border-radius: 3px !important;
}


/* =====================================================
   4. DASHBOARD PAGE TITLE
   Main page title such as h1.ow_ic_house
   ===================================================== */

/* Dashboard page title */
body.base_user_dashboard h1.ow_ic_house{
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  margin-bottom: 25px !important;
  color: #222 !important;
}


/* =====================================================
   5. DASHBOARD MAIN WIDGETS
   Main widgets inside #place_sections
   General card style for dashboard widgets
   ===================================================== */

/* Dashboard widget header */
body.base_user_dashboard #place_sections .ow_box_cap,
body.base_user_dashboard #place_sections .ow_box_cap_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
}

/* Dashboard widget header text */
body.base_user_dashboard #place_sections .ow_box_cap h3,
body.base_user_dashboard #place_sections .ow_box_cap_empty h3{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Dashboard widget body */
body.base_user_dashboard #place_sections .ow_box,
body.base_user_dashboard #place_sections .ow_box_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

/* Remove old bottom decoration from dashboard widgets */
body.base_user_dashboard #place_sections .ow_box_bottom_left,
body.base_user_dashboard #place_sections .ow_box_bottom_right,
body.base_user_dashboard #place_sections .ow_box_bottom_body,
body.base_user_dashboard #place_sections .ow_box_bottom_shadow{
  display: none !important;
}

/* Space below each dashboard widget */
body.base_user_dashboard #place_sections .ow_stdmargin{
  margin-bottom: 18px !important;
}


/* =====================================================
   6. DASHBOARD QUICK SEARCH WIDGET
   Quick Search form fields and button
   ===================================================== */

/* Quick Search field spacing */
body.base_user_dashboard #place_sections .ow_qs_field{
  padding-bottom: 12px !important;
}

/* Quick Search input fields and select fields */
body.base_user_dashboard #place_sections .ow_qs_value select,
body.base_user_dashboard #place_sections .ow_qs_value input[type="text"]{
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  padding: 8px 10px !important;
}

/* Quick Search button outer wrapper */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button{
  background: #ed266b !important;
  border: 1px solid #ed266b !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: inline-block !important;
}

/* Quick Search button span wrapper */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button > span{
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Quick Search submit button */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button input[type="submit"]{
  background: transparent !important;
  border: 0 !important;
  padding: 10px 18px !important;
  height: auto !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
}

/* Quick Search button hover */
body.base_user_dashboard #place_sections .ow_qs_btn .ow_button:hover{
  filter: brightness(0.95) !important;
}


/* =====================================================
   7. DASHBOARD GENERAL BUTTONS
   Buttons inside dashboard widgets
   ===================================================== */

/* Dashboard buttons */
body.base_user_dashboard #place_sections .ow_button input[type="submit"],
body.base_user_dashboard #place_sections .ow_button button{
  background: #ed266b !important;
  border-color: #ed266b !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
}

/* Dashboard submit button text spacing */
body.base_user_dashboard #place_sections .ow_button input[type="submit"]{
  letter-spacing: 1px !important;
}


/* =====================================================
   8. DASHBOARD LINKS
   General link style on dashboard page
   ===================================================== */

/* Dashboard links normal state */
body.base_user_dashboard a{
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Dashboard links hover state */
body.base_user_dashboard a:hover{
  color: #ed266b !important;
  text-decoration: underline !important;
}


/* =====================================================
   9. DASHBOARD SIDEBAR MY PROFILE WIDGET
   Sidebar profile card
   ===================================================== */

/* Sidebar My Profile widget header */
body.base_user_dashboard .ow_sidebar .ow_box_cap_empty{
  background: #fbfbfd !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  background-image: none !important;
}

/* Sidebar My Profile widget body */
body.base_user_dashboard .ow_sidebar .ow_box_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background-image: none !important;
}

/* Sidebar My Profile avatar and username row */
body.base_user_dashboard .ow_sidebar .ow_my_avatar_widget{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Sidebar My Profile image wrapper */
body.base_user_dashboard .ow_sidebar .ow_my_avatar_img{
  float: none !important;
  margin: 0 !important;
}

/* Sidebar My Profile avatar image */
body.base_user_dashboard .ow_sidebar .ow_avatar img{
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
}

/* Sidebar My Profile username text */
body.base_user_dashboard .ow_sidebar .ow_my_avatar_username{
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* =====================================================
   END - HAYAA MATRIMONY SKADATE DASHBOARD CSS 
   ===================================================== */










/* Chat block #00a3da 6baae1 */
.ow_top_panel {
    background: #00d7b0;
}

.ow_count_bg {
background-color: #0000ff;
} 



/* =====================================================
   DASHBOARD WIDGET STYLING
===================================================== */



/* =====================================================
   QUICK LINKS
   ===================================================== */

/* Quick Links header cap */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_QuickLinksWidget > .ow_box_cap{

    /* TOP CAP GRADIENT COLOURS */
    background: linear-gradient(
        180deg,
        #95c4ec 0%,    /* top gradient colour */
        #7fb6e7 45%,   /* middle gradient colour */
        #6baae1 100%   /* bottom gradient colour */
    ) !important;

    /* TOP CAP BORDER COLOUR */
    border: 1px solid #5fa1db !important;

    /* REMOVE BOTTOM BORDER SO CAP JOINS BODY CLEANLY */
    border-bottom: 0 !important;

    /* TOP CAP SHADOWS */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),   /* inner top shine */
        0 3px 6px rgba(0,0,0,0.08) !important; /* outer drop shadow */

    /* GENERAL CAP LAYOUT */
    padding: 0 !important;
    overflow: hidden !important;
}

/* Remove default inner cap backgrounds */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_QuickLinksWidget > .ow_box_cap > .ow_box_cap_right,
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_QuickLinksWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{

    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Header inner spacing */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_QuickLinksWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{
    padding: 14px 18px !important; /* top/bottom left/right */
}

/* Header text colour */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_QuickLinksWidget h3{
    color: #ffffff !important; /* widget title colour */
    border: 0 !important;
    box-shadow: none !important;
}




/* =====================================================
   WELCOME!
   ===================================================== */

/* Welcome header cap */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_WelcomeWidget > .ow_box_cap{

    /* TOP CAP GRADIENT COLOURS */
    background: linear-gradient(
        180deg,
        #95c4ec 0%,    /* top gradient colour */
        #7fb6e7 45%,   /* middle gradient colour */
        #6baae1 100%   /* bottom gradient colour */
    ) !important;

    /* TOP CAP BORDER COLOUR */
    border: 1px solid #5fa1db !important;

    /* REMOVE BOTTOM BORDER SO CAP JOINS BODY CLEANLY */
    border-bottom: 0 !important;

    /* TOP CAP SHADOWS */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),   /* inner top shine */
        0 3px 6px rgba(0,0,0,0.08) !important; /* outer drop shadow */

    /* GENERAL CAP LAYOUT */
    padding: 0 !important;
    overflow: hidden !important;
}

/* Remove default inner cap backgrounds */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_WelcomeWidget > .ow_box_cap > .ow_box_cap_right,
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_WelcomeWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{

    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Header inner spacing */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_WelcomeWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{
    padding: 14px 18px !important; /* top/bottom left/right */
}

/* Header text colour */
body.base_user_dashboard #place_sections 
.dashboard-BASE_CMP_WelcomeWidget h3{
    color: #ffffff !important; /* widget title colour */
    border: 0 !important;
    box-shadow: none !important;
}




/* =====================================================
   BOOKMARKS
   ===================================================== */

/* Bookmarks header cap */
body.base_user_dashboard #place_sections 
.dashboard-BOOKMARKS_CMP_BookmarksWidget > .ow_box_cap_empty{

    /* TOP CAP GRADIENT COLOURS */
    background: linear-gradient(
        180deg,
        #e5e1fd 0%,    /* top gradient colour */
        #d6d0fb 45%,   /* middle gradient colour */
        #c9c2fb 100%   /* bottom gradient colour */
    ) !important;

    /* TOP CAP BORDER COLOUR */
    border: 1px solid #b8aff6 !important;

    /* REMOVE BOTTOM BORDER SO CAP JOINS BODY CLEANLY */
    border-bottom: 0 !important;

    /* TOP CAP SHADOWS */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),   /* inner top shine */
        0 3px 6px rgba(0,0,0,0.08) !important; /* outer drop shadow */

    /* GENERAL CAP LAYOUT */
    padding: 0 !important;
    overflow: hidden !important;
}

/* Remove default inner cap backgrounds */
body.base_user_dashboard #place_sections 
.dashboard-BOOKMARKS_CMP_BookmarksWidget > .ow_box_cap_empty > .ow_box_cap_right,
body.base_user_dashboard #place_sections 
.dashboard-BOOKMARKS_CMP_BookmarksWidget > .ow_box_cap_empty > .ow_box_cap_right > .ow_box_cap_body{

    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Header inner spacing */
body.base_user_dashboard #place_sections 
.dashboard-BOOKMARKS_CMP_BookmarksWidget > .ow_box_cap_empty > .ow_box_cap_right > .ow_box_cap_body{
    padding: 14px 18px !important; /* top/bottom left/right */
}

/* Header text colour */
body.base_user_dashboard #place_sections 
.dashboard-BOOKMARKS_CMP_BookmarksWidget h3{
    color: #ffffff !important; /* widget title colour */
    border: 0 !important;
    box-shadow: none !important;
}




/* =====================================================
   DASHBOARD – GRADIENT HEADER BARS - CAN DELETE BEING USED ONLY AS CAP SPACE
   Used for widget header bars only body.base_user_dashboard #place_sections .ow_box_cap{
    
    /* Blue → Pink gradient header */
    background: linear-gradient(
        90deg,
        #4F7BFF 0%,     /* soft modern blue (left) */
        #7C8CFF 40%,    /* light transition blue */
        #E66AA5 100%    /* soft pink (right) */
    ) !important;

    color: #ffffff !important;   /* header text color */
}
   ===================================================== */









/* =====================================================
   MY PROFILE PAGE
   -----------------------------------------------------
   PURPOSE:
   Clean, modern styling for the My Profile page.

   IMPORTANT:
   - Uses the real live widget classes
   - Does NOT rely on body.base_user_profile
   - Organised by widget and by exact area
   ===================================================== */

/* =====================================================
   TOP MENU LINKS Dashboard My Profile Photo Search
   ===================================================== */

/* Top menu bar background */
body.ow.platinum_pro .ow_menu_wrap{
  background: linear-gradient(
      to right,
      #00a3da 0%,
      #0a82e2 50%,
      #115eee 100%
  ) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Top menu links */
body.ow.platinum_pro .ow_main_menu li a{
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: #444 !important;
  padding: 14px 18px !important;
  transition: all 0.2s ease !important;
}

/* Top menu link hover */
body.ow.platinum_pro .ow_main_menu li a:hover{
  color: #ed266b !important;
  border-bottom: none !important;
}

/* Active top menu link */
body.ow.platinum_pro .ow_main_menu li.active a{
  color: #ed266b !important;
  position: relative !important;
  border-bottom: none !important;
}

/* Active top menu underline */
body.ow.platinum_pro .ow_main_menu li.active a::after{
  content: "" !important;
  position: absolute !important;
  left: 20% !important;
  right: 20% !important;
  bottom: -8px !important;
  height: 3px !important;
  background: #ed266b !important;
  border-radius: 3px !important;
}



/* =====================================================
   1) MY PROFILE PAGE – WIDGET SPACING
   -----------------------------------------------------
   Controls the gap below each main widget/card on this page.
   Change margin-bottom if you want more or less space.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget,
.ow_dnd_widget.profile-VIRTUALGIFTS_CMP_UserGiftsWidget,
.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget{
  margin-bottom: 18px !important; /* CHANGE: space below each widget */
}


/* =====================================================
   2) PROFILE DETAILS WIDGET – OUTER WIDGET POSITIONING
   -----------------------------------------------------
   Needed so the Edit Profile button can sit top-right
   inside this widget.
   Widget class:
   .profile-BASE_CMP_UserViewWidget
   ===================================================== */

.profile-BASE_CMP_UserViewWidget{
  position: relative;
}


/* =====================================================
   3) PROFILE DETAILS WIDGET – TOP CAP CONTAINER
   -----------------------------------------------------
   Styles the top cap area of the Profile Details widget.
   This is the outer white cap above the main body.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserViewWidget > .ow_box_cap{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important; /* neutral top border */
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* =====================================================
   4) PROFILE DETAILS WIDGET – REMOVE OLD SKADATE CAP
      BACKGROUNDS
   -----------------------------------------------------
   Removes old theme graphics/backgrounds from the cap.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserViewWidget > .ow_box_cap > .ow_box_cap_right,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget .ow_box_cap_right,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget .ow_box_cap_body{
  background: transparent !important;
  background-image: none !important;
}


/* =====================================================
   5) PROFILE DETAILS WIDGET – TOP CAP INNER PADDING
   -----------------------------------------------------
   Controls the visible spacing inside the top cap.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserViewWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{
  padding: 14px 16px !important; /* CHANGE: top cap padding */
  min-height: auto !important;
}


/* =====================================================
   6) PROFILE DETAILS WIDGET – TITLE TEXT
   -----------------------------------------------------
   Styles the "Profile Details" title text.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserViewWidget > .ow_box_cap h3{
  margin: 0 !important;
  font-size: 14px !important;        /* CHANGE: title size */
  font-weight: 700 !important;       /* CHANGE: title weight */
  letter-spacing: 0.7px !important;  /* CHANGE: title spacing */
  text-transform: uppercase !important;
  color: #2f3440 !important;         /* CHANGE: title colour */
}


/* =====================================================
   7) PROFILE DETAILS WIDGET – MAIN CARD BODY
   -----------------------------------------------------
   Styles the main white content box under the top cap.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserViewWidget > .ow_box{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 18px !important; /* CHANGE: body padding */
  box-sizing: border-box !important;
  background-image: none !important;
}


/* =====================================================
   8) PROFILE DETAILS WIDGET – REMOVE OLD BOTTOM
      DECORATIVE PARTS
   -----------------------------------------------------
   Removes old SkaDate bottom graphics from this widget.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserViewWidget .ow_box_bottom_left,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget .ow_box_bottom_right,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget .ow_box_bottom_body,
.ow_dnd_widget.profile-BASE_CMP_UserViewWidget .ow_box_bottom_shadow{
  display: none !important;
}


/* =====================================================
   9) PROFILE DETAILS WIDGET – TAB WRAPPER
   -----------------------------------------------------
   Controls the area around the Basic / Education tabs.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget .ow_content_menu_wrap{
  margin-bottom: 18px !important;   /* CHANGE: space below tabs */
  border-bottom: 1px solid #eef0f5 !important;
  padding-bottom: 12px !important;  /* CHANGE: wrapper padding */
}


/* =====================================================
   10) PROFILE DETAILS WIDGET – TAB LIST LAYOUT
   -----------------------------------------------------
   Controls how the tab items sit next to each other.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget .ow_content_menu{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important; /* CHANGE: gap between tabs */
  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   11) PROFILE DETAILS WIDGET – TAB ITEM CONTAINER
   -----------------------------------------------------
   Removes old tab layout behaviour and the unwanted line
   below the Profile Details title.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget .ow_content_menu li{
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 0 !important; /* removes old line */
}


/* =====================================================
   12) PROFILE DETAILS WIDGET – TAB BUTTON STYLE
   -----------------------------------------------------
   Styles the normal Basic / Education tab buttons.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget .ow_content_menu li a{
  display: inline-block !important;
  background: #f4f5f9 !important; /* CHANGE: inactive tab background */
  border: 1px solid #e4e7ee !important;
  border-radius: 999px !important;
 padding: 4px 10px !important;
  font-size: 13px !important;    /* CHANGE: tab size */
  font-weight: 600 !important;
  color: #555 !important;        /* CHANGE: inactive tab text colour */
  text-decoration: none !important;
}


/* =====================================================
   13) PROFILE DETAILS WIDGET – TAB HOVER STATE
   -----------------------------------------------------
   Styles tab appearance on hover.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget .ow_content_menu li a:hover{
  background: #fff5f9 !important;
  border-color: rgba(237,38,107,0.20) !important;
  color: #ed266b !important;
  text-decoration: none !important;
}


/* =====================================================
   14) PROFILE DETAILS WIDGET – ACTIVE TAB STATE
   -----------------------------------------------------
   Styles the currently selected tab.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget .ow_content_menu li.active a,
.profile-BASE_CMP_UserViewWidget .ow_content_menu li.current a{
  background: #fdeef4 !important;
  border-color: rgba(237,38,107,0.24) !important;
  color: #ed266b !important;
}


/* =====================================================
   15) PROFILE DETAILS WIDGET – DETAILS TABLE LAYOUT
   -----------------------------------------------------
   Controls the main table width and collapse behaviour.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget table,
.profile-BASE_CMP_UserViewWidget .ow_table_1{
  width: 100% !important;
  border-collapse: collapse !important;
}


/* =====================================================
   16) PROFILE DETAILS WIDGET – DETAILS TABLE ALL CELLS
   -----------------------------------------------------
   Controls spacing and divider lines for all profile rows.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget table td,
.profile-BASE_CMP_UserViewWidget .ow_table_1 td{
  padding: 12px 12px !important; /* CHANGE: row padding */
  vertical-align: top !important;
  border-bottom: 1px solid #f0f2f6 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* =====================================================
   17) PROFILE DETAILS WIDGET – LEFT LABEL COLUMN
   -----------------------------------------------------
   Styles the left column labels like Username, Email, etc.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget table td:first-child,
.profile-BASE_CMP_UserViewWidget .ow_table_1 td:first-child{
  width: 36% !important; /* CHANGE: label column width */
  color: #8a8f99 !important;
  font-weight: 500 !important;
}


/* =====================================================
   18) PROFILE DETAILS WIDGET – RIGHT VALUE COLUMN
   -----------------------------------------------------
   Styles the right column values.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget table td:last-child,
.profile-BASE_CMP_UserViewWidget .ow_table_1 td:last-child{
  color: #2f3440 !important;
  font-weight: 600 !important;
}


/* =====================================================
   19) PROFILE DETAILS WIDGET – LAST TABLE ROW
   -----------------------------------------------------
   Removes the divider from the final row only.
   ===================================================== */

.profile-BASE_CMP_UserViewWidget table tr:last-child td,
.profile-BASE_CMP_UserViewWidget .ow_table_1 tr:last-child td{
  border-bottom: 0 !important;
}


/* =====================================================
   20) PROFILE DETAILS WIDGET – EDIT PROFILE BUTTON
   -----------------------------------------------------
   Makes the Edit Profile link always visible and places
   it in the top-right area of the widget.
   ===================================================== */

#edit-profile{
  display: inline-block !important;
  position: absolute;
  right: 20px; /* CHANGE: horizontal position */
  top: 18px;   /* CHANGE: vertical position */

  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;

  color: #ed266b;
  background: #ffffff;

  padding: 6px 10px; /* CHANGE: button padding */
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);

  transition: all 0.2s ease;
}


/* =====================================================
   21) PROFILE DETAILS WIDGET – EDIT PROFILE BUTTON
      HOVER STATE
   -----------------------------------------------------
   Hover effect for the Edit Profile button.
   ===================================================== */

#edit-profile:hover{
  background: #ed266b;
  color: #ffffff;
  border-color: #ed266b;
}


/* =====================================================
   22) LEFT AVATAR WIDGET – MAIN CARD BODY
   -----------------------------------------------------
   Widget class:
   .profile-BASE_CMP_UserAvatarWidget

   Styles the main white card around the large avatar.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget > .ow_box_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 18px !important; /* CHANGE: inner spacing */
  background-image: none !important;
}


/* =====================================================
   23) LEFT AVATAR WIDGET – REMOVE OLD EMPTY CAP
      BACKGROUNDS
   -----------------------------------------------------
   Removes old top cap graphics if they exist.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget > .ow_box_cap_empty,
.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget > .ow_box_cap_empty > .ow_box_cap_right,
.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget > .ow_box_cap_empty > .ow_box_cap_right > .ow_box_cap_body{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   24) LEFT AVATAR WIDGET – REMOVE OLD AVATAR CONSOLE
      STYLING
   -----------------------------------------------------
   Removes old console background/border styling.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget .ow_avatar_console{
  background: transparent !important;
  border: 0 !important;
}


/* =====================================================
   25) LEFT AVATAR WIDGET – AVATAR IMAGE WRAPPER
   -----------------------------------------------------
   Controls the large avatar image rounding and clipping.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget #avatar-console-image{
  border-radius: 18px !important; /* CHANGE: image roundness */
  overflow: hidden !important;
  margin: 0 auto !important;
}


/* =====================================================
   26) LEFT AVATAR WIDGET – ONLINE DOT POSITION
   -----------------------------------------------------
   Controls where the online status dot sits.
   ===================================================== */

.ow_dnd_widget.profile-BASE_CMP_UserAvatarWidget .user_online_wrap{
  left: 10px !important;   /* CHANGE */
  bottom: 10px !important; /* CHANGE */
}


/* =====================================================
   27) RIGHT MY PROFILE WIDGET – TOP CAP CONTAINER
   -----------------------------------------------------
   Widget class:
   .index-BASE_CMP_MyAvatarWidget

   Styles the small widget header on the right.
   ===================================================== */

.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget > .ow_box_cap_empty{
  background: #fbfbfd !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-image: none !important;
}


/* =====================================================
   28) RIGHT MY PROFILE WIDGET – REMOVE OLD CAP
      BACKGROUNDS
   -----------------------------------------------------
   Removes old header graphics from the small right widget.
   ===================================================== */

.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget > .ow_box_cap_empty > .ow_box_cap_right,
.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget > .ow_box_cap_empty > .ow_box_cap_right > .ow_box_cap_body{
  background: transparent !important;
  background-image: none !important;
}


/* =====================================================
   29) RIGHT MY PROFILE WIDGET – TOP CAP INNER PADDING
   -----------------------------------------------------
   Controls the visible spacing inside the small widget cap.
   ===================================================== */

.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget > .ow_box_cap_empty > .ow_box_cap_right > .ow_box_cap_body{
  padding: 10px 12px !important; /* CHANGE */
  min-height: auto !important;
}


/* =====================================================
   30) RIGHT MY PROFILE WIDGET – MAIN CARD BODY
   -----------------------------------------------------
   Styles the white content area of the small right widget.
   ===================================================== */

.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget > .ow_box_empty{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.045) !important;
  padding: 12px !important; /* CHANGE */
  background-image: none !important;
}


/* =====================================================
   31) RIGHT MY PROFILE WIDGET – SMALL AVATAR IMAGE
   -----------------------------------------------------
   Controls the avatar image size inside the small widget.
   ===================================================== */

.ow_dnd_widget.index-BASE_CMP_MyAvatarWidget .ow_avatar img{
  width: 46px !important;  /* CHANGE: avatar size */
  height: 46px !important; /* CHANGE: avatar size */
  border-radius: 12px !important;
}


/* =====================================================
   32) GIFTS WIDGET – TOP CAP CONTAINER
   -----------------------------------------------------
   Widget class:
   .profile-VIRTUALGIFTS_CMP_UserGiftsWidget

   Styles the top header cap of the Gifts widget.
   ===================================================== */

.ow_dnd_widget.profile-VIRTUALGIFTS_CMP_UserGiftsWidget > .ow_box_cap{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-image: none !important;
}


/* =====================================================
   33) GIFTS WIDGET – REMOVE OLD CAP BACKGROUNDS
   -----------------------------------------------------
   Removes old cap graphics from the Gifts widget.
   ===================================================== */

.ow_dnd_widget.profile-VIRTUALGIFTS_CMP_UserGiftsWidget > .ow_box_cap > .ow_box_cap_right,
.ow_dnd_widget.profile-VIRTUALGIFTS_CMP_UserGiftsWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{
  background: transparent !important;
  background-image: none !important;
}


/* =====================================================
   34) GIFTS WIDGET – TOP CAP INNER PADDING
   -----------------------------------------------------
   Controls the visible padding inside the Gifts cap.
   ===================================================== */

.ow_dnd_widget.profile-VIRTUALGIFTS_CMP_UserGiftsWidget > .ow_box_cap > .ow_box_cap_right > .ow_box_cap_body{
  padding: 14px 16px !important; /* CHANGE */
  min-height: auto !important;
}


/* =====================================================
   35) GIFTS WIDGET – MAIN CARD BODY
   -----------------------------------------------------
   Styles the main white body of the Gifts widget.
   ===================================================== */

.ow_dnd_widget.profile-VIRTUALGIFTS_CMP_UserGiftsWidget > .ow_box{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  padding: 14px !important; /* CHANGE */
  background-image: none !important;
}


/* =====================================================
   36) GIFTS WIDGET – GIFT IMAGE SIZE
   -----------------------------------------------------
   Controls the size of gift images.
   ===================================================== */

.profile-VIRTUALGIFTS_CMP_UserGiftsWidget img{
  max-width: 72px !important; /* CHANGE: gift image size */
  height: auto !important;
}


/* =====================================================
   37) GIFTS WIDGET – VIEW ALL BUTTON
   -----------------------------------------------------
   Styles the View All button in the Gifts widget.
   ===================================================== */

.profile-VIRTUALGIFTS_CMP_UserGiftsWidget .ow_box_toolbar li a{
  background: #ed266b !important; /* CHANGE: button colour */
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;

  padding: 8px 16px !important; /* CHANGE: button padding */
  height: auto !important;
  line-height: normal !important;

  border-radius: 8px !important;
  border: none !important;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  transition: all 0.2s ease !important;
}


/* =====================================================
   38) GIFTS WIDGET – VIEW ALL BUTTON HOVER STATE
   -----------------------------------------------------
   Hover effect for the Gifts View All button.
   ===================================================== */

.profile-VIRTUALGIFTS_CMP_UserGiftsWidget .ow_box_toolbar li a:hover{
  background: #d61f60 !important;
  transform: translateY(-1px);
}
/* ====================================================
   MY PROFILE PAGE - END
===================================================== */


span.ow_button .ow_btn_delimiter input[value="Create album"] {
  display: inline-block;
  background-color: #0000ff;
  background-repeat: no-repeat;
  background-image: none;
  background-position: right top;
  padding: 0 8px;
}
.ow_button.ow_btn_delimiter input[value="Create album"]{
    background:#0000ff !important;
    border:1px solid #23923d !important;
    color:#ffffff !important;
}
.ow_button.ow_btn_delimiter input[value="Create album"]:hover{
    background:#218838 !important;
}