/* =============================================================
   Account screens (not the dashboard) — Asraa skin over the
   wp-realestate shortcode markup.

   Loaded on: profile / my-properties / favourites / saved-search /
   reviews / messages / package / submission (see asraa_child_is_account()).
   template.css + bootstrap + CMB2 + select2 stay for layout; this file
   restyles the visible cosmetics to the design system. Everything is
   scoped under .asraa-acct-main--plugin so it can't leak to the dashboard
   or the rest of the site.
   ============================================================= */

.asraa-acct-main--plugin {
  --acc-radius: 14px;
  --acc-shadow: 0 1px 2px rgba(29, 35, 39, 0.04), 0 14px 38px rgba(29, 35, 39, 0.07);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* signed-out prompt for any account page (page-dashboard.php) */
.asraa-acct-gate {
  padding: 72px 20px;
}
.asraa-acct-gate .wrap {
  max-width: 440px;
  text-align: center;
}
.asraa-acct-gate h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  margin: 0 0 10px;
  color: var(--ink);
}
.asraa-acct-gate p {
  margin: 0 0 24px;
}
.asraa-acct-gate-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* page heading (added by page-dashboard.php) */
.asraa-acct-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  margin: 0 0 22px;
  color: var(--ink);
}

/* ---------- reset a few Homeo carry-overs ---------- */
.asraa-acct-main--plugin .container,
.asraa-acct-main--plugin .container-fluid {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
.asraa-acct-main--plugin .max-1140,
.asraa-acct-main--plugin .max-600 {
  max-width: none;
}

/* ---------- cards / panels ---------- */
.asraa-acct-main--plugin .box-white-dashboard,
.asraa-acct-main--plugin .user-reviews,
.asraa-acct-main--plugin .profile-form-normal-wrapper,
.asraa-acct-main--plugin .change-password-form,
.asraa-acct-main--plugin .box-submit {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--acc-radius);
  padding: 26px;
  box-shadow: var(--acc-shadow);
  margin-bottom: 22px;
}
.asraa-acct-main--plugin .box-white-dashboard .box-white-dashboard,
.asraa-acct-main--plugin .profile-form-normal-wrapper .box-white-dashboard,
.asraa-acct-main--plugin .change-profile-form .box-white-dashboard,
.asraa-acct-main--plugin .user-reviews .box-white-dashboard,
.asraa-acct-main--plugin .box-white-dashboard .user-reviews {
  box-shadow: none;
  padding: 0;
  border: 0;
  margin: 0;
}
/* profile: the form wrapper is the single card, the inner .cmb2-wrap /
   .box-white-dashboard just group fields */
.asraa-acct-main--plugin .change-profile-form {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* the shortcode's own page heading is a duplicate of .asraa-acct-title
   (added by page-dashboard.php) — hide it, keep sub-section titles.
   margin:0 too, or its bottom margin leaves a phantom gap. */
.asraa-acct-main--plugin .title-profile {
  display: none !important;
  margin: 0 !important;
}

/* ---------- section sub-headings ---------- */
.asraa-acct-main--plugin .box-white-dashboard > .title,
.asraa-acct-main--plugin h3.sub,
.asraa-acct-main--plugin .cmb-group-title {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 10px;
}
.asraa-acct-main--plugin .box-white-dashboard > .title::after,
.asraa-acct-main--plugin h3.sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
}

/* ---------- forms ---------- */
.asraa-acct-main--plugin .form-group {
  margin-bottom: 18px;
}
.asraa-acct-main--plugin label,
.asraa-acct-main--plugin .cmb-th label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.asraa-acct-main--plugin .form-control,
.asraa-acct-main--plugin input[type="text"],
.asraa-acct-main--plugin input[type="email"],
.asraa-acct-main--plugin input[type="tel"],
.asraa-acct-main--plugin input[type="url"],
.asraa-acct-main--plugin input[type="number"],
.asraa-acct-main--plugin input[type="password"],
.asraa-acct-main--plugin input[type="search"],
.asraa-acct-main--plugin input[type="date"],
.asraa-acct-main--plugin textarea,
.asraa-acct-main--plugin select {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.asraa-acct-main--plugin textarea {
  min-height: 120px;
  line-height: 1.6;
}
.asraa-acct-main--plugin .form-control:focus,
.asraa-acct-main--plugin input:focus,
.asraa-acct-main--plugin textarea:focus,
.asraa-acct-main--plugin select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.12);
}
.asraa-acct-main--plugin .form-control::placeholder,
.asraa-acct-main--plugin input::placeholder,
.asraa-acct-main--plugin textarea::placeholder {
  color: #a7a29a;
}

