/* =========================================================
   JoomShopping / Joomla
   Кабінет користувача (ізольований CSS)
   Стилі працюють ТІЛЬКИ всередині #comjshop
   Базовий розмір: 1rem = 16px
   ========================================================= */

#comjshop {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px 40px;

    font-family: Arial, Helvetica, sans-serif;
    color: #2d3a2d;

    box-sizing: border-box;
}

/* box-sizing тільки всередині блоку */
#comjshop *,
#comjshop *::before,
#comjshop *::after {
    box-sizing: border-box;
}

/* =========================================================
   TITLE
   ========================================================= */

#comjshop h1 {
    margin: 0 0 30px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #2f8a34;
}

/* =========================================================
   PROFILE INFO
   ========================================================= */

#comjshop .jshop_profile_data {
    margin-bottom: 36px;
}

#comjshop .jshop_profile_data > div {
    margin-bottom: 16px;

    font-size: 1rem; 
    line-height: 1.4;

    color: #2d3a2d;
}

#comjshop .jshop_profile_data .name {
    margin-bottom: 24px;
    font-size: 1.8rem; /* 34px */
    font-weight: 800;
    color: #2b3d2d;
}

#comjshop .jshop_profile_data span {
    font-weight: 700;
    color: #2b3d2d;
}

#comjshop .jshop_profile_data .subinfo {
    font-size: 0.9em;
    font-weight: 500;

    opacity: 0.9;
}

#comjshop .jshop_user_group_info {
    margin-left: 10px;

    color: #2f8a34;
    text-decoration: underline;

    transition: opacity 0.2s ease;
}

#comjshop .jshop_user_group_info:hover {
    opacity: 0.75;
}

/* =========================================================
   ACCOUNT BUTTONS
   ========================================================= */

#comjshop .myaccount_urls {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* картка */
#comjshop .myaccount_urls > div {
    position: relative;
}

/* посилання-кнопка */
#comjshop .myaccount_urls > div > a {
    position: relative;

    display: flex;
    align-items: center;

/*    min-height: 118px;*/
    padding: 17px 100px 17px 100px;

    background: linear-gradient(
        90deg,
        #edf5e9 0%,
        #e6f0e0 50%,
        #dfead9 100%
    );

    border-radius: 20px;

    color: #355235;
    text-decoration: none;

    font-size: 1.2rem;
    font-weight: 500;

    box-shadow: 0 4px 14px rgba(0,0,0,0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

    overflow: hidden;
}

/* hover */
#comjshop .myaccount_urls > div > a:hover {
    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(0,0,0,0.12);

    background: linear-gradient(
        90deg,
        #f1f8ed 0%,
        #e8f3e3 50%,
        #e0edd9 100%
    );
}

/* =========================================================
   LEFT ICONS
   ========================================================= */

#comjshop .myaccount_urls > div > a::before {
    position: absolute;

    left: 30px;
    top: 50%;

    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2.5rem; /* 40px */
    line-height: 1;

    color: #2f8a34;

    font-family: Arial, Helvetica, sans-serif;
}

/* edit */
#comjshop .myaccount_urls .editdata a::before {
    content: "✎";
}

/* orders */
#comjshop .myaccount_urls .showorders a::before {
    content: "☰";
    font-size: 2.125rem; /* 34px */
}

/* logout */
#comjshop .myaccount_urls .urllogout a::before {
    content: "↩";
    font-size: 2.25rem; /* 36px */
}

/* =========================================================
   RIGHT ROUND ARROW
   ========================================================= */

#comjshop .myaccount_urls > div > a::after {
    content: "›";

    position: absolute;

    right: 24px;
    top: 50%;

    transform: translateY(-50%);

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: #2f8a34;
    color: #fff;

    display: flex;
    /*align-items: center;*/
    align-items: baseline;
    justify-content: center;

    font-size: 2.3rem;
    line-height: 1;
    font-weight: 400;

    box-shadow: 0 4px 10px rgba(47,138,52,0.3);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

#comjshop .myaccount_urls > div > a:hover::after {
    background: #236b28;
    transform: translateY(-50%) scale(1.05);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #comjshop {
        margin: 20px auto;
        padding: 0 16px 30px;
    }

    #comjshop h1 {
        margin-bottom: 24px;
        font-size: 2.625rem; /* 42px */
    }

    #comjshop .jshop_profile_data .name {
        font-size: 1.75rem; /* 28px */
    }

    #comjshop .jshop_profile_data > div {
        margin-bottom: 14px;
        font-size: 1.125rem; /* 18px */
    }

    #comjshop .myaccount_urls > div > a {
        min-height: 96px;
        padding: 20px 82px 20px 78px;

        font-size: 1.375rem; /* 22px */

        border-radius: 16px;
    }

    #comjshop .myaccount_urls > div > a::before {
        left: 24px;
        font-size: 2rem; /* 32px */
    }

    #comjshop .myaccount_urls > div > a::after {
        right: 18px;

        width: 48px;
        height: 48px;

        font-size: 2.25rem; /* 36px */
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #comjshop h1 {
        font-size: 2.125rem; /* 34px */
    }

    #comjshop .jshop_profile_data .name {
        font-size: 1.5rem; /* 24px */
    }

    #comjshop .jshop_profile_data > div {
        font-size: 1rem; /* 16px */
    }

    #comjshop .myaccount_urls {
        gap: 16px;
    }

    #comjshop .myaccount_urls > div > a {
        min-height: 84px;
        padding: 18px 72px 18px 70px;

        font-size: 1.125rem; /* 18px */
    }

    #comjshop .myaccount_urls > div > a::before {
        left: 20px;

        width: 30px;
        height: 30px;

        font-size: 1.75rem; /* 28px */
    }

    #comjshop .myaccount_urls > div > a::after {
        width: 42px;
        height: 42px;

        font-size: 1.875rem; /* 30px */
    }
}


/* ===== Vizok Edit Account Form ===== */
#comjshop.editaccount_block {
  background: #f8fff8;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 24px;
  max-width: 500px;
  margin: 20px auto;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#comjshop h1 {
  color: #2e7d32;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

/* Labels and inputs */
#comjshop .control-group {
  margin-bottom: 14px;
}

#comjshop .control-label label {
  display: block;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
}

#comjshop .control-label span {
  color: #d32f2f;
  margin-left: 4px;
}

#comjshop .controls input[type="text"],
#comjshop .controls input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

#comjshop .controls input:focus {
  border-color: #2e7d32;
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.15);
}

/* Radio buttons */
#comjshop .other_delivery_adress .controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

#comjshop .other_delivery_adress label {
  font-size: 14px;
  color: #333;
}

/* Required text and button */
#comjshop .requiredtext {
  font-size: 13px;
  color: #d32f2f;
  margin-bottom: 8px;
}

#comjshop .button {
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
}

#comjshop .button:hover {
  background: #256628;
}

/* Responsive */
@media (max-width: 480px) {
  #comjshop.editaccount_block {
    padding: 18px;
  }
  #comjshop h1 {
    font-size: 20px;
  }
}