/* =========================================================
   ChouChou Condo 月租界面
   纯视觉版
   ========================================================= */

.cc-rent-ui,
.cc-rent-ui * {
  box-sizing: border-box;
}


.cc-rent-ui {

  --wine: #71304b;
  --wine-dark: #572037;

  --rose: #ad5f7e;
  --rose-light: #f4dce5;

  --gold: #c99c56;
  --gold-light: #ead3a1;

  --cream: #fffaf6;
  --pink-white: #fff6f9;

  --text: #674050;
  --muted: #997884;

  width: min(1080px, calc(100vw - 36px));

  margin: 25px auto;

  color: var(--text);

  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans SC",
    Arial,
    sans-serif;
}



/* =========================================================
   外壳
   ========================================================= */

.cc-rent-shell {

  position: relative;

  overflow: hidden;

  padding: 11px;

  border:
    1px solid rgba(194,149,81,.72);

  border-radius: 23px;

  background:

    radial-gradient(
      circle at 12% 0%,
      rgba(255,255,255,.98),
      transparent 32%
    ),

    linear-gradient(
      150deg,
      #fffdf9 0%,
      #fff4f8 50%,
      #f9e3ec 100%
    );

  box-shadow:

    0 18px 42px
    rgba(91,34,61,.15),

    inset 0 0 0 4px
    rgba(255,255,255,.58);
}



/* =========================================================
   Header
   ========================================================= */

.cc-rent-header {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  min-height: 78px;

  padding: 16px 18px;

  overflow: hidden;

  border:
    1px solid rgba(199,159,96,.42);

  border-radius:
    16px 16px 8px 8px;

  background:

    radial-gradient(
      circle at 6% 0%,
      rgba(255,255,255,.98),
      transparent 36%
    ),

    linear-gradient(
      135deg,
      rgba(255,255,255,.86),
      rgba(255,240,246,.80)
    );

  box-shadow:
    0 8px 20px rgba(91,34,61,.07);
}


.cc-rent-eyebrow {

  margin-bottom: 3px;

  color: var(--gold);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .17em;
}


.cc-rent-header h2 {

  margin: 0;

  color: var(--wine);

  font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

  font-size: 24px;

  font-weight: 700;

  letter-spacing: .08em;
}


.cc-rent-header p {

  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    600;
}


.cc-rent-days {

  display:
    flex;

  min-width:
    102px;

  min-height:
    38px;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px 13px;

  color:
    var(--wine);

  border:
    1px solid rgba(197,151,86,.52);

  border-radius:
    11px;

  background:

    linear-gradient(
      145deg,
      #ffffff,
      #fff1f6
    );

  box-shadow:
    0 6px 14px rgba(91,34,61,.07);

  font-family:
    Georgia,
    serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .14em;
}



/* =========================================================
   三栏
   ========================================================= */

.cc-rent-grid {

  display:
    grid;

  grid-template-columns:
    minmax(235px, .82fr)
    minmax(430px, 1.55fr)
    minmax(270px, .95fr);

  gap:
    13px;

  align-items:
    stretch;

  padding:
    14px 4px 4px;
}


.cc-rent-card {

  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid rgba(177,90,126,.34);

  border-radius:
    14px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(248,220,231,.48),
      transparent 42%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(255,247,250,.91)
    );

  box-shadow:

    0 10px 24px
    rgba(91,34,61,.07),

    inset 0 1px 0
    rgba(255,255,255,.96);
}



/* =========================================================
   左栏
   ========================================================= */

.cc-contract-card {

  display:
    flex;

  min-height:
    470px;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    19px;

  border-left:
    4px solid var(--rose);
}


.cc-contract-card::before {

  content:
    "30";

  position:
    absolute;

  top:
    -24px;

  right:
    -7px;

  color:
    rgba(174,93,126,.065);

  font-family:
    Georgia,
    serif;

  font-size:
    142px;

  font-weight:
    700;

  line-height:
    1;
}


.cc-contract-main,
.cc-resident-panel {

  position:
    relative;

  z-index:
    1;
}


.cc-contract-kicker {

  display:
    inline-flex;

  padding:
    5px 9px;

  color:
    var(--gold);

  border:
    1px solid rgba(197,151,86,.42);

  border-radius:
    8px;

  background:
    rgba(255,250,245,.78);

  font-family:
    Georgia,
    serif;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .14em;
}


.cc-contract-title {

  margin:
    17px 0 7px;

  color:
    var(--wine);

  font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

  font-size:
    25px;

  font-weight:
    700;
}


.cc-contract-desc {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.65;
}


.cc-contract-image {

  width:
    100%;

  height:
    112px;

  margin:
    16px 0 0;

  padding:
    3px;

  overflow:
    hidden;

  border:
    1px solid rgba(197,151,86,.62);

  border-radius:
    10px;

  background:
    #fff;

  box-shadow:
    0 9px 19px rgba(91,34,61,.12);
}


.cc-contract-image img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center 43%;

  border-radius:
    7px;
}



/* 住客信息 */

