@charset "UTF-8";

/* =========================================================
   ghaithkfmc — صفحة تواصل معنا (contact-page.php)
   Built on the design tokens of ghaith.css; the page hero is in pages.css.
   ========================================================= */

/* ============ قنوات التواصل ============ */
/* The cards overlap the hero, so its clipped glow would show a hard edge behind them. */
.contact-hero::before{display:none}
.contact-channels{position:relative;z-index:1;margin-top:-36px}
.channels{display:grid;gap:16px;grid-template-columns:1fr}
.channel{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:26px 24px;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.channel::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--green-600),var(--gold-500));transform:scaleX(0);transform-origin:right;transition:transform .35s;
}
.channel:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent;color:inherit}
.channel:hover::after{transform:scaleX(1)}
.channel .ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:8px;
  background:var(--green-50);transition:background .3s;
}
.channel .ic svg{width:25px;height:25px;stroke:var(--green-700);transition:stroke .3s,fill .3s}
.channel .ic-fill svg{stroke:none;fill:var(--green-700)}
.channel:hover .ic{background:var(--green-700)}
.channel:hover .ic svg{stroke:#fff}
.channel:hover .ic-fill svg{stroke:none;fill:#fff}
.channel h2{font-size:15px;font-weight:700;color:var(--muted)}
.channel-value{display:flex;flex-direction:column;align-items:flex-start;font-size:17px;font-weight:800;color:var(--green-800);line-height:1.6;overflow-wrap:anywhere}
.channel-value a:hover{color:var(--green-600)}
.channel-note{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--gold-600);
}
.channel-note svg{width:15px;height:15px;stroke:currentColor;transition:transform .3s}
.channel:hover .channel-note svg{transform:translateX(-4px)}

/* ============ النموذج ============ */
.contact-main{background:var(--cream-2)}
.contact-layout{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
.contact-form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:32px 22px;
}
.contact-form-card .sec-head{margin-bottom:28px}
.contact-form-card .sec-title{font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.contact-form-card .sec-sub{font-size:15.5px}

.contact-form{display:grid;gap:18px}
.field-row{display:grid;gap:18px;grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14.5px;font-weight:700;color:var(--green-800)}
.field label span{color:var(--gold-600)}
.field label small{font-size:12.5px;font-weight:500;color:var(--muted)}

/* Shared by the built-in form and the Contact Form 7 output */
.contact-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea{
  width:100%;padding:13px 18px;border-radius:var(--radius-sm);border:1.6px solid var(--line);
  font-family:inherit;font-size:15px;line-height:1.6;color:var(--ink);background:var(--cream-2);
  outline:none;transition:border-color .25s,background .25s,box-shadow .25s;
}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form select{
  appearance:none;padding-inline-start:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C3F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:18px;background-position:left 16px center;
}
.contact-form input:not([type="hidden"]):not([type="submit"]):focus,
.contact-form select:focus,
.contact-form textarea:focus{border-color:var(--green-500);background-color:#fff;box-shadow:0 0 0 4px rgba(30,138,95,.10)}
.contact-form .btn{justify-self:start;padding:15px 34px}
.contact-form .btn svg{stroke:currentColor;transform:scaleX(-1)}

/* Hidden spam trap */
.contact-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Contact Form 7 */
.contact-form .wpcf7-form{display:grid;gap:18px}
.contact-form .wpcf7-form p{margin:0}
.contact-form .wpcf7-form label{display:block;font-size:14.5px;font-weight:700;color:var(--green-800)}
.contact-form .wpcf7-form-control-wrap{display:block;margin-top:7px}
.contact-form .wpcf7-submit{
  padding:15px 34px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;
  background:var(--green-700);color:#fff;box-shadow:0 10px 24px rgba(15,92,63,.24);transition:background .25s,transform .25s;
}
.contact-form .wpcf7-submit:hover{background:var(--green-600);transform:translateY(-2px)}
.contact-form .wpcf7-spinner{margin-inline:12px 0}
.contact-form .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:#B42318}
.contact-form .wpcf7 form .wpcf7-response-output{margin:0;padding:14px 18px;border-radius:var(--radius-sm);font-size:14.5px}

/* ============ نتيجة الإرسال ============ */
.contact-notice{
  display:flex;gap:14px;align-items:flex-start;margin-bottom:24px;padding:18px 20px;border-radius:var(--radius);
  border:1px solid;
}
.contact-notice svg{width:26px;height:26px;flex:none;margin-top:2px;stroke:currentColor}
.contact-notice strong{display:block;font-size:16px;margin-bottom:2px}
.contact-notice p{font-size:14.3px;color:var(--ink-2)}
.contact-notice--success{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}
.contact-notice--error{background:#FEF3F2;border-color:#FECDCA;color:#B42318}

/* ============ الجانب ============ */
.contact-aside{display:grid;gap:18px}
.contact-aside .privacy{margin-top:0}

.contact-social{
  position:relative;overflow:hidden;padding:28px 24px;border-radius:var(--radius-lg);color:#fff;
  background:linear-gradient(150deg,var(--green-700),var(--green-900));
}
.contact-social::before{
  content:"";position:absolute;inset-inline-end:-80px;top:-90px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,188,139,.28),transparent 68%);
}
.contact-social h3{position:relative;color:#fff;font-size:20px;margin-bottom:6px}
.contact-social p{position:relative;font-size:14.5px;color:rgba(255,255,255,.78);margin-bottom:18px}
.contact-social-links{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.contact-social-links a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 18px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:700;
  transition:background .25s,color .25s,transform .25s;
}
.contact-social-links svg{width:17px;height:17px;fill:currentColor}
.contact-social-links a:hover{background:var(--gold-500);border-color:var(--gold-500);color:#fff;transform:translateY(-2px)}

.contact-help{
  display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s,border-color .3s;
}
.contact-help > span:nth-child(2){flex:1}
.contact-help strong{display:block;font-size:16px;color:var(--green-800);line-height:1.5}
.contact-help strong + span{display:block;font-size:13.8px;color:var(--muted);margin-top:2px}
.contact-help .ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--gold-100)}
.contact-help .ic svg{width:23px;height:23px;stroke:var(--gold-700)}
.contact-help > svg{width:18px;height:18px;stroke:var(--green-700);flex:none;transition:transform .3s}
.contact-help:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent;color:inherit}
.contact-help:hover > svg{transform:translateX(-4px)}

/* ============ الخريطة ============ */
.contact-map{background:#fff}
.map-frame{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--green-50);box-shadow:var(--shadow-sm);
}
.map-frame iframe{display:block;width:100%;height:340px;border:0;filter:saturate(.85)}
.map-card{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px;background:#fff;border-top:1px solid var(--line);
}
.map-card > div{flex:1;min-width:180px}
.map-card .ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--green-700)}
.map-card .ic svg{width:24px;height:24px;stroke:#fff}
.map-card h2{font-size:18px}
.map-card p{font-size:14.5px;color:var(--ink-2);line-height:1.7}
.map-card .btn svg{stroke:currentColor}

/* ============ الاستجابة ============ */
@media (max-width:599px){
  /* Compact rows: icon beside the text */
  .channel{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;padding:20px}
  .channel .ic{grid-row:span 3;margin-bottom:0;align-self:start}
  .channel-note{padding-top:4px}
}
@media (min-width:600px){
  .channels{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:repeat(2,1fr)}
  .contact-form-card{padding:40px 36px}
}
@media (min-width:900px){
  .contact-layout{grid-template-columns:1.55fr 1fr;gap:28px}
  .contact-aside{position:sticky;top:110px}
  .map-frame iframe{height:440px}
  .map-card{
    position:absolute;inset-inline-start:24px;bottom:24px;max-width:440px;flex-wrap:nowrap;
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  }
}
@media (min-width:1024px){
  .channels{grid-template-columns:repeat(4,1fr)}
  .contact-form-card{padding:46px 44px}
}
@media (prefers-reduced-motion:reduce){
  .channel,.channel::after,.channel .ic,.channel-note svg,.contact-help,.contact-help > svg,.contact-social-links a{transition:none}
}