/*
  Ensany v2 — "Create your site" NGO registration page (website/add_ngo.blade.php).
  Scoped under #v2AddNgo. One CSS file per page, same convention as
  v2-donate.css/v2-home.css/v2-campaign.css.

  IMPORTANT: this page's step-navigation, AJAX submit, image-preview and
  live-validation logic live in an external file (rules_for_validate.js)
  that isn't part of this redesign — every functional id/name/class it
  may depend on (#step_1/#step_2/#step_3, .next-button, #insert_ngo,
  .tab, .step-section, .licenseData, select2, .file-upload/.upload-box/
  .cover-box/.profile-box/.imageWrapper, #file_upload_profile/
  #file_upload_logo, .checkbox-custom, #agree, etc.) is left completely
  untouched in the markup — only NEW v2an-prefixed wrapper classes were
  added around/alongside them for styling. Do not rename any of the
  classes/ids listed above without checking rules_for_validate.js first.
*/

#v2AddNgo {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F7F4EC;
    padding-bottom: 60px;
}

#v2AddNgo * {
    box-sizing: border-box;
}

/* Same step-hiding rule the original inline <style> had — kept exactly,
   since rules_for_validate.js almost certainly toggles these with plain
   jQuery .show()/.hide() (inline display style), which this rule must not
   fight with on load. */
#step_2,
#step_3 {
    display: none;
}

#v2AddNgo button:focus,
#v2AddNgo .btn:focus,
#v2AddNgo a:focus {
    outline: none !important;
    box-shadow: none !important;
}

#v2AddNgo button:focus-visible,
#v2AddNgo .btn:focus-visible,
#v2AddNgo a:focus-visible {
    outline: 2px solid #7FB239 !important;
    outline-offset: 2px;
}

#v2AddNgo .v2an-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 0;
}

@media (min-width: 768px) {
    #v2AddNgo .v2an-wrap {
        padding: 28px 24px 0;
    }
}

#v2AddNgo .v2an-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#v2AddNgo .v2an-head h1 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    color: #12332A;
    margin: 0 0 6px;
}

#v2AddNgo .v2an-head p {
    font-size: 13px;
    color: #5B6660;
    margin: 0;
}

#v2AddNgo .v2an-ecd-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #12332A;
    color: #fff !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 10px 18px;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background-color .2s ease;
}

#v2AddNgo .v2an-ecd-btn:hover {
    background: #1B4636;
}

/* ---------- Layout: form + step sidebar ---------- */
#v2AddNgo .v2an-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

#v2AddNgo .v2an-sidebar {
    order: -1;
}

@media (min-width: 992px) {
    #v2AddNgo .v2an-layout {
        grid-template-columns: 1fr 300px;
        gap: 24px;
    }

    #v2AddNgo .v2an-sidebar {
        position: sticky;
        top: 16px;
        order: 2;
    }

    #v2AddNgo .v2an-form-col {
        order: 1;
    }
}

#v2AddNgo .v2an-card {
    background: #fff;
    border: 1px solid #EFE9D8;
    border-radius: 20px;
    box-shadow: 0 18px 40px -28px rgba(18, 51, 42, .2);
    padding: 18px;
}

@media (min-width: 768px) {
    #v2AddNgo .v2an-card {
        padding: 24px;
    }
}

/* ---------- Step sidebar cards (.widget_search/.step/.step_N/.active
   are the original functional classes — kept as-is, restyled) ---------- */
#v2AddNgo .widget_search {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #EFE9D8;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease;
}

#v2AddNgo .widget_search:has(.step.active) {
    opacity: 1;
    border-color: #7FB239;
}

#v2AddNgo .widget_search .icon {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: #F0EDE3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#v2AddNgo .widget_search .icon img {
    width: 18px;
    height: 18px;
}

#v2AddNgo .widget_search h4 {
    font-size: 13px;
    font-weight: 800;
    color: #12332A;
    margin: 4px 0 2px;
}

#v2AddNgo .widget_search p {
    font-size: 11px;
    color: #9AA39C;
    margin: 0;
}

/* ---------- Form basics ---------- */
#v2AddNgo .form-group {
    position: static !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    color: #12332A !important;
    font-weight: 400 !important;
}

#v2AddNgo label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #12332A;
    margin-bottom: 5px;
}

#v2AddNgo .form-control,
#v2AddNgo select.form-control,
#v2AddNgo textarea.form-control {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border: 1px solid #E7E1D0 !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1B2A22 !important;
    background: #fff !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#v2AddNgo .form-control:focus,