.cc-resident-panel {

  margin-top:
    22px;

  padding:
    10px;

  border:
    1px solid rgba(197,151,86,.32);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.68);
}


.cc-resident-heading {

  padding:
    2px 3px 8px;

  color:
    var(--gold);

  font-family:
    Georgia,
    serif;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .13em;
}


.cc-resident-row {

  display:
    grid;

  grid-template-columns:
    74px minmax(0,1fr);

  align-items:
    center;

  gap:
    8px;

  min-height:
    37px;

  padding:
    8px 9px;

  border:
    1px solid rgba(177,90,126,.13);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.70);
}


.cc-resident-row + .cc-resident-row {
  margin-top: 6px;
}


.cc-resident-row span {

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    700;
}


.cc-resident-row strong {

  overflow:
    hidden;

  color:
    var(--wine);

  font-size:
    10px;

  font-weight:
    700;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-resident-row .cc-error {
  color: #ad5273;
}



/* =========================================================
   中栏
   ========================================================= */

.cc-benefit-card {
  padding: 16px;
}


.cc-section-head {
  margin-bottom: 11px;
}


.cc-section-head h3 {

  margin:
    0;

  color:
    var(--wine);

  font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

  font-size:
    17px;

  font-weight:
    700;

  line-height:
    1.4;
}


.cc-section-head p {

  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.55;
}



/* =========================================================
   权益表格
   ========================================================= */

.cc-benefit-table-wrap {

  overflow:
    hidden;

  border:
    1px solid rgba(197,151,86,.28);

  border-radius:
    11px;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.90),
      rgba(255,248,251,.76)
    );
}


.cc-benefit-table {

  width:
    100%;

  margin:
    0;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    fixed;
}


.cc-benefit-table th:first-child,
.cc-benefit-table td:first-child {

  width:
    46%;
}


.cc-benefit-table th:nth-child(2),
.cc-benefit-table td:nth-child(2) {

  width:
    22%;
}


.cc-benefit-table th:nth-child(3),
.cc-benefit-table td:nth-child(3) {

  width:
    32%;
}



/* 表头 */

.cc-benefit-table th {

  padding:
    11px 7px;

  border:
    0;

  border-bottom:
    1px solid rgba(197,151,86,.22);

  color:
    var(--wine);

  background:
    rgba(255,255,255,.60);

  font-size:
    10px;

  font-weight:
    700;

  text-align:
    center;

  vertical-align:
    middle;
}


.cc-benefit-table .cc-benefit-name-head {

  padding-left:
    12px;

  color:
    #784158;

  font-size:
    12px;

  text-align:
    left;
}


.cc-benefit-table th.cc-paid-column {

  background:

    linear-gradient(
      145deg,
      rgba(255,248,251,.96),
      rgba(247,227,235,.85)
    );
}


.cc-plan-en {

  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--gold);

  font-family:
    Georgia,
    serif;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    .10em;
}


.cc-plan-name {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  color:
    #784158;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.35;

  white-space:
    nowrap;
}


.cc-princess-plan {
  color: var(--wine);
}



/* 标签 */

.cc-tag {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    1px 5px;

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.35;
}


.cc-free-tag {

  color:
    #aa8042;

  border:
    1px solid rgba(201,162,95,.42);

  background:
    rgba(255,250,240,.88);
}


.cc-paid-tag {

  color:
    var(--wine);

  border:
    1px solid rgba(177,90,126,.28);

  background:
    rgba(255,242,247,.92);
}



/* 皇冠 */

.cc-crown {

  display:
    inline-flex;

  width:
    18px;

  height:
    18px;

  flex:
    0 0 18px;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--gold);
}


.cc-crown svg {

  display:
    block;

  width:
    18px;

  height:
    18px;

  filter:
    drop-shadow(
      0 1px 2px
      rgba(201,162,95,.15)
    );
}



/* 表格内容 */

.cc-benefit-table td {

  padding:
    9px 7px;

  border:
    0;

  border-bottom:
    1px solid rgba(197,151,86,.13);

  color:
    #765061;

  background:
    rgba(255,255,255,.59);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.35;

  text-align:
    center;

  vertical-align:
    middle;
}


.cc-benefit-table tr:last-child td {
  border-bottom: 0;
}


.cc-benefit-table td:first-child {

  padding-left:
    12px;

  color:
    #654050;

  text-align:
    left;
}


.cc-benefit-table td:nth-child(3) {

  background:

    linear-gradient(
      90deg,
      rgba(255,249,251,.52),
      rgba(248,230,237,.44)
    );
}



/* 锁 */

.cc-lock {

  display:
    inline-flex;

  width:
    15px;

  height:
    15px;

  margin:
    0 1px;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--wine);

  vertical-align:
    -3px;
}


.cc-lock svg {

  width:
    14px;

  height:
    14px;
}



/* √ × */

.cc-yes {

  color:
    #963c5e;

  font-family:
    Arial,
    sans-serif;

  font-size:
    16px;

  font-weight:
    700;
}


.cc-no {

  color:
    #baa8ae;

  font-family:
    Arial,
    sans-serif;

  font-size:
    17px;

  font-weight:
    400;
}



