@charset "utf-8";

.character_renaming main .all .content {
    max-width: 1200px;
}

.character_renaming.agreement main .title_name .title_icon svg {
    mask-image: url(../images/svg/agreement.svg) !important;
    mask-size: 100% 100%;
}
.character_renaming.step1 main .title_name .title_icon svg {
    mask-image: url(../images/svg/pick.svg) !important;
    mask-size: 100% 100%;
}

.character_renaming.step3 main .title_name .title_icon svg {
    mask-image: url(../images/svg/succuss.svg) !important;
    mask-size: 100% 100%;
}
.character_renaming main article {
    padding-right:calc((var(--block-margins-m))*1.3);
    padding-left:calc((var(--block-margins-m))*1.8);
    }
 
 


.character_renaming .title_name {
    padding-bottom: calc(var(--block-margins-s)*0.8) !important;
}

.character_renaming main h1.title {
    margin-bottom: var(--block-margins-ss);
    color: var(--basic-gray);
}

.character_renaming main h1.title>span {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.item_title .item_name,
.item_title .price,
.item .item_name,
.item .price,
.item_title .options,
.item .options {
    width: 48%;
}

.character_renaming .item_title,
.character_renaming .item {
    gap: var(--block-margins-s);
    align-items: center;
    padding: 0.5rem !important;
}

.character_renaming main .list .item>div {
    padding: var(--block-margins-ss) 0 !important;
}

.character_renaming main .item_title {
    border-bottom: 1px solid var(--gray03);
}

.character_renaming .options {
    width: 35%;
}

.character_renaming .item_name .name::after {
    content: "/";
    display: inline;
    margin: 0 3px;
}

.character_renaming .agreement_block {
    margin-bottom: var(--block-margins-s);
}

.character_renaming main .button a {
    padding: calc(var(--block-margins-ss) *1.2) var(--block-margins-ss);
}
.character_renaming main .button.crystal{
    background:var(--blue-gradient);
}

 
  
/*⭣⭣⭣⭣⭣⭣⭣⭣⭣角色名稱變更服務使用者協議⭣⭣⭣⭣⭣⭣⭣⭣⭣⭣⭣⭣⭣⭣*/

.character_renaming main article .agreement_inner {
    width: 98%;
    margin: 0 auto;
    max-height: 550px;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-right: clamp(10px, 2vw, calc(var(--block-margins-s)*1));
}
.character_renaming .agreement section p {
    margin: 0 0;
}
.character_renaming.user_agreement main .ul_dimond {
    margin: 0.3rem auto;
}
.character_renaming .agreement section .notice{
    color: var(--basic-gold);
}
.character_renaming .agreement section .notice.red{
    color: var(--dark-red);
}
.character_renaming main ol.lvl-2>li {
    margin: .8em 0;
}
.character_renaming main ol.lvl-2>li::before {
   font-weight: 600;
}
.character_renaming.user_agreement main .title_name p {
    width: fit-content; line-height: 1.6;
    margin: calc(var(--block-margins-s)*0.5) auto 0;
}
/*⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡角色名稱變更服務使用者協議⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡⭡*/

/*step2 選像樣式設定*/
 .character_renaming.step1 .checkbox input[type="radio"]{
  width: clamp(1rem, 1.2vw, 1.2rem);
  aspect-ratio: 1 / 1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  box-sizing: border-box;

  background-color: #fff;
  border: 1px solid #999;
  border-radius: 50%;
  position: relative; /* for ::after */
  overflow: hidden;
}

/* 焦點環 */
.character_renaming.step1 .checkbox input[type="radio"]:focus-visible{
  outline: 2px solid var(--basic-gold);
  outline-offset: 2px;
}

/* 內部 80% 圓點，絕對置中 */
.character_renaming.step1 .checkbox input[type="radio"]::after{
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* 完全置中，再縮放出現 */
  border-radius: 50%;
  background: var(--basic-gold);
  transition: transform .15s ease-in-out;
}

/* 打勾時出現 */
.character_renaming.step1 .checkbox input[type="radio"]:checked::after{
  transform: translate(-50%, -50%) scale(1);
}

/*step2*/
.character_renaming main .list {
    width: 100%;
    max-width: 800px;
    margin: var(--block-margins-ss) auto;
    border: var(--border-bright-gray);
    line-height: 1.5;
    min-height: auto;
    margin-bottom: var(--block-margins-s);
}

.character_renaming main .list .item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e5e5;
    /* justify-content: center; */
    align-items: center;
}