/* avatar / file upload widget */
.asraa-acct-main--plugin .group-upload,
.asraa-acct-main--plugin .upload-file-btn {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 18px;
  text-align: center;
}
.asraa-acct-main--plugin .label-can-drag {
  color: var(--muted);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  /* Was display:inline-block with no width, so it shrank to fit its own
     padding instead of filling the field row - left a lopsided chunk of
     empty background to the right on mobile (and looked off-center on
     desktop too). Shared by Featured Image / Gallery / Attachments /
     RERA QR Code - all use this same .label-can-drag markup. */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.asraa-acct-main--plugin .label-can-drag .upload-file-btn {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.asraa-acct-main--plugin .group-upload {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.asraa-acct-main--plugin .wp-realestate-uploaded-files img {
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* ---------- buttons ---------- */
.asraa-acct-main--plugin .btn,
.asraa-acct-main--plugin .button,
.asraa-acct-main--plugin button[type="submit"],
.asraa-acct-main--plugin input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--coral);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.asraa-acct-main--plugin .btn:hover,
.asraa-acct-main--plugin .button:hover,
.asraa-acct-main--plugin button[type="submit"]:hover {
  background: var(--coral-dark);
  color: #fff;
}
.asraa-acct-main--plugin .btn-inverse,
.asraa-acct-main--plugin .btn-default,
.asraa-acct-main--plugin .btn-sm.btn-search,
.asraa-acct-main--plugin .button-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.asraa-acct-main--plugin .btn-inverse:hover,
.asraa-acct-main--plugin .btn-default:hover,
.asraa-acct-main--plugin .button-secondary:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
  background: #fff;
}
.asraa-acct-main--plugin .btn-sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13px;
}

/* ---------- alerts / empty states ---------- */
.asraa-acct-main--plugin .alert,
.asraa-acct-main--plugin .not-found {
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  box-shadow: none;
}
.asraa-acct-main--plugin .not-found {
  border-style: dashed;
  text-align: center;
}
.asraa-acct-main--plugin .alert-warning {
  background: #fdf6e9;
  border-color: #f0dcae;
  color: #8a6d1f;
}
.asraa-acct-main--plugin .alert-success {
  background: #e9f8ef;
  border-color: #b7e4c9;
  color: #1a7d47;
}
.asraa-acct-main--plugin .alert-danger {
  background: #fdecec;
  border-color: #f3c0c0;
  color: var(--coral-dark);
}

/* ---------- my-properties / favourites / saved-search toolbar ---------- */
.asraa-acct-main--plugin .my-properties-ordering,
.asraa-acct-main--plugin .search-orderby-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* The property "table" is too wide for the account column — Homeo's
   dark navy header bar + fixed columns collapse the title to a
   word-per-line mess. Drop the header row and render each listing as a
   simple stacked card (thumb left, details stacked right). */
.asraa-acct-main--plugin .layout-my-properties.header-layout {
  display: none;
}
.asraa-acct-main--plugin .layout-my-properties:not(.header-layout) {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--card);
  box-shadow: var(--acc-shadow);
}
.asraa-acct-main--plugin .layout-my-properties .property-thumbnail-wrapper {
  flex: 0 0 150px;
  background: none;
}
.asraa-acct-main--plugin .layout-my-properties .property-thumbnail-wrapper img {
  border-radius: 10px;
}
.asraa-acct-main--plugin .layout-my-properties .inner-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.asraa-acct-main--plugin .layout-my-properties .inner-info-left {
  flex: 1 1 100%;
  min-width: 0;
}
.asraa-acct-main--plugin .layout-my-properties .inner-info-left a:first-child {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.asraa-acct-main--plugin .layout-my-properties .hidden-xs {
  display: block !important;
}
/* action icons lost their icon font — render as small labelled buttons */
.asraa-acct-main--plugin .warpper-action-property {
  display: flex;
  gap: 8px;
}
.asraa-acct-main--plugin .warpper-action-property a {
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.asraa-acct-main--plugin .warpper-action-property a:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
}
.asraa-acct-main--plugin .warpper-action-property i {
  font-style: normal;
}
.asraa-acct-main--plugin .warpper-action-property i[class*="flaticon-edit"]::after {
  content: "Edit";
}
.asraa-acct-main--plugin .warpper-action-property i[class*="flaticon-garbage"]::after,
.asraa-acct-main--plugin .warpper-action-property i[class*="flaticon-trash"]::after {
  content: "Delete";
}
/* the wrapped metadata blocks (date / status / views) shouldn't line-break
   mid-value. white-space:nowrap alone isn't enough: as flex children these
   were shrinking their own box below the nowrap text's natural width (each
   squeezed to an equal fraction of the row instead of its content size), so
   the overflowing text rendered straight through the next sibling instead
   of wrapping the row. flex-shrink:0 keeps each box exactly as wide as its
   text needs; the wrap parent (.inner-info) still drops extra items to a
   new line if the row genuinely runs out of room. */
.asraa-acct-main--plugin .layout-my-properties .property-info-date-expiry,
.asraa-acct-main--plugin .layout-my-properties .status-property-wrapper,
.asraa-acct-main--plugin .layout-my-properties .view-property-wrapper {
  white-space: nowrap;
  flex-shrink: 0;
  width: max-content;
}
.asraa-acct-main--plugin .layout-my-properties .inner-info > * {
  margin: 0;
}
.asraa-acct-main--plugin .orderby-wrapper {
  margin-left: auto;
}
.asraa-acct-main--plugin .input-group {
  display: flex;
  max-width: 420px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.asraa-acct-main--plugin .input-group .form-control {
  border: 0;
  border-radius: 0;
  min-height: 44px;
}
.asraa-acct-main--plugin .input-group .form-control:focus {
  box-shadow: none;
}
.asraa-acct-main--plugin .input-group-btn .btn,
.asraa-acct-main--plugin .input-group-btn .btn-search {
  min-height: 44px;
  border-radius: 0;
  padding: 0 18px;
}

/* property rows in the account lists */
.asraa-acct-main--plugin .property-item,
.asraa-acct-main--plugin .item-property,
.asraa-acct-main--plugin .property-thumbnail-wrapper {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--acc-shadow);
  margin-bottom: 14px;
}

/* ---------- data tables (saved searches) ---------- */
.asraa-acct-main--plugin .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.asraa-acct-main--plugin table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.asraa-acct-main--plugin thead,
.asraa-acct-main--plugin table.property-table thead {
  background: var(--sand);
}
.asraa-acct-main--plugin thead th,
.asraa-acct-main--plugin table th,
.asraa-acct-main--plugin thead td,
.asraa-acct-main--plugin table.user-transactions thead td {
  /* BUG FIX: Saved Search's table header ("Title"/"Saved Search Query"/...)
     uses <td> cells inside <thead>, not <th> - this rule used to only
     target <th>, so the old Homeo rule (.user-transactions thead{color:
     #fff}, meant for a dark navy header background) kept winning after we
     retinted the header background light (var(--sand)) - white text on a
     near-white background was effectively invisible. Covering thead td
     here as well fixes it without touching the old rule. */
  background: var(--sand);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

/* BUG FIX: the Saved Search "delete" button (<i class="flaticon-garbage">)
   relies on a third icon-font family (Flaticon, homeo/css/flaticon.css)
   that - like the Font Awesome and dashicons glyphs fixed elsewhere on
   this site - doesn't actually render here, leaving an empty grey square
   with no visible icon at all. Force a plain emoji, no font dependency. */
.asraa-acct-main--plugin .btn-remove-saved-search {
  font-size: 0;
}
.asraa-acct-main--plugin .btn-remove-saved-search:after {
  content: "🗑";
  font-size: 16px;
}
.asraa-acct-main--plugin .btn-remove-saved-search i {
  display: none;
}

.asraa-acct-main--plugin tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.asraa-acct-main--plugin tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Leaflet / property-submission map ---------- */
.asraa-acct-main--plugin .leaflet-container,
.asraa-acct-main--plugin .pw-map,
.asraa-acct-main--plugin [class*="map-wrapper"],
.asraa-acct-main--plugin [id*="map-canvas"],
.asraa-acct-main--plugin .cmb-type-pw-map .cmb2-metabox {
  max-width: 100% !important;
  border-radius: 10px;
}
.asraa-acct-main--plugin .leaflet-container {
  height: 320px;
}

/* ---------- CMB2 (profile + property submission) ---------- */
.asraa-acct-main--plugin .cmb2-wrap {
  margin: 0;
}
.asraa-acct-main--plugin .cmb2-wrap .cmb-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.asraa-acct-main--plugin .cmb2-wrap .cmb-row:last-child {
  border-bottom: 0;
}
.asraa-acct-main--plugin .cmb-th {
  float: none;
  width: auto;
  padding: 0 0 7px;
  font-weight: 700;
}
.asraa-acct-main--plugin .cmb-td {
  float: none;
  width: auto;
  padding: 0;
}
.asraa-acct-main--plugin .cmb2-metabox-description,
.asraa-acct-main--plugin p.cmb2-metabox-description {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 6px;
}
.asraa-acct-main--plugin .cmb-repeatable-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  background: var(--paper);
}
.asraa-acct-main--plugin .cmb-add-row .button,
.asraa-acct-main--plugin .cmb-remove-row .button {
  min-height: 40px;
}

/* ---------- select2 to match the fields ---------- */
.asraa-acct-main--plugin .select2-container {
  width: 100% !important;
}
.asraa-acct-main--plugin .select2-container--default .select2-selection--single,
.asraa-acct-main--plugin .select2-container--default .select2-selection--multiple {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}
.asraa-acct-main--plugin .select2-container--default .select2-selection--multiple {
  height: auto !important;
  align-items: flex-start;
}
.asraa-acct-main--plugin .select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.12);
}
.asraa-acct-main--plugin .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}