/* 数量：无任何框 */

.cc-number {

  color:
    var(--wine);

  font-family:
    Georgia,
    serif;

  font-size:
    15px;

  font-weight:
    700;
}


.cc-unit {

  margin-left:
    2px;

  color:
    #8c6e7a;

  font-size:
    9px;

  font-weight:
    600;
}


.cc-pc-note {

  display:
    block;

  margin-top:
    3px;

  color:
    #9b7a87;

  font-size:
    8px;

  font-weight:
    600;
}



/* =========================================================
   右栏
   ========================================================= */

.cc-payment-card {

  padding:
    19px;

  border-color:
    rgba(197,151,86,.47);
}


.cc-payment-inner {

  padding:
    14px;

  border:
    1px solid rgba(177,90,126,.21);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.68);
}


.cc-payment-label {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    700;
}


.cc-currency {

  width:
    100%;

  min-height:
    42px;

  padding:
    9px 12px;

  color:
    var(--wine);

  border:
    1px solid rgba(177,90,126,.36);

  border-radius:
    9px;

  outline:
    none;

  background:
    #fffafb;

  font-size:
    11px;

  font-weight:
    700;
}



/* 价格 */

.cc-price {

  display:
    flex;

  align-items:
    baseline;

  flex-wrap:
    wrap;

  gap:
    3px 5px;

  margin-top:
    14px;

  padding:
    11px 12px;

  border:
    1px solid rgba(197,151,86,.32);

  border-radius:
    9px;

  background:

    linear-gradient(
      135deg,
      #fffdfb,
      #fff1f7
    );
}


.cc-price-symbol {

  color:
    var(--gold);

  font-family:
    Georgia,
    serif;

  font-size:
    21px;

  font-weight:
    700;
}


.cc-price-value {

  color:
    var(--wine);

  font-family:
    Georgia,
    serif;

  font-size:
    46px;

  font-weight:
    700;

  line-height:
    .95;
}


.cc-price-code {

  color:
    var(--rose);

  font-family:
    Georgia,
    serif;

  font-size:
    9px;

  font-weight:
    700;
}


.cc-price-note {

  flex-basis:
    100%;

  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    600;
}


.cc-payment-divider {

  height:
    1px;

  margin:
    15px 0;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(197,154,88,.48),
      transparent
    );
}



/* 按钮 */

.cc-pay-button {

  width:
    100%;

  min-height:
    49px;

  padding:
    11px 15px;

  color:
    #fff;

  border:
    1px solid rgba(234,214,165,.70);

  border-radius:
    10px;

  background:

    linear-gradient(
      135deg,
      #bd6e90,
      #8a3b5b 52%,
      #572037
    );

  box-shadow:
    0 10px 20px rgba(91,34,61,.20);

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    .2s ease;
}


.cc-pay-button:hover {

  transform:
    translateY(-1px);

  filter:
    brightness(1.04);
}


.cc-payment-status {

  margin-top:
    10px;

  padding:
    9px 10px;

  color:
    #557d66;

  border:
    1px solid rgba(197,151,86,.25);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.76);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.5;

  text-align:
    center;
}



/* =========================================================
   平板
   ========================================================= */

@media (max-width: 1040px) {

  .cc-rent-grid {

    grid-template-columns:
      minmax(260px,.9fr)
      minmax(400px,1.35fr);
  }


  .cc-payment-card {

    grid-column:
      1 / -1;
  }

}



/* =========================================================
   手机
   ========================================================= */

@media (max-width: 790px) {

  .cc-rent-ui {

    width:
      calc(100vw - 20px);
  }


  .cc-rent-header {

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .cc-rent-days {

    align-self:
      flex-end;
  }


  .cc-rent-grid {

    grid-template-columns:
      1fr;
  }


  .cc-payment-card {

    grid-column:
      auto;
  }

}



/* 很窄的手机 */

@media (max-width: 430px) {

  .cc-rent-shell {
    padding: 8px;
  }


  .cc-benefit-card,
  .cc-payment-card,
  .cc-contract-card {

    padding:
      13px;
  }


  .cc-benefit-table th:first-child,
  .cc-benefit-table td:first-child {

    width:
      43%;
  }


  .cc-benefit-table th:nth-child(2),
  .cc-benefit-table td:nth-child(2) {

    width:
      23%;
  }


  .cc-benefit-table th:nth-child(3),
  .cc-benefit-table td:nth-child(3) {

    width:
      34%;
  }


  .cc-plan-name {

    font-size:
      9px;

    flex-wrap:
      wrap;
  }


  .cc-benefit-table td {

    padding:
      8px 5px;

    font-size:
      10px;
  }

}


.cc-rent-ui.cc-benefits-reference{width:100%;margin:0}.cc-benefits-reference .cc-benefit-card{padding:0;border:0;box-shadow:none;background:none}.cc-benefits-reference .cc-benefit-table{font-family:inherit}.cc-benefits-reference .cc-plan-name{white-space:normal;flex-wrap:wrap}