#v2AddNgo select.form-control:focus {
    border-color: #7FB239 !important;
    box-shadow: 0 0 0 3px rgba(127, 178, 57, .15) !important;
    outline: none;
}

#v2AddNgo textarea.form-control {
    min-height: 84px;
    resize: vertical;
}

#v2AddNgo .form-group i.fa {
    display: none;
    /* legacy leftover input-icon markup, not part of the v2 field style */
}

#v2AddNgo .text-danger {
    display: block;
    font-size: 11px;
    color: #C0392B;
    margin-top: 4px;
    font-weight: 600;
}

#v2AddNgo .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -7px;
}

#v2AddNgo .row>[class*="col-"] {
    padding: 0 7px;
    width: 100%;
}

@media (min-width: 576px) {

    #v2AddNgo .row>.col-lg-6,
    #v2AddNgo .row>.col-6 {
        width: 50%;
    }
}

@media (min-width: 992px) {
    #v2AddNgo .row>.col-lg-6 {
        width: 50%;
    }
}

/* ---------- select2 v2 skin (unscoped: select2 injects its dropdown
   into <body>, same reason intl-tel-input's dropdown is unscoped in
   v2-donate.css) ---------- */
.select2-container--default .select2-selection--single {
    height: auto !important;
    border: 1px solid #E7E1D0 !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    background: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1B2A22 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 8px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #7FB239 !important;
    box-shadow: 0 0 0 3px rgba(127, 178, 57, .15) !important;
}

.select2-dropdown {
    border: 1px solid #E7E1D0 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px -14px rgba(18, 51, 42, .3) !important;
    overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #E7E1D0 !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: #578021 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #F7F4EC !important;
    color: #578021 !important;
}

/* ---------- Phone field (<x-phone-input>, shared .v2-phone-input base
   styled in v2-shared.css) — reset the same way v2-donate.css does so
   it matches this page's own .form-control instead of leaking donate's
   sizing. ---------- */
#v2AddNgo .v2-phone-input.form-control {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------- Image upload (cover + logo) ---------- */
#v2AddNgo .uploading-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

#v2AddNgo .upload-box {
    position: relative;
    flex: 1 1 160px;
}

#v2AddNgo .upload-box .imageWrapper {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    background: #F0EDE3;
    border: 1px dashed #DDD5BB;
}

#v2AddNgo .upload-box.profile-box .imageWrapper {
    aspect-ratio: 1/1;
    border-radius: 9999px;
    max-width: 140px;
    margin: 0 auto;
}

#v2AddNgo .upload-box .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#v2AddNgo .file-upload {
    position: absolute;
    bottom: 8px;
    right: 8px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

#v2AddNgo .upload-box.profile-box .file-upload {
    right: 50%;
    transform: translateX(58px);
}

#v2AddNgo .file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

#v2AddNgo .icon-out {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: #578021;
    box-shadow: 0 6px 16px -6px rgba(87, 128, 33, .6);
    display: flex;
    align-items: center;
    justify-content: center;
}

#v2AddNgo .icon-in img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

/* ---------- Validation error states (rules_for_validate.js) ---------- */
#v2AddNgo .form-control.error,
#v2AddNgo .form-control.is-invalid,
#v2AddNgo select.error {
    border-color: #C0392B !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .1) !important;
}

/* select2's real <select> is hidden — the error state has to land on its
   visible fake dropdown (.select2-container), which jQuery-validate's
   default highlight()/unhighlight() never touches. select2-invalid is
   toggled onto it explicitly from rules_for_validate.js. */
#v2AddNgo .select2-container.select2-invalid .select2-selection--single {
    border-color: #C0392B !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .1) !important;
}

#v2AddNgo p.error,
#v2AddNgo .text-danger {
    display: block;
    font-size: 11px;
    color: #C0392B;
    margin-top: 4px;
    font-weight: 600;
}

#v2AddNgo .licenseData {
    transition: opacity .2s ease;
}

#v2AddNgo .licenseData.d-none {
    display: none;
}

/* ---------- Checkboxes ---------- */
#v2AddNgo input[type="checkbox"].form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    min-width: 19px;
    border: 2px solid #D8D0B8;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0 6px 0 0;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease;
}

#v2AddNgo input[type="checkbox"].form-check-input:checked {
    background: #578021;
    border-color: #578021;
}