/* ---------- reviews list (shares the dashboard rules) ---------- */
.asraa-acct-main--plugin .user-reviews .comment-list,
.asraa-acct-main--plugin .list-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
}
.asraa-acct-main--plugin .user-reviews .comment-list > li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.asraa-acct-main--plugin .user-reviews .comment-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.asraa-acct-main--plugin .user-reviews .comment-list img,
.asraa-acct-main--plugin .user-reviews .comment-list .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-right: 13px;
}

/* ---------- private messages ---------- */
.asraa-acct-main--plugin .wp-private-message,
.asraa-acct-main--plugin .private-message-wrapper {
  border: 1px solid var(--line);
  border-radius: var(--acc-radius);
  box-shadow: var(--acc-shadow);
  overflow: hidden;
  background: var(--card);
}

/* ---------- package page ---------- */
.asraa-acct-main--plugin .inner-list {
  display: grid;
  gap: 8px;
}
.asraa-acct-main--plugin .inner-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.asraa-acct-main--plugin .inner-list li:last-child {
  border-bottom: 0;
}

/* ---------- Elementor wrapper reset ---------- */
.asraa-acct-main {
  overflow-x: clip; /* safety net against a plugin/Elementor breakout */
}
.asraa-acct-main .elementor-section,
.asraa-acct-main .elementor-container,
.asraa-acct-main .elementor-widget-wrap,
.asraa-acct-main .elementor-widget-text-editor {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
/* the /submission/ Elementor layout has a "stretched" section — its JS
   sets width:100vw + a negative left offset, which breaks out of the
   account column. Pin it back. */
.asraa-acct-main .elementor-section.elementor-section-stretched,
.asraa-acct-main .elementor-section,
.asraa-acct-main .elementor-container {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: auto !important;
}
.asraa-acct-main .cmb-form,
.asraa-acct-main .cmb2-wrap,
.asraa-acct-main .box-submit,
.asraa-acct-main .cmb2-postbox {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}
.asraa-acct-main .elementor-widget:not(:last-child) {
  margin-bottom: 22px !important;
}

/* BUG FIX: wp-realestate's own price-html builder (class-property-meta.php
   get_price_html()) concatenates the price suffix directly onto the price
   with no separator - "<span class='price'>...</span><span class='suffix-
   text additional-text'>Onwards</span>" renders as "₹69 LOnwards" wherever
   a listing has a Price Suffix set (e.g. My Properties list). CSS-only fix
   (not touching plugin core) - give the suffix its own left margin. */
.asraa-acct-main--plugin .suffix-text.additional-text {
  margin-left: 4px;
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  /* .box-submit had a flat 26px padding with no mobile reduction at all -
     stacked with every other nested wrapper's own padding, that ate a
     big chunk of a phone's already-limited width before real field
     content even started. Scaled down to match the cadence
     .before-group-row already uses at this breakpoint. */
  .asraa-acct-main--plugin .box-submit {
    padding: 16px 0;
    /* .box-submit wraps a stack of .before-group-row cards that already
       render as white, bordered, rounded boxes - on mobile the narrower
       gap makes the outer .box-submit border read as a second, redundant
       "frame" around the real content rather than disappearing. Drop its
       own card chrome here so only the real .before-group-row cards
       show; .box-white-dashboard/.user-reviews/etc. above keep theirs,
       this only affects .box-submit specifically. */
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}
@media (max-width: 420px) {
  .asraa-acct-main--plugin .box-submit {
    padding: 12px 0;
  }
}
@media (max-width: 640px) {
  .asraa-acct-main--plugin .row [class*="col-"] {
    width: 100%;
    float: none;
  }
  .asraa-acct-main--plugin .layout-my-properties.header-layout,
  .asraa-acct-main--plugin .my-properties-ordering,
  .asraa-acct-main--plugin .search-orderby-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .asraa-acct-main--plugin .orderby-wrapper {
    margin-left: 0;
  }
  .asraa-acct-main--plugin .input-group {
    max-width: none;
  }
}