.item_title {
    font-weight: bold;
    background-color: var(--form-title-bg);
}

.character_renaming.step1 .hint_box {
    margin: 0 auto;
    width: fit-content;
}

.character_renaming.step1 .hint_box {
    margin-bottom: var(--block-margins-s);
}

.character_renaming .hint_box .notice {
    color: #bb1616;
    text-align: left;
}

.character_renaming.step1 .options .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.character_renaming.step2 .invoice_block{
    display: none;
}

/*step2*/
.character_renaming .shopping_detail {
    margin-top: 0;
}

.character_renaming .shopping_detail .right_block {
    margin: 0 auto;
}

.character_renaming main h3 {
    line-height: 1.3;
    margin: 0;
}

.character_renaming .shopping_detail .right_block>div:not(.invoice_block) {
    text-align: center;
}
/* .character_renaming.step2 .detail_block{
    max-width: 100%;
} */
.character_renaming .shopping_detail .right_block .detail_block .from_content>div {
    display: flex;
    justify-content: space-between;
}

.character_renaming.step2 .invoice_block, .character_renaming.step2 .shopping_detail .payment_block {
    margin-bottom: 0 !important;
}

/*水晶餘額不足提示區塊*/
.crystal_alert {
    font-size: var(--hint-txt-size);
  background: #fff5f5;
  border: 1px solid #f5c2c2;
  color:#af3939;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  text-align: center;
  margin: 1.5rem 0;
}
.crystal_alert p{
    text-align: left;
}
.crystal_alert a {
  color:#af3939;
  font-weight: 600;
  text-decoration: underline;
}

.crystal_alert a:hover {
  text-decoration: none;
}
.user_agreement .crystal_alert p{
   margin: 0;
   line-height: 1.3;
    }

/*step3*/
.character_renaming.step3 .checkout_block ul li {
    width: 100%;
    align-items: center;
    line-height: 1.3;
    margin: 0.3rem 0;
}

.character_renaming.step3 .checkout_block ul li .character {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.character_renaming.step3 .checkout_block ul li span.title {
    width: 35%;
    text-align: left;
}

.character_renaming.step3 main p{
    text-align: center;
}
.character_renaming.step3 main p span{
     text-align: left;
}


@media(max-width: 767px) {
    .user_agreement main article {
    line-height: 1.7;
}
    .character_renaming main article {
        padding: calc(var(--block-margins-s)*1.3) var(--block-margins-ss);
    }

    .character_renaming.user_agreement main .title_name p {
    width: 100%; text-align: left;
}
 .character_renaming.user_agreement main .title_name p br{
    display: none;
 }
}

@media(max-width: 400px) {
    .character_renaming main .item_name {
        display: flex;
        flex-direction: column;
        align-items:flex-end;
    }
}

@media(max-width: 320px) {
    .character_renaming main .title_name h1 {
        font-size: clamp(1.1rem, 2vw, 1.25rem) !important;
    }

    .character_renaming main .title_name h1.title>span>span {
        display: inline-block;
        text-align: center;
    }

    /*step2，step3 明細改直排*/
    
    .character_renaming .checkout_block ul li {
       flex-direction: column; border-bottom: 1px solid #e5e5e5;
       padding-bottom: 3vw; gap: 2vw;
    }
      .character_renaming .checkout_block ul li:last-child{
        border-bottom:none
      }
    .character_renaming .checkout_block ul li span {
        width: 100% !important;
        text-align: center !important;
    }

}

@media(max-width: 270px) {
    .character_renaming main .title_name h1 {
        text-align: center;
        letter-spacing: normal;
    }
}

@media(max-width: 200px) {
    .character_renaming main .title_name h1.title>span>span {
        display: inline;
        text-align: left;
    }

    .character_renaming main h1.title>span {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
}