#v2AddNgo input[type="checkbox"].form-check-input:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#v2AddNgo label[for="readpolicy"] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    font-weight: 400 !important;
}

#v2AddNgo label[for="readpolicy"] span {
    font-size: 12px;
    line-height: 1.8;
    color: #5B6660;
}

#v2AddNgo label[for="readpolicy"] a {
    color: #578021;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Next / submit buttons (.next-button is the functional class
   rules_for_validate.js listens on — kept, restyled). ---------- */
#v2AddNgo .next-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7FB239, #578021) !important;
    border: none !important;
    border-radius: 9999px !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 11px 26px !important;
    box-shadow: 0 14px 30px -14px rgba(87, 128, 33, .6);
    transition: transform .15s ease;
    cursor: pointer;
}

#v2AddNgo .next-button:hover {
    transform: translateY(-1px);
}

/* ---------- Step 3 success ---------- */
#v2AddNgo #step_3 .alerts-box {
    margin-bottom: 16px;
}

#v2AddNgo #step_3 .card {
    border: 1px solid #EFE9D8 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

#v2AddNgo .shareLink {
    background: #F7F4EC !important;
    font-weight: 700 !important;
    color: #12332A !important;
}

#v2AddNgo .multiple-btns .btn {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
}

/* ---------- Privacy policy modal ----------
   FIX: this base positioning block was accidentally dropped when the
   page's old inline <style> was removed during the redesign — without
   it, #privacyPolicyModal rendered as a normal in-flow element instead
   of a fixed full-screen overlay, so it was never actually visible.
   openModal()/closeModal() still added/removed body.modal-open (a
   Bootstrap class that sets `overflow:hidden` on <body> globally), so
   with the modal invisible and unclickable, that class never got
   removed again — page scroll stayed permanently locked with no way to
   close the modal. Restoring position/z-index/flex-centering here is
   what actually fixes both the invisible modal AND the stuck scroll. */
.modal-overlay {
    /* FIX: this used to be `display: flex !important` directly on the base
     selector — a stylesheet !important declaration ALWAYS beats an
     inline style set from JS (element.style.display = 'none'), no matter
     what. The modal could open (JS setting display:flex just reinforced
     this rule) but could never actually close — the close buttons were
     firing correctly the whole time, their JS just had no way to win
     against this rule. Visibility is now driven by the .v2an-modal-open
     class below instead of inline styles, so there's no specificity
     fight between CSS and JS at all. */
    display: none;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 51, 42, .55) !important;
    justify-content: center;
    align-items: center;
    z-index: 100000000 !important;
    padding: 20px 0;
}

.modal-overlay.v2an-modal-open {
    display: flex !important;
}

.modal-overlay .modal {
    background: #fff;
    padding: 0;
    margin: 20px auto;
    display: block !important;
    /* Much wider than before, but still capped + centered with visible
     backdrop margin on large screens instead of stretching edge-to-edge. */
    width: 92%;
    max-width: 1040px;
    height: auto !important;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.modal-overlay .modal-header {
    /* FIX: title and the close button were overlapping — reinforced with
     !important since a global Bootstrap `.modal-header`/`.btn-close`
     rule (this reuses those exact class names) was very likely winning
     on some properties here otherwise. gap + flex-shrink:0 on the
     button below is what actually keeps them apart regardless of modal
     width, not just the wider box on its own. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px;
    padding: 18px 22px !important;
    border-bottom: 1px solid #EFE9D8;
}

.modal-overlay .modal-header h2 {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-overlay .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.modal-overlay .modal-body {
    padding: 0 22px 22px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: #4A544E;
}

#v2AddNgo .modal,
.modal-overlay .modal {
    border-radius: 20px !important;
    box-shadow: 0 24px 60px -20px rgba(18, 51, 42, .35) !important;
    max-width: 640px !important;
}

#v2AddNgo .modal-header h2,
.modal-overlay .modal-header h2 {
    font-size: 16px;
    font-weight: 800;
    color: #12332A;
    margin: 0;
}

#v2AddNgo .modal-header .btn-close,
.modal-overlay .modal-header .btn-close {
    box-sizing: border-box !important;
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    border-radius: 9999px !important;
    border: none !important;
    background: #F0EDE3 !important;
    background-image: none !important;
    color: #12332A !important;
    font-weight: 700 !important;
    font-size: 13px;
    padding: 0 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#v2AddNgo .modal-footer .viewa-all-campaigns,
.modal-overlay .modal-footer .viewa-all-campaigns {
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #7FB239, #578021) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
}